Як зверстати email розсилку з картинками: проблеми та рішення

1. Навіщо створювати HTML лист з картинками?
2. Картинки не відображаються в листі: рішення проблеми
3. Як вставити картинку в лист
4. Посилання на зображення. Завантаження з сервера
5. Як прикріпити зображення до листа
6. Розмір картинки для email розсилки
7. Як правильно заповнювати alt і title для картинок
8. Вставити картинку в HTML лист за допомогою ePochta Mailer
9. Робота з кодом: картинка засобами HTML
10. І на останок…

Наша взаимовыгодная связь https://banwar.org/

Зображення здатні не тільки максимально точно і наочно передавати інформацію. Правильно підібрана фотографія або картинка може викликати потрібні емоції, передати знання, спонукати до дії і навіть привести користувача до покупки. Завдяки цьому зображення, як формат контенту, міцно закріпилися в інтернет-маркетингу. А в email-маркетингу все частіше перевага віддається красиво зверстаним брендовим шаблонами email повідомлень .

Які ж є способи розміщення картинок в листі, які при цьому можуть виникати труднощі і як їх вирішити? Про це далі в статті.

Навіщо створювати HTML лист з картинками?

Як ви думаєте, яка рекламна розсилка спрацює ефективніше: просте текстове повідомлення або HTML шаблон з барвистими заманюють зображеннями? Безумовно - друга. І ось чому:

Тому сьогодні більше 70% масових поштових рекламних кампаній оформляються в брендовий гарний шаблон в HTML форматі. Саме використання HTML дає можливість вставити зображення в лист (а також відео, gif файл і інші види візуального контенту).

Картинки не відображаються в листі: рішення проблеми

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

Щоб картинки в листі не зіграли з вами злий жарт, важливо вивчити поведінку активних передплатників по відношенню до вашої розсилці. Ви повинні знати, які поштові клієнти вони використовують і який тип зображень вони частіше вибирають (клацають).

Проаналізувавши ці дані і зібравши додаткову інформацію, ви зрозумієте:

• на які поштові клієнти орієнтуватися при створенні картинок;
• який повинен бути оптимальний розмір зображень для них;
• як вони обробляють ALT-текст;
• і за яким принципом працює функція «Не показувати картинки».

Як вставити картинку в лист

Існує два способи додати зображення до повідомлення в HTML форматі:

1. Вказати посилання на картинку.
2. Прикріпити картинку до листа.

Посилання на зображення. Завантаження з сервера

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

приклад:

<Img src = "http://www.yoursite.com/images/picture.jpg">,
де значення «src» означає джерело картинки.

Зверніть увагу, що в прикладі вказана абсолютне посилання, і такою вона повинна бути. Відносне посилання просто не спрацює і зображення не завантажиться з сервера.

плюси:

• Наявність картинки ніяк не впливає на розмір листа.
• Вставити посилання на картинку - це швидко і просто.
• Можна змінити картинку на сервері і вона зміниться в листі.
• Ваша картинка вже має певний розмір (ширину, висоту), яка не зміниться поштовими сервісами.

мінуси:

• Деякі поштові клієнти, наприклад, Outlook, можуть блокувати зображення, що викликаються посиланнями.
• Якщо ваш сайт не працює або перезавантажується в момент прочитання листа, картинка не відобразиться.
• Якщо перегляд буде здійснюватися без підключення до інтернету, зображення не завантажиться. Це трапляється, коли одержувач підключений до інтернету через модемний зв'язок і використовує програму поштового клієнта.

Як прикріпити зображення до листа

Прикріпити картинку до листа = вставити зображення безпосередньо в електронний лист.

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

В HTML коді листи це буде виражено строки: <img src = "picture.jpg">.

плюси:

• Зображення нікуди не зникне з листа, що б не відбувалося з вашим сайтом.
• Відображається усіма поштовими програмами.
• Вам не потрібно вічно зберігати всі картинки на сервері.

мінуси:

• Вага листа значно збільшиться.
• Деякі поштові сервіси можуть за замовчуванням приховувати картинки, вимагаючи від користувача натиснути «Показати картинки».

Розмір картинки для email розсилки

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

приклад:

В іншому випадку, розміри картинки дотримано не буде, що може негативно відбитися на загальній верстці email повідомлення:

При використанні HTML атрибута «src» ви можете прописати вручну ширину і висоту зображення. Для цього використовують параметри width (ширина) і height (висота).

Приклад коду:

<Img src = "http://www.yoursite.com/images/picture.jpg" width = "250" height = "95" alt = "Логотип">

Примітка: при зміні розміру картинки важливо дотримуватися пропорції. Щоб не плутатися в математичних розрахунках, можна додати тільки один параметр - width (ширину). А потрібну висоту поштовий сервіс підбере автоматично при завантаженні картинки.

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

Ви, напевно, звернули увагу на параметр alt = "Логотип" з прикладу вище.

Як правильно заповнювати alt і title для картинок

ALT- текст - це фактично інформація для користувача про те, що повинно бути на зображенні, яку він з якоїсь причини не бачить.

приклад:

Наскільки розгорнуто описувати картинку в alt-тексті, ви вирішуєте самі. Просто подивіться на готовий лист, уявіть, що в ньому не відобразилася жодна картинка і подумайте, чи зрозуміє читач, про що мова.

Поради email-маркетологів на цю тему прості і логічні:

• Чи не писати на зображеннях важливу інформацію, без якої буде незрозумілий сенс розсилки.
• Чи не відправляти все лист єдиної картинкою.
• Не застосовувати препарат великих фонових зображень: у одній частині одержувачів такої фон просто не буде видно, в іншої - буде повторюватися по ширині і висоті листи.

Вставити картинку в HTML лист за допомогою ePochta Mailer

Якщо ви не знаєте HTML і не плануєте його вивчати, рекомендуємо скористатися спеціальним програмним забезпеченням, подібно ePochta Mailer . Така програма для розсилок дозволяє легко і швидко додавати зображення в лист, без «копання» в коді.

3 кроки додавання картинки

У процесі створення шаблону в ePochta Mailer ви підійшли до етапу, коли потрібно додати зображення.

• Крок 1. Вибираєте на панелі програми меню «Вставити».
• Крок 2. Усередині цього меню вибираєте опцію «Малюнок».
• Крок 3. У діалоговому вікні, яке з'явиться, за допомогою кнопки «Огляд» завантажуєте зображення з комп'ютера в програму. Рядок «Текст для заміни» заповнюєте alt-текстом.

Робота з кодом: картинка засобами HTML

Якщо ви плануєте завантажувати в лист зображення зі свого сайту, переходите на спеціальну вкладку "HTML код" у вікні програми і додавайте код за прикладом

<Img src = "http://www.yoursite.com/images/picture.jpg">,

де src = "http://www.yoursite.com/images/picture.jpg" - джерело картинки, абсолютне посилання на зображення на вашому сайті.

І на останок…

Встановіть все популярне програмне забезпечення листування по електронній пошті на вашому комп'ютері - Outlook, The Bat !, Eudora, і т.д.

Перед відправкою розсилки, надішліть листа на свої поштові акаунти. Переконайтеся, що при використанні різних поштових клієнтів, різних безкоштовних поштових облікових записів, різних web-браузерів і типів Інтернет-підключень, ваше зображення правильно відображається.

<< Повернутися назад, в розділ «Корисні статті»