Obrazki w mailu: tekst alternatywny, rozmiar plików i pułapka maila z samych grafik

Klient otwiera Twój newsletter. I nic nie widzi. W dziewięciu przypadkach na dziesięć to dlatego, że jego program pocztowy jeszcze nie wczytał obrazków, a mail zbudowany jako jedna wielka grafika nie ma nic w zapasie. Sporo aplikacji wstrzymuje obrazki w mailu, dopóki czytelnik się na nie nie zgodzi. Jeśli więc grafik przygotuje cały newsletter jako jeden obrazek, ci czytelnicy dostaną pustą wiadomość. Poniżej wyjaśniam, jak działa blokowanie obrazków, jak pisać tekst alternatywny, jak odchudzać pliki, jak dobrać rozmiar obrazków pod telefony i ekrany retina oraz jak wszystko przetestować przed wysyłką.

Dlaczego niektórzy klienci widzą pustego maila?

Część programów pocztowych i firmowych konfiguracji domyślnie ukrywa obrazki albo blokuje wczytywanie grafik z zewnętrznych serwerów. Efekt? Mail złożony z samych obrazków wygląda na pusty. To normalne zachowanie, a nie błąd w Twojej wiadomości. Swoje robią ustawienia prywatności, polityki bezpieczeństwa i domyślne ustawienia programów. Czytelnik może zobaczyć pustą ramkę, ikonę uszkodzonego obrazka albo Twój tekst alternatywny (jeśli w ogóle go dodałeś). Do tego każdy program pokazuje to inaczej i w innym momencie. Podgląd w jednej aplikacji nic nie mówi o pozostałych.

Pułapka maila z samych grafik: dlaczego jedna duża grafika to ryzyko

Jeśli ofertę, ceny i przycisk umieścisz na obrazku, a obrazek się nie wczyta, nic z tego nie dotrze do klienta. Tak po prostu. Filtry antyspamowe i programy pocztowe oceniają treść każdy po swojemu, a mail bez żywego tekstu daje im prawie nic do analizy. Tekstu wtopionego w obrazek nie da się też zaznaczyć, wyszukać, przetłumaczyć ani odczytać czytnikiem ekranu. A na telefonie? Ludzie muszą rozciągać i przybliżać ekran, żeby odczytać drobny druk ściśnięty w szerokiej grafice. Nikt tego nie lubi.

Odwróć to. Nagłówki, ceny i wezwania do działania zostaw jako żywy tekst HTML, a obrazki niech wspierają przekaz, zamiast go dźwigać. Wtedy mail ma sens nawet z ukrytymi grafikami. A kiedy się wczytają, po prostu wygląda lepiej.

Jak pisać tekst alternatywny obrazków w mailu, który nadal sprzedaje

Tekst alternatywny to krótki opis, który program pocztowy pokazuje, gdy obrazek się nie wczyta (czytniki ekranu też go odczytują na głos). Traktuj go jak zapasową wersję tego, co mówi obrazek. Kilka zasad, których się trzymam:

• Opisz, co obrazek przekazuje albo do czego służy, na przykład ofertę, a nie nazwę pliku typu „banner1.jpg”.
• Pisz krótko. Jedna fraza, nie akapit.
• Zostaw pusty alt przy elementach czysto dekoracyjnych, takich jak odstępy i separatory.
• Przy obrazkach z linkiem opisz, dokąd prowadzi link.

Zdjęcie produktu z altem „but”? Słabo. „Męski brązowy skórzany but trekkingowy” faktycznie mówi czytelnikowi, co go omija. Tak samo z banerem wyprzedaży: „baner wyprzedaży” nic nie mówi, ale „Jesienna wyprzedaż: 20% rabatu na wszystkie kurtki do niedzieli” sprzedaje nawet przy ukrytym obrazku (oczywiście wstaw swoją prawdziwą ofertę). Warto też sprawdzić dostępność przed wysyłką, żeby takie braki wyłapać wcześnie, a nie dopiero w czyjejś skrzynce.

Rozmiar obrazków w mailu: jak utrzymać lekkie pliki

Mniejsze pliki szybciej wczytują się na danych komórkowych i odchudzają cały mail, a niektóre programy i filtry lepiej sobie z takim radzą. Czy jest jeden oficjalny limit rozmiaru? Nie. Każdy program i filtr ustala własne progi, więc cel to pliki jak najlżejsze, ale bez widocznej utraty jakości:

1. Eksportuj obrazki w rozmiarze, w jakim faktycznie będą wyświetlane.
2. Wybierz właściwy format: JPG do zdjęć, PNG do płaskich grafik i przezroczystości, GIF tylko do prostych animacji.
3. Kompresuj każdy plik narzędziem do grafiki przed wgraniem.
4. Nie upychaj w jednym mailu wielu ciężkich obrazków.

Kompresja odbywa się przed wgraniem, w programie grafika albo w narzędziu, którego używa właściciel sklepu. Niech więc będzie częścią przekazania materiałów. Po prostu o nią poproś.

Szerokość na telefonach i obrazki retina w mailu

Ustaw obrazki tak, żeby zmniejszały się do szerokości ekranu, i eksportuj je mniej więcej w dwukrotności rozmiaru wyświetlania, żeby na ekranach o dużej gęstości pikseli pozostały ostre. Retina i podobne wyświetlacze mieszczą więcej pikseli na tej samej powierzchni, dlatego obrazek wyeksportowany w zwykłym rozmiarze może wyglądać tam na miękki albo rozmyty. Haczyk? Waga. Obrazek w podwójnym rozmiarze jest ostrzejszy, ale cięższy, a to prowadzi prosto z powrotem do kompresji.

Ustaw szerokość w HTML albo w kreatorze, żeby obrazek nigdy nie wychodził poza krawędź ekranu telefonu. I nie umieszczaj ważnego tekstu na obrazkach, które się zmniejszają, bo drobny druk szybko staje się nieczytelny. Więcej o układzie znajdziesz w naszym poradniku o projektowaniu responsywnych maili.

Przetestuj z wyłączonymi obrazkami, zanim klikniesz wyślij

Przed każdą kampanią obejrzyj podgląd maila z wyłączonymi obrazkami i na kilku różnych urządzeniach. Tak właśnie zobaczy go część Twoich klientów, więc lepiej, żebyś zobaczył to pierwszy. Krótka lista kontrolna:

• Czy wiadomość ma sens zupełnie bez obrazków?
• Czy wezwanie do działania to żywy przycisk albo link tekstowy?
• Czy w miejscu obrazków pojawia się tekst alternatywny?
• Czy da się przeczytać tekst na telefonie bez przybliżania?

Wyrób sobie też nawyk przygotowywania wersji tekstowej maila dla programów i czytelników, którzy wolą taką formę. W MailCraft wgrywasz obrazki bezpośrednio w kreatorze drag and drop i sprawdzasz podgląd na różnych urządzeniach przed wysyłką. A wersję w czystym tekście MailCraft tworzy za Ciebie automatycznie, więc to jedna rzecz mniej do pamiętania.

Podsumowując: obrazki w mailu sprawdzają się najlepiej jako dodatek do wiadomości, która już jako tekst ma sens. Kiedy przygotowujesz brief dla grafika, poproś o trzy rzeczy. Żywy tekst w nagłówkach, cenach i przyciskach. Przydatny tekst alternatywny przy każdym istotnym obrazku. Lekkie pliki wyeksportowane w odpowiednim rozmiarze. Zrób to, a żaden klient nie będzie wpatrywał się w pusty ekran, niezależnie od swoich ustawień.

FAQ