Как да използвате фонови изображения в HTML имейли

Малко имейли изглеждат добре без изображения - например актуализации на условията, правни и системни известия или предупреждения. За всички останали е по-вероятно да имате нужда от добри визуални ефекти, които да направят имейл кампаниите привлекателни, информативни, забавни и удобни за четене.

Можете да прочетете повече за изображенията в нашето ръководство "Как да вградите правилно изображения в имейл". По-долу ще се съсредоточим върху фоновите изображения за имейли.

Това са изображения, които се поставят във фона на вашия имейл. Можете да добавите върху тях произволни елементи като текст, емотикони, изображение, видео, CTA, таймери и т.н.

Фонът може да се приложи към цялостния дизайн (примерът вляво) или към лента (stripe), структура или контейнер (примерът вдясно).

HTML имейл шаблони с фонови изображения в редактора на Yespo

Защо да използвате фонови изображения в имейли

Като цяло фоновите изображения служат, за да направят вашите имейли по-приятни за окото, да допринесат за уникалния дизайн на имейлите и да създадат визуална отличителност.

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

Фоновите изображения могат да удължат stipe-a

Фоновите изображения добавят красота

Освен предимствата, които фоновите изображения носят за цялостния дизайн, те подобряват достъпността на вашите имейли. Много търговци обичат първо да създават банери (или други изображения с допълнителна информация върху тях) в софтуер за изображения и след това да ги добавят към имейлите си като едно готово изображение.

Хората с увреждания на зрението, които използват специални устройства или софтуер (екранни четци), за да прочетат имейлите ви, няма да могат да достъпят информация, представена само чрез изображения.

Тези устройства могат да разчитат единствено текст – те не „виждат“ самото изображение, а само т.нар. alt текст (алтернативен текст), ако такъв е добавен. В много случаи обаче alt текстът липсва, което означава, че четците няма да предадат никаква информация, съдържаща се в изображението. Така съществена част от съдържанието може да остане напълно недостъпна за тези потребители.

Като пример нека да разгледаме банера на празнична кампания от REI:

Кампания с фоново изображение от REI

REI са добавили фоново изображение в структурата на имейла, върху което вече е добавен текст: "Up to 40% off - cozy up your indoor life". Призивът за действие (CTA) и маркираният текст под него са добавени като нов слой - не са част от фоновото изображение. Екранният четец може даги разчете, но не и съдържанието, което е вградено директно в изображението. Ако фоновото изображение нямаше alt текст (в случая има и той е идентичен с надписа на банера), потребителите със зрителни увреждания щяха да разберат само, че има някаква разпродажба и кога приключва, но не и точната отстъпка от 40%.

Същото важи и ако имейл клиентът не успее да зареди изображенията правилно. Макар това да се случва все по-рядко заради напредналите технологии за визуализация, все пак ако изображенията не се покажат, всяка важна информация, която е част от тях, ще бъде изгубена за получателя.

Още една причина да добавяте текстови елементи в слой над фона (вместо да вграждате текста в самата картинка) е удобството да се копира. Това е особено важно за имейли с промо кодове или друг текст, които абонатът трябва да въведе някъде.

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

Имейл с промо код, вграден в изображението

Трябва да го запомните и да го въведете ръчно в сайта, когато правите поръчка. И макар да изглежда лесно да запомните толкова кратка дума, удобството и удовлетворяващото потребителско изживяване остават на заден план. Освен това в много ситуации кодовете са от вида GHTY-783-nmYU678OID и малко хора биха си направили труда да го запомнят, независимо колко неустоими оферти предлагате.

Във втория имейл промо кодът е добавен като отделен слой. Така че можете лесно да го маркирате, копирате и въведете, където е необходимо. Отнема само секунда, независимо от устройството, което потребителят използва. И въпреки че е по-дълъг от кода в предишния пример, има повече шансове да бъде използван.

Имейл с промоционален код в отделен от фоновото изображение слой

Как да добавите фоново изображение към HTML имейл по правилния начин

Оптимизирайте размерите на файла

Големината на графичните файлове не влияе на размера на имейла, но може да забави зареждането му или да изкриви визията при показване на различни устройства. В имейл редактора на Yespo можете да качвате изображения до 2 MB, но e препоръчително да се придържате към 1 MB.

Що се отнася до размерите на страните на изображението, те ще зависят от елемента, към който добавяте фоново изображение. Ето някои общи препоръки като за начало:

Добавете alt текстове

Поради причините, които разгледахме по-горе, добре е да добавяте alt текстове към всяко фоново изображение. Ако то не се показва по очаквания начин, alt текстът ще даде на хората представа какво трябва да има там.

Не пишете твърде дълги или сложни описания.

Alt трябва да бъде кратка и ясна фраза с основната информация.

За alt, приложен към цялото оформление, използвайте посланието на цялата кампания, например 50% отстъпка за зимна колекция, безплатен уебинар на 15 декември, нови модели на пуловери от алпака. Alt текстовете, използвани за фонови изображения на структура или контейнер, трябва да са по-описателни, например “суитчър с бяла качулка”, “лектори за уебинар”, “жилетка”.

Избягвайте твърде общи фрази с неясни описания, които често са субективни. Фоново изображение с alt “невероятен подарък за вашето семейство” не казва достатъчно за това, което е изобразено, защото всеки има собствена представа за това какво е невероятен подарък. “Подаръчен комплект със зехтин” би бил по-информативен вариант.

Задайте алтернативен цвят на фона

Ако имейл клиентът не успее да визуализира изображението, цветният фон ще работи като резервен вариант. Изберете цвета, който е най-близо до първоначалното изображение и ще го замени с минимална загуба на визуален ефект.

Нещо повече, фоновите изображения за целия имейл и stripe не се показват на мобилни телефони, така че зададеният алтернативен цвят на фона ще помогне на вашата аудитория, която преглежда кампанията на телефон, да навакса с темата и съдържанието.

Използвайте едно изображение когато задавате фон на целия имейл

То трябва да е достатъчно голямо, за да покрие цялата широчина на имейла. Ако използвате опцията за повторение на фоновата картинка, уверете се, че границите за начало и край не се забелязват.

Използвайте едно изображение за целия фон на оформлението

Не използвайте твърде много изображения в един шаблон

Фоновото изображение трябва да е част от цялостната концепция, а не да направи имейлите ви кичозни. Твърде много изображения от различен тип създават визуален дисонанс и карат вашия имейл да изглежда разхвърлян.

Не използвайте прекалено много изображения

Когато използвате различни фонови изображения за няколко структури, помислете за вмъкване на разделител, за да очертаете визуална граница между блоковете.

Използвайте прозрачен фон за блокове отгоре

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

Също така се уверете, че текстът, който слагате отгоре, е ясно видим и четим. Това е особено приложимо за контейнери с фонови изображения.

Използвайте прозрачен фон за блокове отгоре

Оптимизиране за тъмен режим

Dark Mode е функция, която позволява интерфейсът да премине от светъл към тъмен фон. Тя не прави инверсия на цветовете на шрифтовете, изображенията и останалото съдържание, а ги адаптира – от тъмно към светло – с цел по-добър контраст и по-лесна четимост. Налична е както за десктоп, така и за мобилни устройства, но най-често се използва на телефони и таблети.

Важно е да знаете, че Dark Mode не променя самото фоново изображение, но може да промени неговия фон. Да – фоновото изображение също има фон. И ако самото изображение е прозрачно (или не покрива целия елемент), визията на имейла ще се промени в зависимост от режима на гледане.

Ето как изглежда един и същ имейл на мобилно устройство при стандартен и при тъмен режим. В този конкретен случай разликата не е критична за възприемането на съдържанието, но при друг дизайн може да бъде, затова имайте го предвид при създаването на имейли.

Фон в светъл и в тъмен режим на мобилно устройство

Направете изображенията responsive

Responsive е функционалност, която оптимизира вашите имейли за визуализация на мобилни устройства. По отношение на изображенията, тя позволява да ги настроите спрямо ширината на екрана. В примера по-долу можете да видите как изглеждат снимките с и без responsiveness.

Responsive срещу non-responsive изображения

Страхотни дизайни на имейл фонове

А сега нека преминем към по-динамичната част, която представя страхотни примери за използване на фонови изображения в имейли. Винаги е интересно да се види как брандовете стават креативни и използват пълния набор от предимства на фоновете.

National Geographic винаги използват фонови изображения за цялата широчина на stripe-а в имейл серията The Compass. С голямата си галерия от уникални снимки, от които да избират, те определено могат да извлекат най-доброто от стратегията.

Дизайн с фоново изображение от National Geographic

Фоновото изображение винаги е добра идея за създаване на банер, както доказват YETI и много други.

Дизайн на фоново изображение от YETI

В един имейл Moment обединява тенденциите в дизайна: оформление извън грида, генерирано от потребителите съдържание, бледи цветове.

Дизайн на фоново изображение от Moment

Rifle Paper Co. добавя фоново изображение със същия флорален модел, който има новият им калъф за телефон. Това прави цялата кампания да изглежда елегантна и някак изящна.

Дизайн на фоново изображение от Rifle Paper Co.

Прост, но сладък пример от Allbirds. Семплото фоново изображение не е в центъра на вниманието, но добавя малко празнично настроение към тази новогодишна кампания.

Дизайн на фоново изображение от Allbirds

Хората от Gap знаят, че ако използвате различни фонови изображения за структури, е по-добре да ги откроите една от друга с разделител или допълнителна структура.

Дизайн на фоново изображение от GAP

Ефектът на припокриване от Frank Body създава чувство на носталгия по компютърните интерфейси, които познаваме от детските си години.

Дизайн на фоново изображение от Frank Body

Друго припокриване от Outdoor Voices. Освен че разчупват дизайна, фоновите изображения помагат да се обърне внимание на всяка снимка, предоставена от потребителите (UGC), която използвате в кампаниите си.

Дизайн на фоново изображение от Outdoor Voices

Nordstrom използва цветя във фоновото изображение на контейнерите и успява да създаде открояващ се дизайн чрез семпли елементи.

Дизайн на фон от Nordstrom

Дизайнерите на Ben Sherman често използват едно изображение за фокусен елемент на кампанията.

Дизайн на фон от Бен Шърман

Креативен начин за добавяне на блок с често задавани въпроси към имейла от Pasta Evangelists.

Дизайн от Pasta Evangelists

Рядък пример от Filson за това как да комбинирате различни фонове в рамките на един имейл.

Дизайн от Filson

Както виждате, фоновите изображения в имейл маркетинга ви дават неограничени възможности за творчество. А създаването им в редактора на Yespo е наистина лесно, тъй като не е нужно да се занимавате с кода. Просто качете необходимите изображения в системата, добавете ги където искате в имейла си и редактирайте при необходимост. По този начин ще спестите време, ще създадете красиви кампании и ще ги направите по-удобни за потребителя.

*Източник:

Прочетете повече за CRM маркетинг

Защо са важни поздравителните имейли?	Email маркетинг, достъпен за всички: какво трябва да знаете за EAA преди 28 юни 2025 г.

Често задавани въпроси