Як правильно оформляти картинки у листі

  • 1
  • 2
  • 3
  • 4
  • 5

Одне й те саме е-mail повідомлення сприймається читачами по-різному, багато в чому це залежить від дизайну листа — наскільки воно привабливе для передплатника.

Якщо ви хочете передавати в листі настрій і гарно піднести ваш товар, то одним із важливих елементів дизайну листів для розсилок є картинки.

Чому у листах важливі зображення?

Підводні рифи оформлення зображень у листах:

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

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

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

Коли передплатник бачить у листі ALT текст, це сигнал, що йому потрібно натиснути «показати картинки».

  • "Великі" картинки це погано. Великі можна трактувати по-різному: По-перше, розмір у байтах. Чим більше зображення, тим повільніше воно буде завантажено, допустимо використовуючи мобільний інтернет. По-друге, розмір у точках (пікселях) Найкраще щоб реальний розмір зображення дорівнював тому, який відображається в листі. Часто буває так, що2000x2000 пікселів стискається до 200x200 пікселів. Такі стискування завжди недоречні. Картинка завантажується повільніше і втрачає якість.
  • Не використовуйте зображення 1х1 пікселів. Іноді для заповнення порожнього місця зручно використовувати прозору картинку 1x1 піксель. Такі зображення можуть призвести до спаму. Обійти цю проблему дуже просто, використовуйте натомість картинку 10x10 пікселів :).
  • При невмілому використанні картинка може стати ворогом: багато хто грішить тим, що при складанні листа все повністю заповнюють картинками. Можливо, для реалізації всіх творчих ідей це добре, але з іншого боку — якщо зображення не завантажаться, читач може отримати просто набір посилань. Використовуйте текст для важливої ​​інформації, а зображення, щоб посилити зміст сказаного або привернути увагу читача.

  • Назви блоків краще робити текстовими, щоб вони не зникали під час пересилання.
  • Якщо картинки для письма знаходяться в одному блоці, простежте, щоб вони були однаковими за розміром і скрізь був текст ALT.

    • Погано:

    Добре:

    Важливі моменти під час роботи з альтернативним текстом:

    1. Встановити ALT текст для зображень у повідомленні електронної пошти дуже просто – це стандартна частина синтаксису HTML, у тезі зображення:

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

    2. Якщо зробити ALT текст занадто описовим - передплатнику не потрібно буде кликати на "відобразити картинки"

    3. Експериментуйте з альтернативним текстом, додавши трохи вбудованих CSS, щоб змінити шрифт, колір, розмір та фон ALT тексту, наприклад:

    6. У багатьох поштовихклієнтів альтернативний текст зникає, як тільки розмір або довжина тексту перевищує ширину та/або висоту зображення. Тому краще дотримуватися коротких описів і меншого розміру шрифту, щоб текст ALT не зник.

    FireFox:

    Opera:

    Chrome:

    7. Якщо ви застосовуєте стилі до тексту ALT, перевіряйте, як посилання будуть відображатися в різних поштових клієнтах і чи не ламають вони стилі. Пам'ятайте, що «фокуси зі стилями» іноді покращують зовнішній вигляд листа, але завжди розраховуйте на найгірший варіант, коли альтернативний текст буде показаний звичайним текстом замість картинки.