Основы HTML-кода email-рассылок: Работа с изображениями

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

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

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

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

— Полное руководство по фоновым изображениям в email-рассылках

— Руководство по анимированным GIF в email-рассылках

— Использование изображений в HTML-письмах

Вы можете легко следить за темами, освещенными в этом руководстве, так что откройте письмо в Litmus Builder, и мы начнем!

## Подготовьте изображение

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

## Вставьте изображение

Найдите место в коде, куда вы хотите добавить изображение — если вы используете Litmus Builder, включите Grid View (Сетку), чтобы кликнуть туда, где должно появиться изображение, а затем переключитесь в режим просмотра кода. Когда найдете идеальное место, используйте тег для добавления изображения, но замените URL здесь на прямую ссылку на ваше изображение.

Если вы не знаете, что такое прямая ссылка, обратите внимание на конец имени файла: оно должно заканчиваться форматом изображения, например «.png», «.jpg» или «.gif». Ссылки на папки или HTML-страницы здесь не подойдут, она должна указывать прямо на изображение, которое вы добавляете в письмо.

«`

«`

Вот и все! Как только вы добавите тег, ваше изображение появится в панели предварительного просмотра, если вы находитесь в Litmus Builder.

Интересно, где можно разместить свои изображения? У большинства ESP (сервисов email-маркетинга) есть система хостинга файлов, где вы можете загрузить свои изображения и использовать эти публичные URL в качестве источника изображения в письме, так что обязательно проверьте вашу ESP. Если вы находитесь в процессе миграции на новую ESP, уточните, есть ли в ней система хостинга файлов. Если ваша ESP не предоставляет хостинг для изображений, рассмотрите возможность использования Amazon AWS или FTP-сервера вашего собственного сайта для размещения изображений.

## Найдите правильные размеры

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

«`

«`

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

## Добавьте ALT-текст

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

«`

«`

Лучший ALT-текст — описательный, краткий и несущий ту же цель, что и ваше изображение. Если вы пропустите свое письмо через Litmus Checklist перед отправкой, мы пометим отсутствующий ALT-текст, чтобы вы могли легко зайти и обновить его. Теперь вам даже не нужно спрашивать разработчика!

## Замена изображений

Передумали насчет этого изображения? У вас есть два варианта:

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

Возьмите текущий тег изображения и найдите путь к файлу:

«`

«`

Замените путь на путь к вашему новому изображению:

«`

«`

2. В зависимости от того, где размещено ваше изображение, вы также можете загрузить новое изображение с *точно таким же именем* в то же место. Таким образом, вам вообще не нужно трогать код для обновления изображения в письме.

## Идеальное email-сообщение

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

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

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

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

_________________________________

Узнайте больше об изображениях в email-рассылках:

— Почему не стоит отправлять письма, состоящие только из изображений

— Руководство по анимированным GIF в email-рассылках

— Понимание Retina-изображений в HTML-письмах

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

— Анимированные GIF в email-рассылках: 10 советов по уменьшению размера файла

— Полное руководство по фоновым изображениям в email-рассылках

— Анимированные PNG в email-рассылках: Альтернатива GIF?