Jak łatwo zadziwić każdego subskrybenta obrazem tła wiadomości e-mail (+ kod, który to zrobi!)

Opublikowany: 2021-07-23

E-maile mogą wydawać się nieco przewidywalne dzięki obrazowi tutaj, blokowi tekstu tam… Czy można ożywić wrażenia subskrybenta? Obrazy tła. Są nieoczekiwane i dodają nowy wymiar Twojemu projektowi, sprawiając, że Twoje e-maile „wyskakują”. Dobrze zrobione sprawiają, że Twój e-mail wydaje się być milionem dolców, ale są niezwykle łatwe do wykonania.

Czytaj dalej dla:

Zalety obrazów tła
Inspirujące przykłady e-maili
Rozważania projektowe
Jak kodować obrazy tła

Czym są obrazy tła? (A po co?)

Obrazy tła to obrazy, które są stosowane do tła lub za elementem. Zamiast być głównym punktem e-maila, jak wizerunek bohatera, częściej są subtelne i uzupełniają inne treści w kampanii.

Główną zaletą korzystania z obrazów tła jest to, że umożliwiają umieszczanie na nich dodatkowej zawartości HTML. W przeciwieństwie do innych obrazów, w których tylko sam obraz może istnieć w tej przestrzeni, obrazy tła zapewniają możliwości nakładania warstw, dzięki czemu możesz mieć dodatkowe obrazy, tekst lub wezwania do działania (CTA) w tej samej przestrzeni.

przykład żywego tekstu HTML i kuloodpornego przycisku nad obrazem tła

Używanie żywego tekstu HTML na obrazie tła, zamiast dołączania tego tekstu jako części obrazu, oznacza, że wiadomość jest czytelna, gdy obrazy są wyłączone, co czyni tę technikę świetną techniką tworzenia lepszych, bardziej dostępnych wiadomości e-mail w formacie HTML.

Oprócz pomocy w tworzeniu kampanii, które zapewniają lepsze wrażenia z czytania, obrazy tła oferują również wiele możliwości projektowania, wyróżniając Twoją kampanię na tle konkurencji.

Kreatywne sposoby, w jakie marki wykorzystują obrazy tła

Miro umieścił obraz tła zawierający kształty za sekcją bohatera, zwracając uwagę na główny nagłówek wiadomości e-mail i komunikat, który jest nałożony za pomocą tekstu na żywo.

E-mail Miro z obrazem tła — Źródło: Naprawdę dobre e-maile

Uplers użyli obrazu tła, aby podkreślić zniżkę na swoje usługi, z obrazem kuponu umieszczonym za kodem kuponu.

Uplers e-mail obraz tła dla kodu kuponu — Źródło: Naprawdę dobre e-maile

Figma dodała subtelny, powtarzający się wzór tła do treści tego e-maila, przedstawiając nam ich nowy produkt do tablic. Wzór, który zawierają, nawiązuje do tła znajdującego się w produkcie.

Obraz tła Figma w wiadomości e-mail — Wyświetl ten e-mail w Litmus Builder

Chipotle umieścił duży obraz tła za tym imponującym bohaterem i obszarem ciała, w tym zdjęcie produktu i wzór linii. Na górze tego obrazu mają animowany GIF z przezroczystym tłem i tekstem na żywo w obszarze ciała.

E-mail Chipotle Friendsgiving z subtelnym obrazem w tle — Źródło: Naprawdę dobre e-maile

Animowane pliki GIF mogą być również używane jako obrazy tła, takie jak ten przykład z usługi Adobe Stock , promujące świąteczne kolekcje z treściami bohaterów, w tym tekstem na żywo i przyciskiem CTA umieszczonym nad animowanym tłem.

Poczta e-mail Adobe Stock z animowanym obrazem tła w formacie GIF — Źródło: Naprawdę dobre e-maile

Rozważania projektowe

Myśląc o wdrożeniu obrazów tła, warto wziąć pod uwagę pewne kwestie projektowe.

Kontrast

Aby zapewnić wszystkim czytelnikom wartość treści nakładanych na obrazy tła, należy pamiętać o kontrastach. Traktuj obraz w taki sam sposób, jak jednolity kolor, i testuj kolory na obrazie z kolorami treści.

Jeśli projektujesz za pomocą Figma, możesz dodać wtyczki, takie jak Color Blind i Contrast, aby sprawdzić, czy spełniasz wytyczne dotyczące dostępności treści internetowych (WCAG). Istnieje również wiele aplikacji internetowych, takich jak Kontroler kontrastu WebAim, w których możesz przetestować kolory w swoich projektach.

Prostota

Innym sposobem na zapewnienie czytelności jest prostota. Zajęte tło może utrudnić uzyskanie wartości dowolnego tekstu na żywo, który umieścisz na swoim obrazie. Dlatego często warto rozważyć obraz tła jako ulepszenie, a nie funkcję.

Jednolity kolor awaryjny

Ponieważ nie wszystkie klienty poczty e-mail będą honorować obrazy tła, zaprojektuj jednokolorowe rozwiązanie zastępcze. Subskrybenci korzystający z klientów poczty e-mail, którzy nie obsługują Twoich zdjęć, mogą nadal cieszyć się wspaniałymi wrażeniami dzięki jednolitemu kolorowi. Pamiętaj, aby wybrać kolor zastępczy, który pasuje do Twojego projektu i dobrze kontrastuje z elementami pierwszego planu.

Jak kodować obrazy tła w wiadomości e-mail

Zanim przejdę przez kod, zobaczmy, którzy klienci będą renderować styl CSS w tle, a którzy potrzebują pomocy zastępczej VML.

Dobra wiadomość: poprawiono obsługę wbudowanego CSS w tle, a klienci poczty internetowej w pełni obsługują tę metodę, co oznacza, że atrybut HTML w tle nie jest już wymagany.

Zła wiadomość: Niestety, Poczta systemu Windows 10 po prostu nie lubi obrazów tła. Nie wyrenderuje wbudowanego CSS ani przestarzałego atrybutu tła HTML. A zastosowanie VML spowoduje problemy z renderowaniem z komunikatem o błędzie „nie można wyświetlić obrazu”.

Jeśli martwisz się wrażeniami, jakie otrzymują subskrybenci Poczty systemu Windows 10, rozważ pominięcie VML. Gwarantuje to, że zastępcze kolory tła zapewnią odbiorcom pakietu Microsoft Outlook Suite wspaniałe wrażenia podczas czytania wiadomości e-mail bez dodatkowych dekoracji.

jak wyglądają obrazy tła wiadomości e-mail w Poczcie systemu Windows 10

Obsługa klienta poczty e-mail dla obrazów tła

Klient poczty e-mail	Korzystanie z wbudowanego CSS	Korzystanie z VML
Poczta Apple 14	✓	✘
Office 365 (Mac)	✓	✘
Office 365 (Windows)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013, 2016, 2019 (Windows 10)	✘	✓
Poczta systemu Windows 10	✘	✘
Aplikacja Gmail (Android 10)	✓	✘
Aplikacja Gmail (iOS 13.4.1)	✓	✘
Outlook (Android 7.0)	✓	✘
Outlook (iOS 12.0)	✓	✘
Poczta Samsung (Android 7.0)	✓	✘
iPad 11 Air (Gen 4 iOS 14.2)	✓	✘
iPhone 12 (iOS 14.2)	✓	✘
Poczta AOL (krawędź)	✓	✘
Gmail (Chrome)	✓	✘
Biuro 365	✓	✘
Outlook.com	✓	✘
Wieśniak! Poczta	✓	✘

Z jakich klientów poczty e-mail korzystają Twoi subskrybenci?

Spójrz na swój udział w rynku klientów poczty e-mail dzięki Litmus Email Analytics. Zobacz, dla których klientów poczty e-mail potrzebujesz zoptymalizować obrazy tła. (Wskazówka: jeśli poczta systemu Windows 10 jest niska, nie przejmuj się.)

Dowiedz się więcej →

Teraz, gdy mamy to na uboczu, porozmawiajmy o kodzie!

Jedną z fajnych rzeczy związanych z umieszczaniem obrazów tła w wiadomościach e-mail jest to, że można to osiągnąć na kilka różnych sposobów. Możesz wypełnić niewielką sekcję lub zakryć treść wiadomości e-mail, użyć pojedynczego obrazu lub powtarzającego się wzoru, a także przełączać obrazy tła w zależności od tego, czy czytnik jest na komputerze, urządzeniu mobilnym, trybie jasnym, trybie ciemnym, a nawet unoszą się lub przesuwają po twoim obrazie.

Każda technika wymaga innego podejścia, więc przyjrzyjmy się najlepszym sposobom ich kodowania.

Obraz tła o określonej szerokości lub stały

tło o stałej szerokości

Stosując obrazy tła, zawsze najlepiej jest dodać swój kod do komórki tabeli zawierającej. Stosowanie do dowolnego innego elementu HTML, takiego jak <table> lub <body>, prawdopodobnie nie uzyska wsparcia od niektórych klientów poczty e-mail. Oto jak to powinno wyglądać:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Tutaj obraz jest dopasowany do szerokości i wysokości komórki, dołączając background-size:cover do wbudowanych stylów CSS, a następnie umieszczany na środku. Dodanie tych stylów umożliwia użycie obrazu 2x — co oznacza, że na wyświetlaczach Retina zobaczysz wyraźny rendering — a jego rozmiar zostanie dopasowany do Twojego kontenera, nawet jeśli zmieni się rozmiar kontenera w celu renderowania na różnych urządzeniach.

Oznacza to jednak również, że jeśli obraz jest zbyt mały lub nie jest proporcjonalny do rozmiaru kontenera, może wyglądać na rozpikselowany lub rozciągnięty. Zwłaszcza jeśli to fotografia.

Czy twój obraz tła działa?

Zobacz, jak nasz kod dla obrazów tła działa we własnej poczcie e-mail w najpopularniejszych aplikacjach pocztowych, takich jak Gmail i Outlook.

Dowiedz się więcej →

Obecnie większość klientów poczty e-mail obsługuje wbudowane style CSS tła, więc możesz dodać obraz tła i kolor zastępczy za pomocą skróconej właściwości CSS tła. Innymi słowy, po prostu zastosuj je do stylu „tła”. Niestety, dalsze stylizowanie tła nie działa zbyt dobrze ze skrótami podczas kodowania inline, więc wszelkie pozycjonowanie lub zmiana rozmiaru musiałyby być napisane jako oddzielne style. Na przykład używając background-position: center; rozmiar tła: 80%; zamiast tła: środek/80%; .

Dzięki temu działa to w Outlooku z awaryjnym VML

Outlook i Office 365 dla komputerów stacjonarnych również potrzebują niewielkiej pomocy w wyświetlaniu obrazów tła, ponieważ one również nie renderują stylów tła CSS. Aby nasz obraz tła był wyświetlany w tych klientach poczty e-mail, musimy wykorzystać technikę spopularyzowaną przez Stig Morten Myre dla Campaign Monitor i zastosować język Vector Markup Language (VML) firmy Microsoft.

Biorąc kod, który już stworzyliśmy, umieszczamy wymagany VML i zawierający <div> wewnątrz naszej komórki tabeli:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

W przypadku obrazów, które muszą wypełnić kontener bez powtarzania, musimy użyć „ramki” w tagu vml:fill. W ten sposób możesz użyć zdjęć 2x w tym tagu. Upewnij się tylko, że ustawiłeś szerokość kontenera za pomocą wbudowanego stylu w tagu v:rect (w powyższym przykładzie jest ustawiony na 600px).

Jeśli chcesz uzupełnić swój kontener, coś, co możesz znaleźć, to umieszczenie VML w kontenerze, co spowoduje zwinięcie dopełnienia. Sposób, w jaki to naprawimy, polega na owinięciu VML wokół naszego kontenera, więc musimy zagnieździć nasz kontener w innej tabeli, tak jak poniżej:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Powtarzający się obraz tła

Możesz również dodać tło, które powtarza się w pojemniku, w którym je umieszczasz. Świetnym przykładem jest powtórzenie wzorca w treści wiadomości e-mail.

przykład powtarzającego się obrazu tła

Jeśli obraz, który umieścimy w komórce naszego kontenera jest mniejszy niż kontener, automatycznie powtórzy się zarówno w poziomie, jak iw pionie. Aby powtarzać tylko w jednym kierunku, stylizuj za pomocą CSS „background-repeat” i dodaj wartość repeat-x, aby powtórzyć w poziomie lub repeat-y, aby powtórzyć w pionie.

Aby wypełnić cały kontener w pełni powtarzającym się wzorem, kod jest bardzo prosty:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Dzięki temu działa to w Outlooku z awaryjnym VML

Ponownie, jeśli chcesz zobaczyć renderowanie w tle w klientach Outlooka, możesz zastosować VML. Tym razem kod jest nieco inny, z VML umieszczonym przed kontenerem:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Aby tło się powtarzało, wypełnij tag v:fill typem „kafelek”. Nic dziwnego, istnieją pewne problemy z renderowaniem w Poczcie systemu Windows 10, a przy powtarzających się tłach problemy z renderowaniem mogą być znacznie bardziej nieestetyczne. Tak więc pominięcie VML może być najbezpieczniejszym podejściem, jeśli masz subskrybentów Windows 10 Mail.

Zaawansowane techniki

Stałe i powtarzające się obrazy tła dają wiele możliwości udoskonalenia projektów wiadomości e-mail, ale to nie wszystko:

Zamiana kontrastowego obrazu

Teraz, gdy tryb ciemny jest dostępny w wielu klientach poczty e-mail — a szanowanie preferencji subskrybentów pomaga dotrzeć do szerszego grona odbiorców i budować zaufanie — zmiana obrazu tła to świetny sposób na uzupełnienie projektu trybu jasnego lub ciemnego. Jest to również zabawne i proste ulepszenie.

tryby kontrastu

Aby to zaimplementować, musisz dodać kilka osadzonych CSS do zapytań o media w trybie ciemnym. Dzięki temu obraz tła w trybie ciemnym będzie wyświetlany w klientach poczty e-mail, które obsługują ten typ zapytania o media:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Warto dodać ciemny kolor zastępczy. Pomoże to w przypadku klientów poczty e-mail, które nie będą ładować obrazów bez podjęcia działań przez czytelnika i zapewni, że wiadomość będzie mogła zostać odczytana, gdy obraz nie został załadowany.

Teraz w kodzie HTML zastosuj swoją klasę do komórki zawierającej obraz tła w trybie jasnym. Prosty!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Uwaga : coś, co jest trudne do zaprojektowania, a jeszcze trudniej zakodować, to klienty poczty e-mail, które odwracają kolory wiadomości e-mail w środowisku trybu ciemnego, całkowicie ignorując całą ciężką pracę, którą wkładasz w pisanie zapytań o media w trybie ciemnym.

Pozyskanie tych klientów poczty e-mail jest prawie niemożliwe. Możesz jednak bawić się obrazami tła, które mają poziom przezroczystości i zastosować do kontenera kolor tła o wysokim kontraście, na przykład biały dla trybu jasnego i czarny dla trybu ciemnego. Umożliwi to odwrócenie koloru tła. Spróbowałem tego z następnym przykładem:

obraz tła wiadomości e-mail w różnych scenariuszach trybu ciemnego

Mój obraz tła w jodełkę ma krycie 30% na strzałkach i jest całkowicie przezroczyste między nimi. Oznacza to, że gdy obrażające klienty poczty e-mail przejmują kontrolę nad renderowaniem w trybie ciemnym, zawartość jest czytelna.

Aby uzyskać więcej informacji na temat kodowania dla trybu ciemnego i obsługi klienta poczty e-mail, zapoznaj się z naszym Ultimate Guide to Dark Mode Email.

Interaktywne tło

Co powiesz na zachwycenie subskrybentów interaktywnością? Możesz rozpalić trochę radości za pomocą prostego efektu najechania kursorem lub najechania kursorem, zmieniając tło swojego kontenera, gdy czytelnik przesuwa kursor nad Twoją treścią.

przełącznik obrazu tła wiadomości e-mail po najechaniu myszą lub najechaniu myszą

Aby to zadziałało, potrzebujesz trochę osadzonego kodu CSS. Umieść to w swoim tagu <style>:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Teraz wszystko, co musisz zrobić, to zastosować tę klasę do komórki tabeli, na przykład:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Zwiększ poziom swoich projektów

Mnóstwo możliwości sprawia, że używanie obrazów tła do ulepszania projektów wiadomości e-mail to świetny sposób na zwiększenie koperty i wyróżnienie wiadomości e-mail w tłumie. Aby pomóc Ci zastosować te techniki w praktyce, stworzyliśmy przydatne źródło, w którym możesz pobrać kod przedstawiony w tym poście.

Chcielibyśmy zobaczyć, jak wykorzystujesz zdjęcia tła w swoich e-mailach — podziel się przykładami w komentarzach poniżej.

Upewnij się, że Twoje obrazy tła działają — z Litmus

Zadziałało? Wyświetlaj podgląd obrazów tła (i reszty wiadomości e-mail) w ponad 100 klientach poczty e-mail, aplikacjach i urządzeniach z Litmusem. I przywitaj się z markowymi, bezbłędnymi e-mailami.

Rozpocznij bezpłatny okres próbny →

Oryginalnie opublikowana 24 maja 2019 r. przez Jasona Rodrigueza. Ostatnia aktualizacja 21 lipca 2021 r.

Udostępnij, dziękuję!

Jak zrobić potężne podróże e-mailowe non-profit, które przykuwają uwagę?

Jakie są najlepsze praktyki tworzenia podróży zarządzania za pomocą e-mail marketingu? Dowiedz się, jak zacząć w 6 krokach i zobacz kilka przykładów z życia wziętych.

Czytaj więcej

20 wskaźników i wskaźników KPI w wiadomościach e-mail do mierzenia sukcesu i zachęcania do działania

Dowiedz się, jakich narzędzi marketingowych używają marketerzy zajmujący się analizą poczty e-mail, aby śledzić sukcesy, i zobacz, które z tych wskaźników i wskaźników KPI w wiadomościach e-mail należy dodać do własnych raportów dotyczących poczty e-mail.

Czytaj więcej