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

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

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

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

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

Это дурацкая затея, но клиенты часто не знают или их невозможно убедить. Вы не можете контролировать почтовый клиент пользователя. Многие пользователи (такие как я) просматривают электронные письма только в виде простого текста, поэтому независимо от того, что вы делаете, это просто вложение изображения и бессмысленно.
Очень верно; и это действительно дурацкая затея. К сожалению, я получаю ответ «но я видел логотипы подписи электронной почты, которые выглядят четкими», что делает любое техническое объяснение, каким бы правдивым оно ни было, гораздо труднее представить...
Я нахожу объяснение, что то, что работает для почтового клиента клиента, не является универсальным. Например, эта пара брюк подходит вам по фигуре , но на скольких телах они не подходят? Вы можете настроить таргетинг на что-то конкретное, но не на вселенную. Конечно, размещенные изображения могут быть адаптивными, но сами по себе они никогда не являются частью электронного письма. Сомнительно, что ваш клиент захочет сделать что-то большее, чем просто прикрепить изображение к своему электронному письму, что никогда не сработает.
Верно. Я потратил / потратил слишком много времени на это, как есть. Учитывая, что рассматриваемый логотип в основном состоит из текста, лучшее решение, которое я придумал, — это найти ближайший «веб-безопасный» шрифт и построить все это на чистом html/css без изображений вообще. Конечно, шрифт не совсем совпадает, и, как вы упомянули, кто знает, сколько получателей электронной почты вообще когда-либо увидят эту вещь, в какой бы форме она в конечном итоге ни приняла...
@font-face также ненадежен в почтовых клиентах.
Что именно вы имеете в виду, когда говорите «размещенные изображения» в отношении электронной почты?
Я могу себе представить, что искусство ASCII может быть приемлемо в некоторых областях.
Может ли кто-нибудь задать вопрос о том, как поступать в таких ситуациях, когда технология на самом деле не позволяет вашему желанию.

Ответы (5)

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

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

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

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

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

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

Спасибо за ответ и ссылки, Каспар; Я обязательно проверю их. Я бы с удовольствием отказался от всего этого неделю назад, но клиент не может полностью понять имеющиеся технические ограничения. Трудно объяснить, как что-то, казалось бы, такое простое, на самом деле очень сложно, если не невозможно, ха.
Я обычно бросаю клиенту диаграммы поддержки E-Mail Client, которые очень хорошо показывают, насколько плоха поддержка разных вещей. Так будет легче показать, что человеческие ресурсы лучше используются для чего-то другого: кампанияmonitor.com /resources/will-it-work/image-blocking.
Хороший вопрос - эта таблица очень полезна, спасибо.

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

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

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

Хм, спасибо за предложения; что касается последнего, вы имеете в виду медиа-запросы и используете фоновые изображения, которые меняются местами в зависимости от dpi или области просмотра?
# 1 я упоминал в комментариях выше. Это почти единственное возможное решение. # 2 не будет работать для многих почтовых клиентов - сразу приходит на ум Outlook.
@nickpish точно! Это используется на многих современных веб-сайтах (в основном мобильных), поэтому существует множество руководств.
@Scott Да, размещение изображений позволяет использовать логику на стороне сервера и, следовательно, отзывчивость :-) Но, как упомянул Каспар в своем ответе, большинство клиентов, вероятно, будут полностью удалять или блокировать изображения, поэтому последним решением, вероятно, будет отправка писем в виде открытого текста со ссылкой на размещенная копия почты как «просмотреть красиво оформленную электронную почту онлайн»
@Falco решение для медиа-запроса интригует; Я веб-дизайнер, так что довольно хорошо разбираюсь. Хотя, как указывает Скотт, если Outlook не поддерживает медиа-запросы в электронной почте, к сожалению, это невозможно.

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

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

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

что касается SVG, главный вопрос в этом случае заключается в том, поддерживается ли он Outlook, а я так не думаю.
@nickpish SVG не будет работать в Outlook, поэтому я упомянул резервный механизм. Outlook с радостью поддерживает CSS, который отображает исходное изображение вместо SVG. И, насколько мне известно, никто не любит Outlook на iOS (например, они будут использовать его, если им нужно , но...).
Понял - я обязательно посмотрю на предоставленную вами ссылку; это может быть ответ. Спасибо фирфокс.
Хотя вы не должны устанавливать HighDPI равным устройствам iOS... Появляется все больше и больше современных устройств (смартфонов, планшетов, ноутбуков, настольных компьютеров) с более высокой плотностью и масштабированием значков, что приводит к размытым изображениям!

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

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

Это один почтовый клиент из бесчисленного множества. Вы тестировали этот метод в нескольких других почтовых клиентах?
Зачем ppi что-то делать?