Не позволяйте отключенным картинкам все испортить

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

Конвертация в HMTL

Изображение, которое получится в результате этого процесса, не будет идентичным оригинальному, но оно будет на него похоже. HTML-версия картинки состоит из маленьких разноцветных квадратиков. По сути, вы получаете пикселированную, мозаичную копию своего изображения. Делать это вручную может быть проблематично. К счастью, сегодня есть различные инструменты для перевода картинок в HTML-код. Например, Mozify от Email on Acid, который позволяет получить изображение, с одной стороны, довольно близкое к оригиналу, с другой — отличающееся от него, чтобы пользователю захотелось загрузить полноценную картинку.

Оригинальное письмо с картинками

А так оно выглядит, когда почтовый клиент получателя отключает изображения

Здорово, да? Аналогичное приложение есть у StyleCampaign.

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

Попробуйте этот метод: вдруг и ваши показатели привлечения улучшатся.

Стилизация alt-текста

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

Если вы уже используете alt-текст, вы можете поэкспериментировать со стилями. Попробуйте сделать текст более ярким и «созвучным» с основной темой оформления письма. Большинство почтовых программ (хоть и не все) поддерживают расширенный alt-текст.

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

Так выглядит логотип, когда изображения не блокируются

Cтилизованный alt-текст, который отображается, если картинки отключены:

А вот использованный для этого эффекта код:

  Bronto

Получше, чем стандартный alt-текст, не правда ли?

Попробуйте сами, чтобы убедиться в том, что заблокированные картинки больше не помеха вашей рассылке.

Источник: blog.bronto.com
Поделиться статьёй
Подписаться на рассылку