Код электронной почты 102: работа с изображениями

Опубликовано: 2020-05-01

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

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

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

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

  • Полное руководство по фоновым изображениям в электронной почте
  • Руководство по анимированным GIF-файлам в электронной почте
  • Использование изображений в электронной почте в формате HTML

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

Подготовьте свой образ

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

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

Найдите место в коде, в которое вы хотите добавить изображение - если вы используете Litmus Builder, выберите вид сетки, чтобы щелкнуть там, где вы хотите, чтобы изображение появилось, а затем щелкните в представлении кода. Когда вы найдете идеальное место, используйте тег <img> для добавления в свое изображение, но замените URL-адрес здесь прямой ссылкой на ваше изображение.

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

 <img src="img-url.jpg" />

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

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

Найдите подходящие размеры

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

 <img src="img-url.jpg" width="400" height="100" />

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

Добавить текст ALT

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

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

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

Поменять местами изображения

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

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

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

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

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

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

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

Электронная почта с идеальным изображением

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

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

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

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

_________________________________

Узнайте больше об изображениях в электронной почте:

  • Почему не следует отправлять электронные письма только с изображениями
  • Руководство по анимированным GIF-файлам в электронной почте  
  • Понимание изображений Retina в электронной почте HTML
  • PNG, GIF или JPEG? Какой формат изображений лучше всего подходит для электронной почты?  
  • Анимированные GIF в электронной почте: 10 советов по сохранению небольшого размера файлов  
  • Полное руководство по фоновым изображениям в электронной почте
  • Анимированные PNG в электронной почте: альтернатива GIF?