Джейсон Родригес | Дизайнер, писатель, адвокат по электронной почте и менеджер по продукту

  1. JPEG (.jpg)
  2. PNG (.png)
  3. GIF (.gif)
  4. Ломать его
  5. Кодирование изображений
  6. Проблема 1: Изображения не имеют правильного размера
  7. Проблема 2: Границы вокруг изображений
  8. Проблема 3: пробелы вокруг изображений
  9. Проблема 4: Блокировка изображения
  10. Сетчатки Изображения
  11. Оптимизация изображений
  12. Использование сжатых изображений

Это образец из моей последней книги «Профессиональный дизайн электронной почты», которая научит вас элементам отличного дизайна электронной почты. Получить копию сегодня ,

Я люблю хорошее, полностью текстовое электронное письмо. Если вы сможете создать элегантный, интересный дизайн, используя только шрифт, я куплю вам пиво.

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

Сколько форматов файлов существует для изображений? Дюжина? Две дюжины? Больше?

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

Вы можете столкнуться со случайными BMP, а в последнее время и с файлами SVG, но дизайнеры электронной почты в значительной степени стандартизировали три указанных выше формата.

Давайте посмотрим на преимущества и недостатки каждого.

JPEG (.jpg)

Формат файла JPEG, который обозначает Объединенную группу экспертов по фотографии, является отличным вариантом, когда вам нужно включить сложную графику, такую ​​как фотографии или иллюстрации. На самом деле, все с большим количеством цветов или тонкими градациями между цветами или оттенками.

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

Они идеально подходят для фотографий людей, снимков продуктов и сложных иллюстраций. Держу пари, что большинство изображений, которые вы видите в письме, скорее всего, в формате JPEG. Они отличный вариант. Что еще более важно, JPEG поддерживаются практически во всех почтовых клиентах.

Два основных недостатка JPEG - это то, что они не поддерживают прозрачность и не могут быть анимированы. Если мы хотим прозрачности, мы хотим использовать ...

PNG (.png)

Формат Portable Network Graphics, или сокращенно PNG, похож на JPEG в том, что он является отличным вариантом для всего, что имеет много цветов. Это работает одинаково хорошо для простой графики, которая должна быть красивой и четкой. В отличие от JPEG, это формат файла без потерь - это означает, что он не удаляет какую-либо информацию при сжатии. Из-за этого размеры файлов для сложных изображений могут быть больше, чем при использовании JPEG.

Существует несколько разновидностей формата PNG: PNG-8, PNG-24 и PNG-32. PNG-8 поддерживает только до 256 цветов по сравнению с миллионами для двух других вариантов. Хотя все они поддерживают прозрачность, добавленные цвета в 24 и 32 позволяют получить более гладкую графику, поэтому я рекомендую использовать 24. Оба файла дают файлы большего размера, чем 8, но 24 - это хороший компромисс между качеством и размером файла.

Несмотря на широкую поддержку, PNG не работает в худшем почтовом клиенте в мире: Lotus Notes, в частности, в версиях 6 и 7. Однако для большинства из нас мы можем безопасно использовать PNG, поскольку не обслуживаем динозавров. Однако, если у вас есть аудитория, которая любит использовать разочаровывающе медленные, устаревшие корпоративные почтовые клиенты, вам нужно будет полагаться либо на JPEG, либо…

GIF (.gif)

Ах, ГИФ. Давайте все скажем это вместе: GIF, а не JIF. Серьезно, если вы называете это JIF, вы можете показать себя дверь. Я смотрю на тебя, Kevin ,

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

Самое главное, GIF-файлы - это единственный вариант, который позволяет анимированные изображения. Вы когда-нибудь получали кампанию по электронной почте, показывающую потрясающе красивую модель, перебирающую несколько разных нарядов? Это GIF в действии. Если вы хотите добавить какое-либо движение к электронному письму, GIF по-прежнему является лучшим способом сделать это (мы поговорим о движении по электронной почте чуть позже).

Помимо поддержки цвета, основным недостатком использования GIF является то, что они имеют тенденцию создавать файлы большего размера.

Ломать его

Итак, если вам интересно, какой формат использовать, вот несколько полезных рекомендаций, которые помогут вам:

  • JPEG Используйте для любых сложных изображений, которые не требуют прозрачности (например, фотографии, градиенты, снимки продуктов).
  • PNG Используйте для сложных или простых изображений, которые требуют прозрачности. Если вы не Джон Хаммонд ,
  • GIF Используйте для простой графики, такой как логотипы или значки, или когда вам нужна анимация в электронном письме.

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

Кодирование изображений

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

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

<img src = "/path/to/image.jpg" />

Вам нужно сделать это:

<img src = "http://site.com/path/to/image.jpg" />

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

Проблема 1: Изображения не имеют правильного размера

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

Хотя мы можем легко ограничить изображения в родительском элементе в Интернете - без указания размера изображения - нам необходимо явно указать ширину изображения, чтобы оно отображалось в его предполагаемом размере. Особенно в Outlook, который не может интерпретировать размер изображения из файла. Тем не менее, это обычно делается не во встроенном стиле. Вместо этого мы используем атрибут width в элементе img.

<img src = "http://site.com/path/to/image.jpg" width = "600" />

Это работает для большинства почтовых клиентов. Иногда вы можете столкнуться с проблемой неправильной интерпретации высоты изображения. В этом случае вы можете добавить атрибут высоты или использовать CSS, чтобы установить для свойства height значение auto.

Метод атрибута:

<img src = "http://site.com/path/to/image.jpg" width = "600" height = "200" />

Встроенный метод CSS:

<img src = "http://site.com/path/to/image.jpg" width = "600" style = "height: auto;" />

Встроенный метод CSS:

<style type = «text / css»> img {height: auto! важный; } </ style>

Нужно иметь в виду, что Microsoft Outlook действительно странный с изображениями. По какой-то причине в Outlook возникают проблемы с определением размера изображения из файла, и он не обязательно отображает его так, как задумано, без явного объявления размеров изображения в коде. Хотя это может быть проблемой для любого изображения, это наиболее заметно при использовании изображений высокого разрешения для устройств Retina, о которых мы поговорим чуть позже.
  Как минимум, вы должны объявить ширину для ваших изображений. Итак, двигаясь вперед, мы включим это в наш шаблонный тег img.

Проблема 2: Границы вокруг изображений

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

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

Чтобы предотвратить синие границы, мы добавляем атрибут border к нашему шаблонному тегу изображения и устанавливаем нулевое значение.

<img src = "http://site.com/path/to/image.jpg" width = "600" border = "0" />

Теперь, даже когда изображения связаны между собой, мы можем спать спокойно, зная, что вокруг них не будет никаких грязных синих границ, разрушающих наш дизайн.

Проблема 3: пробелы вокруг изображений

Некоторые проекты требуют изображения, размещенные рядом или друг над другом.

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

Самый простой способ убедиться в том, что ваши изображения отображаются без пробелов, - добавить в тег img следующее:

<img src = "http://site.com/path/to/image.jpg" width = "600" border = "0" style = "display: block;" />

Это отображение: блок; Правило берет базовую линию из уравнения и сохраняет все в порядке. Просто следите за тем, где вы его применяете, так как не каждое изображение должно быть превращено в элемент уровня блока. Если у вас есть что-то вроде иконки рядом со строкой текста, то, сделав этот значок элементом уровня блока, выведите его на свою собственную строку.

Проблема 4: Блокировка изображения

Это самый важный момент, когда речь идет об использовании изображений в электронной почте. Как упоминалось ранее в книге, многие почтовые клиенты (и некоторые пользователи тоже) будут отключать загрузку изображений в электронное письмо, пока вы специально не скажете им загружать и отображать изображения. Когда-нибудь видели что-то похожее на это?

Это блокировка изображения в действии. Gmail был одним из главных виновников, но недавно по умолчанию включил изображения. Лакмус на самом деле сделал отличная учеба когда это произошло, и выяснилось, что почти 43% всех пользователей Gmail отключили изображения.

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

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

Все просто: мы используем атрибут alt для предоставления некоторой контекстной информации о наших изображениях.

<img src = "http://site.com/path/to/image.jpg" alt = "Отправляясь в будущее" width = "600" border = "0" style = "display: block;" />

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

Теперь, когда наши изображения заблокированы, большинство почтовых клиентов будут отображать альтернативный текст (ALT), предоставляя подписчикам хотя бы некоторую информацию о том, что, черт возьми, происходит

Крутая вещь в ALT-тексте заключается в том, что мы действительно можем проявить креативность. Используя встроенные стили в теге img, мы можем стилизовать наш текст ALT так, чтобы он вписывался в нашу эстетику дизайна. Мы можем использовать стили шрифта и цвета фона, чтобы сделать дизайн, который прекрасно держится даже при отсутствии изображений.

<img src = "http://site.com/path/to/image.jpg" alt = "Отправляясь в будущее" width = "600" border = "0" style = "color: # 00bafc; font- семейство: Arial, без засечек; размер шрифта: 18 пикселей; отображение: блок; " />

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

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

Сетчатки Изображения

С представлением iPhone 4 Apple популяризировала дисплей Retina. Дисплеи Retina упаковывают огромное количество пикселей в экран, гораздо больше, чем традиционные компьютерные дисплеи. Эта увеличенная плотность пикселей делает экран чрезвычайно четким и четким настолько, что человеческий глаз больше не может различать отдельные пиксели.

Одним из побочных эффектов дисплея Retina является то, что изображения, которые не оптимизированы для них, выглядят размытыми или размытыми. Это может расстраивать, особенно для задиристых дизайнеров. Чтобы обойти это, используйте изображения с более высоким разрешением и уменьшите их до соответствующего размера в нашем коде.

В качестве примера, скажем, у нас есть фотография, которая должна быть 600x400 пикселей. Обычно мы экспортируем это изображение из нашего графического редактора в таком размере. Чтобы на Retina-дисплеях он казался четким, вместо этого мы должны сохранить его как минимум в два раза больше предполагаемого размера. В этом случае мы экспортируем его с разрешением 1200x800 пикселей.

Затем в нашем коде мы просто использовали бы размер 600x400:

<img src = "http://site.com/path/to/retina-image.jpg" alt = "So Crisp" width = "600" height = "400" border = "0" style = "display: block ;» />

Теперь эта картинка выглядит очень красиво на экранах Retina.

Основным недостатком использования изображений Retina в электронной почте является то, что увеличенные размеры изображения также равняются увеличенному размеру файла. Для мобильных пользователей с ограниченными тарифными планами это может быть очень реальной проблемой. Обычно есть два метода, которые могут помочь.

Оптимизация изображений

Один из способов уменьшить размер файла, не только для изображений Retina, - это оптимизировать и сжать изображения с помощью программного обеспечения. Хотя большинство дизайнеров играют с настройками качества в Photoshop, приложения, созданные специально для сжатия изображений, обычно более эффективны, чем все, что может сделать Photoshop.

Хорошей практикой является запуск изображений с помощью инструмента оптимизации перед их загрузкой на сервер. Доступно множество инструментов, мои любимые ImageOptim а также JPEGmini , Если вы используете изображения Retina, прогоните их через одно из них - отличный способ порадовать ваших мобильных абонентов.

Использование сжатых изображений

Другим решением для уменьшения размера файла изображения Retina является использование так называемых сжатых изображений. Сжатые изображения - это не новый формат файла, а способ экспортировать JPEG, чтобы сохранить небольшой размер файла при сохранении хорошего качества.

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

С моей последней книгой вы можете узнать больше о разработке и написании замечательных HTML-кампаний по электронной почте, Профессиональный дизайн электронной почты ,

Мысли? Напишите мне, серьезно.

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