PNG, GIF или JPEG? Какой формат изображений лучше всего подходит для электронной почты?

Существует множество форматов файлов изображений — BMP, EPS, JPEG, PNG и GIF, и это лишь некоторые из них. Как определить, какой из них лучше всего подходит для вашего письма? Каждый формат влияет на размер файла, степень сжатия и качество изображения. Ситуацию усложняет то, что поддержка определённых форматов может отличаться в зависимости от почтового клиента. В этой статье мы рассмотрим плюсы и минусы четырёх популярных форматов для электронной почты: JPEG, GIF, PNG и SVG.

## JPEG (JPG)

Изображения в формате JPEG (сокращение от Joint Photographic Experts Group) — это «полноцветные изображения, которые выделяют не менее 24 бит памяти на каждый пиксель, что позволяет использовать до 16,8 миллионов цветов». Часто их называют по расширению файла — JPG.

JPEG — это формат с «потерей качества», то есть он сохраняет всю цветовую информацию, но уменьшает размер файла за счёт выборочного удаления данных, что может привести к ухудшению качества. В большинстве графических редакторов можно выбрать степень сжатия для каждого изображения — однако помните, что это повлияет на его качество. Если выбрать максимальное качество, изображение будет практически неотличимо от оригинала, но размер файла увеличится.

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

Однако JPEG, вероятно, не лучший вариант для изображений с текстом. Вот тот же текст, сохранённый в формате GIF (о нём мы поговорим далее):

Как видно, текст в формате GIF выглядит гораздо чётче. Артефакты (небольшие «шумы» вокруг букв) в JPEG делают текст размытым или грязным. Вот тот же пример в увеличенном виде:

Как объясняет Cripsen.org, «эти маленькие серые артефакты — часть принципа сжатия JPEG. То, что помогает фотографиям выглядеть реалистично при высокой степени сжатия, становится заметным недостатком при сохранении текста или графики в формате JPEG». Если крупные заголовки выглядят так плохо, представьте, насколько нечитаемым может стать мелкий текст.

## GIF

GIF расшифровывается как Graphics Interchange Format и является «одним из форматов, используемых для отображения индексированной графики и изображений в HTML-документах в интернете». Это означает, что GIF может отображать максимум 256 цветов, поэтому он отлично подходит для простых иллюстраций и изображений с однотонными областями, таких как логотипы и иконки, но не лучший выбор для фотографий.

Одним из главных преимуществ GIF является поддержка прозрачности. Это значит, что с помощью графического редактора можно сделать определённые цвета в палитре GIF прозрачными. Это позволяет размещать GIF на цветном фоне или даже на фотографии без видимых границ. Вот пример нашего логотипа в формате прозрачного GIF на белом и тёмном фоне:

Однако прозрачность в GIF не избирательна. Если сделать цвет прозрачным, он станет прозрачным во всём изображении.

Ещё одно преимущество GIF — поддержка анимации, которая становится всё более популярной в дизайне писем! Вот отличный пример анимированного GIF от Jack Spade:

## PNG

Использование формата PNG (Portable Network Graphics) в электронной почте предлагает ряд привлекательных возможностей, включая «полный диапазон глубины цвета, поддержку сложной прозрачности изображений, улучшенное чересстрочное отображение и автоматическую коррекцию гаммы монитора. Изображения PNG также могут содержать краткое текстовое описание содержимого, что позволяет поисковым системам находить изображения по этим встроенным описаниям».

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

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

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

## SVG

SVG (Scalable Vector Graphics) — это формат изображений для векторной графики. В отличие от изображений в форматах JPG, PNG и GIF, файлы SVG представляют собой обычные текстовые документы, описывающие линии, формы и цвета, из которых состоит изображение. Поскольку SVG-файлы — это текстовые документы, их легко изменять в интернете с помощью JavaScript, CSS и HTML. SVG также не зависят от разрешения: они выглядят чётко на любом экране, сохраняя при этом небольшой размер файла.

Основной недостаток использования SVG в электронной почте — ограниченная поддержка. Устройства на iOS и Apple Mail хорошо поддерживают SVG, но в Gmail, Outlook и международных веб-клиентах поддержка отсутствует. Если большинство ваших подписчиков открывают письма в Apple Mail или на устройствах iOS, можно начать экспериментировать с SVG. Узнайте больше о SVG в электронной почте, включая обзор поддержки SVG в различных почтовых клиентах, в статье Анны Йиман из StyleCampaign.

## КАКОЙ ФОРМАТ ЛУЧШЕ?

К сожалению, однозначного ответа нет. Вам нужно определить, какой формат лучше всего подходит для конкретного изображения. Если вам нужна анимация — очевидный выбор — GIF. Хотите сохранить детали и цвета фотографии? Выбирайте JPEG. Подведём итоги:

### Формат JPEG

— Отлично подходит для изображений, когда нужно сохранить небольшой размер файла

— Хороший вариант для фотографий

— Плохо подходит для логотипов, штриховой графики и больших областей однотонного цвета

### Формат GIF

— Отлично подходит для анимации

— Хороший вариант для клипарта, простой графики и изображений с минимальным количеством цветов и чёткими линиями

— Подходит для простых логотипов с однотонными областями

### Формат PNG

— Без потерь качества

— Отличный выбор, если необходима прозрачность

— Хороший вариант для логотипов и штриховой графики

— Поддержка не везде

### Формат SVG

— Отличный вариант для высококачественных изображений с небольшим размером файла

— Поддержка ограничена почтовыми клиентами на iOS (с некоторыми исключениями)

Лучший инструмент для оценки того, какой формат изображения выглядит лучше всего, — это ваши глаза и, конечно, инструмент для дизайна писем, например Litmus! Просматривайте, как ваши письма (и изображения) отображаются в десятках популярных почтовых клиентов с помощью Litmus Email Previews.

## ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ

— «GIF, PNG, JPG — какой формат использовать?» — Sitepoint.

— «Различные форматы изображений и когда их использовать» — 1stwebdesigner.

— «Графические форматы файлов» — Web Style Guide.

— «GIF, JPG и PNG — в чём разница?» — Sitepoint.

— «Основы использования SVG в электронной почте» — StyleCampaign.