Размеры картинок для email-рассылок

Старайтесь держать каждое изображение для рассылки в пределах 100 KB, делайте ширину картинок в два раза больше ширины их отображения и используйте JPG или PNG вместо WebP. Gmail обрезает любое письмо, HTML-код которого превышает примерно 102 KB, заменяя оставшуюся часть ссылкой «Посмотреть письмо полностью».

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

Что на самом деле измеряет лимит обрезки Gmail

Gmail измеряет размер HTML-кода письма, а не изображений, на которые оно ссылается. Рассылка со ссылками на 10 больших фотографий легко уложится в лимит, в то время как письмо с тяжелыми встроенными стилями и внедренными изображениями — нет.

Это различие принципиально, так как способы решения проблемы отличаются. Изображения по ссылкам не учитываются в лимите 102 KB, поэтому обрезка обычно вызвана повторяющимися встроенными стилями, длинными параметрами отслеживания на каждой ссылке или изображениями, встроенными в формате base64. Удаление встроенных картинок и оптимизация разметки решают проблему обрезки, а сжатие изображений по ссылкам сокращает время загрузки.

Рекомендуемые размеры изображений для email

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

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

Почему WebP все еще плохой выбор для email

Поддержка WebP почтовыми клиентами остается неравномерной, и в особенности непредсказуемо ведет себя Outlook. Электронная почта — одно из немногих мест, где старые проверенные форматы остаются лучшим решением.

Все веб-браузеры поддерживают WebP, из-за чего многие думают, что почтовые клиенты тоже на это способны. Однако десктопный Outlook использует совершенно другой движок рендеринга, а многие корпоративные почтовые системы вырезают или не отображают форматы, которые они не распознают. Сломанная картинка в рассылке обходится гораздо дороже, чем 30 процентов экономии размера файла, которые мог бы дать WebP, поэтому JPG и PNG здесь остаются стандартом.

Выбор формата внутри письма

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

• JPG для фотографий товаров, изображений в шапке и любых реалистичных снимков.
• PNG для логотипов, иконок и графики с однотонной заливкой или четкими краями текста.
• Анимированный GIF только тогда, когда анимация несет смысловую нагрузку, и строго до 1 MB.
• Избегайте WebP и AVIF, так как ни один из них не отображается стабильно во всех почтовых клиентах.
• Полностью избегайте SVG, поскольку большинство почтовых клиентов блокируют его из соображений безопасности.

Изображения заблокированы по умолчанию во многих клиентах

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

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

Как подготовить изображения для рассылки

Чтобы рассылка оставалась быстрой и легко читаемой, выполните следующие 7 шагов.

1. Проектируйте письмо шириной 600 пикселей, чтобы любой десктопный клиент отображал его без прокрутки.
2. Кадрируйте каждое изображение точно под ту форму, которую оно займет в макете.
3. Изменяйте размер ровно до двукратной ширины отображения, не более.
4. Конвертируйте в JPG для фотографий или в PNG для графики с текстом.
5. Сжимайте каждый файл до целевого размера менее 100 KB.
6. Размещайте изображения на платформе рассылок или собственном сервере вместо того, чтобы внедрять их в тело письма.
7. Отправьте тестовое письмо на Gmail, Outlook и мобильный телефон перед запуском кампании.

Общий вес письма важнее, чем вес любого отдельного изображения

Старайтесь держать общий вес письма в пределах 600 KB вместе с изображениями, так как подписчики открывают рассылки на телефонах, часто при плохом интернете. Письмо размером 5 MB загружается медленно и его закроют еще до того, как оно откроется.

Посчитайте количество изображений перед началом сжатия. Рассылка, содержащая 12 фотографий по 100 KB каждая, уже весит 1.2 MB. Это говорит о том, что макет требует сокращения количества картинок, а не просто уменьшения их размера. Сокращение числа изображений обычно улучшает как доставляемость, так и читаемость, поскольку длинные, перегруженные графикой письма редко дочитывают до конца.

Темная тема меняет внешний вид изображений

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

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

Экраны Retina и четкость изображений

Экспортируйте изображения с двукратным увеличением ширины, чтобы они оставались четкими на экранах с высокой плотностью пикселей, но сжимайте их сильнее, чтобы компенсировать лишний вес. Изображение шириной 1200 пикселей с качеством 70 обычно выглядит лучше и весит меньше, чем изображение шириной 600 пикселей с качеством 95.

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

Проверка кампании перед отправкой

• Отправьте тестовое письмо на Gmail, Outlook, Apple Mail и хотя бы на один мобильный телефон.
• Посмотрите тест с заблокированными изображениями и убедитесь, что смысл письма понятен.
• Убедитесь, что письмо не обрезается в Gmail (при обрезке внизу появляется ссылка «Посмотреть письмо полностью»).
• Проверьте, что у каждого изображения есть alt-текст, описывающий то, что на нем изображено.
• Проверьте отображение в темной теме, особенно для логотипов и плоской графики.
• Сложите общий вес всех изображений и убедитесь, что он не превышает 600 KB.

Пакетная подготовка кампании

Обрабатывайте все изображения для рассылки одновременно, чтобы вся кампания соответствовала единым техническим требованиям. Обычно в письме содержится от 5 до 15 изображений, а при еженедельных рассылках за год их набегает сотни.

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

Создайте папку-шаблон с правильно подобранными по размеру заглушками для каждого повторяющегося блока макета, такого как шапка, двухколоночный блок товаров и логотип в футере. При еженедельных рассылках используются одни и те же 4 или 5 форматов, и подгонка новой графики под существующие требования занимает гораздо меньше времени, чем повторный подбор размеров для каждой кампании.