Як вставити зображення в HTML-імейл

Зображення — дуже важливий елемент листа в email-маркетингу, оскільки саме візуальний матеріал дозволяє зробити текст яскравішим та привабливішим. Три прості дії, описані в цій статті, допоможуть вам навчитися швидко додавати зображення в HTML-імейли, а також редагувати їх.

Крок 1. Завантажте зображення на хостинг.

Якщо ви хочете додати зображення в імейл, вам необхідне його посилання, а це означає, що він повинен бути у відкритому доступі в інтернеті. Для цього завантажте зображення зі свого ПК на хостинг, наприклад, ImgBB.

Будь ласка, зверніть увагу: ви не зможете додати зображення, якщо воно завантажено на Google Диск або Dropbox. Це пов’язано з налаштуваннями приватності.

Крок 2. Додайте зображення до імейлу.

Після завантаження зображення, скопіюйте посилання на файл. Якщо ви скористалися хостингом ImgBB, то у випадаючому меню «Embed codes» виберіть опцію «HTML full linked»:

Після цього відкрийте редактор імейлу в тригерній розсилці та виберіть елемент «Імейл». Натисніть на іконку «Вихідний код» та вставте посилання в код.

Вихідний код повинен виглядати наступним чином:

Зверніть увагу, що розмір зображення в листі може бути різним, проте ви можете змінити його параметри прямо в HTML-редакторі. Для цього вам необхідно скористатися атрибутами width та height в коді та зазначити ширину та висоту ілюстрації. Зазначте цифри в лапках, наприклад, width=”400″ та height=”250″.

Ось приклад вихідного коду:

<a href=”https://ibb.co/vxfPdDR”><img src=”https://i.ibb.co/7JBWpbL/01.png” alt=”01″ border=”0″></a>

А ось приклад коду з атрибутами width та height:

<a href=”https://ibb.co/vxfPdDR”><img src=”https://i.ibb.co/7JBWpbL/01.png” alt=”01″ border=”0″ width=”400″ height=”250″ /></a>

Щоб зображення було адаптивним на різних пристроях, додайте ще такий атрибут до коду вашого HTML-імейлу: width=”100%”.

Крок 3. Протестуйте HTML-імейл перед надсиланням.

Ми наполегливо рекомендуємо перевіряти HTML-імейли перед надсиланням за допомогою тестових листів. Ця функція дозволяє вам переконатися в тому, що зображення виглядає коректно, а отримувачі вашої тригерної розсилки побачать гарні імейли.

Хочете додати до вашого листа ще й гіфку? Не проблема! Ознайомтеся з нашою статтею.

Вдалої розсилки!

Written by Helen Holovach 23 February 2021