Подпись электронной почты, черт возьми - Как добавить изображение логотипа и сделать его четким?

На этом форуме я нашел пару полезных тем, касающихся проблем, связанных с (отображением) изображений в подписях электронной почты - например, здесь - и я искал по всей сети, но все еще не нашел хорошего решения, которое достаточно решает проблему. Мой клиент просто хотел бы, чтобы логотип его компании был включен в подпись его электронных писем, и проблемы, с которыми я столкнулся, можно резюмировать следующим образом:

1. Я могу экспортировать растровую версию логотипа из AI в реальном размере, и он будет выглядеть резким на рабочем столе, но будет иметь пиксельное / размытое изображение на экранах высокой плотности (например, «сетчатка»), таких как iPhone.
2. Как указано в теме, на которую я ссылался, я могу экспортировать логотип в 2-3 раза больше фактического отображаемого размера, чтобы отображать дисплеи высокой плотности, но логотип будет выглядеть мягким на дисплеях не высокой плотности, когда он уменьшен. , В данном случае это особая проблема, поскольку логотип содержит текст, который выглядит ужасно, если сопоставить его с реальным текстом в браузере / почтовом клиенте.
3. Я рассмотрел .svgкак вариант, но, видимо, поддержка не велика; и в этом случае я предполагаю, что подавляющее большинство пользователей, читающих электронную почту этого клиента, будут использовать Outlook, поэтому то, что корректно отображается только в iOS / webkit / etc, не является приемлемым вариантом.

Я в растерянности на данный момент и задаюсь вопросом, есть ли другой возможный вариант там. Я не уверен, например, возможно ли реализовать изображение высокой плотности с резервным копированием lo-res в подписи электронной почты?

Любые предложения / идеи здесь очень ценятся. Смешно граничить с тем, насколько трудной оказалась эта задача.

Если бы я был тобой, я бы отказался от идеи. Обработка найма - это наименьшая из ваших проблем, потому что в E-Mail просто нет поддержки.

Но проблемы начинаются раньше. Большинство почтовых клиентов удаляют изображения и добавляют кнопку, где пользователь может активировать изображения. Вся эта суета из-за логотипа - это слишком много хлопот.

Я просто написал бы сигнал с открытым текстом и все.

Но, может быть, вы не хотите сдаваться, так что это может быть что-то для вашего

Или используйте эту технику:

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/

Технические решения могут быть:

1. Разместите изображение на сервере и просто вставьте <img>тег с адресом. Сервер может использовать метаинформацию HTTP-запроса, которая будет извлекать изображение и предоставлять правильный размер изображения для устройства.

2. Сделайте то же самое с дисплеем размером осознает CSS (Но я не знаю, насколько хорошо поддержка этого в различных почтовых клиентах) Но по сути вы можете добавить оба изображений в почте и использование CSS для различных размеров дисплея, чтобы отобразить правильное изображение (и вы даже можете указать специальное изображение для печати ...)

Многие почтовые клиенты сегодня поддерживают SVG (Scalable Vector Graphics). Для этих клиентов покажите SVG. Он гарантированно не будет уничтожен при масштабировании, потому что он читается как компьютерная программа (например, рисует круг, затем рисует линию, соединенную с этим кругом при 120 и 240 градусах и т. Д.), Поэтому процессор будет правильно отображать не размытое изображение внутри поддерживающего программного обеспечения.

Если вы заботитесь о старых клиентах, существует множество альтернативных методов , но вам нужно определить, какие резервы, если таковые имеются, вас волнуют (например, в каких почтовых клиентах вас интересует отображение подписи). Я бы лично выбрал метод, который дал бы почти универсальное покрытие с минимальными усилиями, вместо того, чтобы пробовать сложное 100% покрытие или отсутствие покрытия - есть хороший, который поддерживает все, кроме Android 2.3, что, вероятно, редко, и это всего лишь четыре строки код.

С другой стороны, CSS медиа-селекторы, вероятно, тоже должны работать. Если разрешение экрана меньше, скажем, 800 пикселей в ширину, используйте PNG или JPEG, который вы используете сегодня, в противном случае используйте SVG. Я вполне уверен, что любые устройства «Retina Display» будут поддерживать SVG, или, по крайней мере, большинство из них.

Действительно старый пост, но так как я часами боролся с одной и той же проблемой и просто решил ее, я опишу, как я это сделал. Проблема, с которой я столкнулся, заключалась в том, что логотип компании, который у меня хорошо отображался на настольных мониторах (даже HD). Но он выглядел размытым / нечетким, когда его видели на дисплее телефона с сетчаткой. Изображение, которое я получил от клиента, было в точности равно размеру, о котором просили. Проблема (строго для разработчиков :) с дисплеями Retina заключается в том, что они имеют в четыре раза больше пикселей на единицу площади, чем стандартные экраны. Так что вам нужно изображение в два раза больше, чем вы хотите на экране. Например, если вы хотите, чтобы ваш логотип имел ширину и высоту 124x48, создайте изображение размером 248x28. Это удваивает разрешение изображения и увеличивает количество пикселей в четыре раза. Затем используйте HTML, чтобы заставить ваше новое изображение отображаться на половине его новой ширины, т.е.<img src=”your_image.jpg” width=”124” />, Выполнение этого должно решить любую пикселизацию или размытие изображения. ура

У меня была такая же проблема! Очень расстраивает, но я наконец-то обнаружил, что использование артборда размером 120px (высота) на 300px (ширина), например, в Illustrator с последующим экспортом для экранов в формате PNG 8 с разрешением 96 ppi хорошо работает для сигнатур Microsoft Outlook!