Что такое валидные картинки

Подбираем картинки для письма и оформляем email-рассылку с помощью изображений

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

Можно ли обойтись без картинок?

Без картинок письмо будет выглядеть так:

А вот красиво оформленная брендированная рассылка:

Второе письмо выглядит намного эффектнее. Почему? Вот неполный список функций, которые выполняет картинка в теле письма:

• позволяет быстро схватить смысл письма
• привлекает внимание
• дополняет информацию
• демонстрирует товар
• иллюстрирует ситуации
• вызывает эмоции

Иллюстрированные рассылки работают лучше, кроме логики, это показывают и исследования :

• 90 % информации, которую мы воспринимаем, – визуальная, мозг обрабатывает ее в 60 000 раз быстрее текста
• 40 % людей лучше реагируют на картинки, чем на буквы
• 46,1 % готовы доверять компании, которая красиво оформляет рассылку
• 12 % дополнительного трафика получают материалы с инфографикой

Изображения – не только красивый атрибут в теле письме, но самостоятельный мощный маркетинговый инструмент:

• картинки удерживают внимание на время, необходимое для принятия решения – читать письмо или нет, это решающие 3 секунды для вовлечения новых подписчиков
• фирменный стиль письма повышает узнаваемость бренда
• на кликабельные картинки охотнее кликают, чем на обычные ссылки
• правильное изображение усиливает текст и общий эффект письма
• иллюстрированные рассылки повышают лояльность потенциальных клиентов и увеличивают продажи

Чтобы изображения делали рассылку эффективнее, нужно правильно их подбирать и оформлять.

Каким должно быть изображение для email-рассылки

Существует несколько общих требований к картинкам для рассылки.

Маркетинговая составляющая

Первое впечатление о рассылке человек получает, увидев Hero Shot – главное изображение письма. По этой картинке он должен сразу понимать, о чем текст.

Критерии хорошего главного баннера:

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

Размеры изображения

Лучше использовать исходники нужного размера. То есть не менять длину и ширину картинки для письма при верстке с помощью HTML и CSS, а подогнать изображение заранее в редакторе – Canva, Photoshop, Figma. У такого решения несколько плюсов:

• картинка отобразится корректно в исходном виде у пользователей Outlook
• если изображение не отобразится, на его месте будет прямоугольник такого же размера, и верстка не «съедет»
• не придется прописывать размеры в коде через «src»
• картинка не потеряет в качестве при сжатии и не замедлит загрузку страницы

Для письма лучше использовать изображения весом не более 5 Мб. Чем легче картинка – тем быстрее прогрузится письмо. А в некоторых редакторах есть свои ограничения для этого параметра. Оптимально, если картинка будет не тяжелее 500 Кбайт.

Формат изображения

Наиболее популярные форматы:

• jpg – подходит для фото, изображений с более чем 256 цветами, небольших файлов, но теряет качество при сжатии или масштабировании
• png – подходит для текста, лого и небольших изображений, поддерживает прозрачный фон, сжимается без потери качества, но много весит и не подходит для больших изображений
• gif – в дополнение к возможностям png еще и анимируется, но не поддерживает больше 256 цветов
• svg – гибкий формат для файлов небольшого размера, хорошо масштабируется, но его поддерживают не все почтовые клиенты

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

Адаптивная верстка

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

• ширина не более 600 пикселей
• важная информация и призыв к действию размещаются в верхней части письма ― в мобильной версии письмо становится длиннее
• большие кнопки призыва к действию – от 44 х 44 пикселей, чтобы можно было кликнуть пальцем по экрану телефона
• адекватное количество изображений – чтобы не перегружать письмо
• небольшое количество текста на картинке, если он есть, который легко читать с мобильного устройства
• отдельно размещенная важная текстовая информация – так как картинка может не отобразиться
• наличие описания (alt) – на случай, если изображение не прогрузится

Описание

Лучше заранее прописать к картинке фон для alt-текста, который пользователь увидит вместо пустого поля, и alt-текст, чтобы передавал смысл изображения.

Текст, который отображается на месте картинки, если она не прогрузилась, прописывается через атрибут «alt». Он должен быть точным и понятным, так как поможет подписчикам ориентироваться в письме.

Через атрибут «title» прописывается описание – текст, который появляется, если навести курсор на картинку. Это дополнительная информация, которая не играет решающей роли в письме.

Как вставить картинку в тело письма

Есть несколько способов добавить изображения в рассылку.

Вставить картинку в письмо ссылкой

Она укажет путь к файлу. Ссылка прописывается в отдельной строке HTML-кода через «src» и имеет следующий вид:

<img src=»http://www.site.com/images/picture.jpg»>

Здесь «img» – атрибут, через который прописывается картинка, с помощью «src» указывается путь, в кавычках прописывается ссылка. Дополнительно можно прописать значения высоты и ширины, но лучше сразу задать их при создании картинки.

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

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

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

Картинку можно вставить в электронное письмо, прикрепив файлом. В коде появится строка следующего вида:

<img src=»https://sendsay.ru/blog/podbiraiem-kartinki-dlia-pisma-i-oformliaiem-email-rassylku-s-pomoshchiu-izobrazhienii/picture.jpg»>

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

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

Вставить картинку в текст письма в Sendsay

В сервисе рассылок Sendsay можно создать рассылку с изображениями несколькими способами:

• в HTML-редакторе
• в блочном редакторе
• выбрать базовый или тематический шаблон в галерее

В HTML-редакторе вы создаете письмо с нуля и прописываете картинку ссылкой.

В блочном редакторе – выбираете, из каких элементов «построить» письмо, загружаете изображение в соответствующий блок. Можно просто перетащить картинку в окошко.

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

Фото также можно прикрепить перетаскиванием.

Если кликнуть на картинку, слева появятся настройки расположения и окошко для альтернативного текста.

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

Изображение в теле письма не отображается – что делать?

Картинки в письме могут отображаться неправильно или не отображаться совсем. Если такое происходит, обратите внимание на следующие моменты:

• подходит ли формат изображений почтовикам, которые используют подписчики
• как в них работает функция «не показывать картинки»
• какой должен быть оптимальный размер фото
• как почтовые клиенты отображают alt-текст

Чтобы настроить изображения в рассылке, нужно понять, какие почтовые сервисы используют подписчики и как читатели ведут себя с письмами. Частично проблемы решаются на этапе тестирования рассылки.

Какое средство для обеспечения отзывчивых картинок следует вам использовать?

В последнее время появилась целая куча способов создания отзывчивых картинок (responsive images) — иными словами, появились технические средства, обеспечивающие подстановку правильной иллюстрации в зависимости от ряда условий (например, от размеров экрана и скорости доступа к Интернету у читателя). Все эти средства делают своё дело несколько чтобы сопоставить их, мы с Кристофером Шмиттом составили электронную таблицу их возможностей и требований.

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

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

Сколько прежнего контента у меня есть?

На самом деле этот вопрос означает «есть ли у меня такой прежний контент, который обновить не выйдет?». Например, на сайте у меня более тысячи страниц, а работаю над ними один я:

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

Единственное известное мне средство, которое для работы вовсе не требует изменений в разметке — это Adaptive Images. Работает оно, перенаправляя запросы к изображениям через который разумно подбирает (а при необходимости и создаёт) иллюстрации того размера, который подходит под ширину экрана у читателя.

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

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

Подходит ли мне специальная разметка?

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

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

Если вы приходите к мысли о том, что специальная разметка (или специализированный стиль CSS) для вас не годится, тогда остаётся только Adaptive Images. Ведь даже потребуется поместить префикс и это потребует обработки прежнего контента.

Необходим ли мне семантический код?

Некоторые технические приёмы создания отзывчивых картинок подразумевают такую разметку, которая в строгом смысле не является семантическою. В конце концов, для изображения есть только один способ быть семантическим: его атрибут src должен указывать на реальное изображение, а атрибут alt должен содержать текст, описывающий это изображение. Что хорошо подытожил Брэд Фрост:

Другими словами, если технический приём может потребовать того, чтобы атрибут src у изображения отсутствовал, или ссылался на прозрачный GIF, в этом же роде, то код выйдет не семантическим.

Ну а отчего же некоторые средства создания отзывчивых картинок прибегают к этому? Да оттого, что если у иллюстрации указывает на картинку с лошадью, то эта картинка начнёт скачиваться сразу же после того, как браузер прочтёт код иллюстрации. Нет практического способа, позволяющего предотвратить это. Даже если вы сверхшустро подмените на более подходящую версию изображения, то браузер станет скачивать две картинки вместо одной — получится не выигрыш, а проигрыш в скорости. Вы можете, впрочем, счесть это приемлемым (например, у десктопов обычно и скорость соединения с Интернетом побольше, чем у мобильников). Обычно, если используется такой приём, указывают наименьшую из картинок разного размера.

Если для вас важна семантичность, то взгляните на вышеупомянутый Adaptive Images или же плагин для jQuery, созданный Кристофером Шмиттом и допускающий употребление с семантическим

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

Нужна ли мне валидность кода?

Под валидностью здесь понимается способность кода пройти проверку W3C Markup Validation Service. Это средство проверки помогает вам найти проблемный код, помогает создавать разметку лучше. Но код не становится хуже просто потому, что он не проходит проверку: если невалидный код прекрасно работает во всех браузерах, то его валидность не должна заботить ни вас, другого.

Однако же, если валидность вам нужна (например, если заказчик непременно требует её от вас, угрожая отказом от оплаты за работу), то некоторые средства обеспечения отзывчивых картинок вы использовать не сможете. Например, picturefill использует который может со временем оказаться стандартизирован, но сейчас это не так, так что код получается невалидным. Кроме того, по стандарту требуется, чтобы имел так что отказ от этого атрибута с намерением избежать вышеупомянутой проблемы двойного запроса картинок также приводит к невалидному коду.

Если валидность кода является для вас непременным требованием, то я рекомендую Adaptive Images, или Responsive Enhance. Все эти средства используют простой и валидный который содержит

Нужен ли мне тонкий контроль над изображениями?

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

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

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

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

Далее ими занимается JavaScript.

Нужно ли мне наличие JavaScript?

Большинство средств для создания отзычивых картинок именно джаваскриптом совершает свои фокусы. очень немного (только чтоб cookie поставить), но всё равно джаваскриптом. Для нескольких средств вам придётся поместить <img> внутри на тот случай, когда у читателя JavaScript отключён. Если такой подход вам не нравится, но если вам притом надобно быть уверенными, что картинки и без джаваскрипта заработают, то вам лучше всего будет положиться Этот сервис построен на идентификации устройст по заголовку «User-Agent» и передаёт соответственно уменьшенное изображение. Так что вы сошлётеся на наибольшую (в разумных пределах) версию изображения из имеющихся у вас, а Sencha его уменьшит и передаст читателю уменьшенную версию при необходимости (увеличением же, по понятным причинам, не занимается).

Как насчёт зависимости от джаваскриптовых библиотек?

И HiSRC, работают на jQuery. Если в вашем проекте используется другая библиотека, то эти средства для вас, возможно, не подойдут. (Но вы можете портировать их, а затем открыть исходный код!) А если вы не пользуетеся никакою библиотекою, ну, тогда пора бы ужé, наверное — но сейчас не будем об этом.

Нужны ли мне серверные скрипты?

Некоторые из обсуждаемых нами средств зависят не только от джаваскриптов. Adaptive Images полагается в основном да на PHP. предполагает сервер Apache. И хотя, конечно, все мы знаем и любим PHP многие вебсайты работают на технологиях вроде Ruby или Python.

Responsive Images (первоначальная версия от Filament Group) также пользуется .htaccess. Так что если в качестве сервера у вас нечто вроде Nginx, то придётся либо отказаться от этого технического средства, либо портировать на подобный ему, но отличающийся синтаксис конфигурации Nginx.

Нужно ли мне проверять скорость Интернета у читателя?

Выяснить ширину окна браузера и по ней принять решение о том, какую картинку доставить читателю — это прекрасно, и именно это лежит в основе самóй идеи отзывчивых картинок. Однако же, на самом деле, это должно быть лишь половиною оснований для такого решения. Другая половина — скорость связи с Интернетом. Если у читателя достаточно быстрое соединение с Интернетом, то передавать ему крупные иллюстрации — это нормально. Если у читателя очень медленное соединение с Интернетом, то он должен получать изображения поменьше (вне зависимости от ширины экрана). Как жаль, что медиазапросы скорости Интернета не реализованы в самих браузерах.

Два нынешних инструмента обеспечения отзывчивости картинок проверяют скорость Интернета, когда принимают решения: Foresight.js (они применяют один и тот же приём Работает это через скачивание тестового файла с измерением времени скачивания (пороговое значение настраивается в конфигурации). Сам тест несколько подтормаживает загрузку страницы, но, теоретически, экономия на размере изображений, скачиваемых в зависимости от скорости, стóит того.

Могу ли я полагаться на сервисы других лиц?

Sencha.IO — полностью внешняя служба обеспечения отзывчивых картинок. Насколько я знаю, работает она прекрасно, никаких крупных перебоев в работе у ней не случалося, но, конечно, риск всегда есть.

Конечно, вы можете думать так: «Клёво, приёмы Sencha.IO превосходны, но необходимость полагаться на их сервер вызывает беспокойство — хотел бы я запустить нечто подобное у себя на сервере». Если вы и впрямь хотите этого, тогда есть общедоступная база данных WURFL, и есть средство Server Side Responsive Images для локальной работы с нею.

Имеются также сервисы наподобие Device Atlas Cloud, занимающиеся распознаванием устройств. Они также создают зависимость от себя. Сомнений нет: их цель в том, чтобы всё время оставаться в онлайне и работать быстро, но призадумайтеся поосторожнее о том, как и от кого вы желаете зависеть в своём деле.

Есть ли специальная CMS со специальными возможностями?

Предположим, что проект ваш основан на WordPress. А в WordPress есть ведь встроенный загрузчик иллюстраций. Когда вы им загружаете иллюстрацию на сайт, то он может создать несколько уменьшенных версий изображения. Это круто, это мощно, и этим можно (нужно) воспользоваться. Keir Whitaker обсуждает использование этой возможности в своей статье «Automatic Responsive Images in WordPress».

Приём этот, конечно, годится не только для WordPress. Я уверен, что такое же средство существует (или может быть прикручено) к любой CMS.

Могу ли я дожидаться будущего?

Выход в свет «нового iPad» (то есть третьего, заметим на будущее) привёл к появлению множества этих технических средств и их обсуждений. Высокая плотность пикселов нового iPad превосходна при отображении векторных изображений или крупных фотографий, но не особенно годится для небольших значков, которым приходится растягиваться до своего размера и которые поэтому выглядят размыто. Но отгрузка значков повышенного разрешения означает увеличение размера файлов и подтормаживание сайтов. Стало быть, нужно доставлять их только в тех обстоятельствах, когда они нужны читателю.

Вебостандартизаторы осведомлены об этой проблеме. Её обсуждению посвящена целая группа. Со временем эту проблему они могут решить — и мы сможем начать использовать те средства, которые нам предложат (предположим, что эти средства окажутся куда лучше, чем нынешние).

Возможно, станем переключать src у картинок посредством content, как предложил Nicolas Gallagher. Возможно, стандартизируют элемент <picture>. Возможно, будет атрибут srclist в HTML или свойство src в CSS. Возможно, будет префикс.