Obsługa obrazów w klientach poczty

Wiele klientów domyślnie blokuje obrazy, dopóki użytkownik nie kliknie opcji „pokaż obrazy”. Outlook, Gmail (w przypadku nieznanych nadawców) oraz większość klientów mobilnych korzystających z połączenia taryfowego wyświetla zamiast tego symbol zastępczy. Należy projektować wiadomości z założeniem, że obrazy mogą się nie pojawić.

Nigdy nie umieszczaj kluczowej treści (nagłówków, etykiet CTA, cen) w obrazach. Należy używać tekstu HTML stylizowanego za pomocą CSS inline, aby wiadomość była zrozumiała także po zablokowaniu obrazów, czytniki ekranu mogły ją odczytać, a odwracanie kolorów w trybie ciemnym działało prawidłowo.

Każdy element <img> wymaga opisowego atrybutu alt. Po zablokowaniu obrazów tekst alternatywny pojawia się w polu symbolu zastępczego — dobrze napisany tekst alt wypełnia pustkę wizualną komunikatem, który miał zostać przekazany przez obraz.

Bez jawnych wymiarów symbol zastępczy się zapada, a układ przesuwa się po załadowaniu obrazu. Należy ustawić oba atrybuty oraz odpowiadający im styl inline, aby komórka rezerwowała miejsce niezależnie od tego, czy obraz ostatecznie się pojawi.

Outlook wstawia niewielką przerwę pod obrazami inline. Należy zastosować style="display:block" na każdym elemencie <img>, aby usunąć tę przerwę i zapewnić spójny rytm pionowy we wszystkich klientach.

Starsze klienty dodają niebieskie obramowanie wokół elementu <a><img></a>. Należy ustawić border="0" w atrybucie obrazu oraz zastosować inline style="border:0", aby obrazy opakowane w odnośniki poprawnie wyświetlały się w wezwaniach do działania.

Klienty pocztowe nie mają pojęcia o „tej stronie”. Każdy atrybut src obrazu musi zawierać absolutny adres URL https:// wskazujący publicznie dostępny CDN. Ścieżki lokalne, względne oraz adresy http:// (zawartość mieszana) po cichu nie ładują się.

Należy używać szybkiego hosta obrazów rozmieszczonego geograficznie w wielu lokalizacjach. Niektóre klienty pobierają obrazy za pośrednictwem serwerów proxy (Gmail), które dodają własną warstwę buforowania. CDN-y pierwszej strony zapobiegają obciążaniu powolnego serwera źródłowego i zapewniają spójne ładowanie obrazów w różnych regionach.

W przypadku teł sekcji hero należy połączyć CSS-owe background-image z bgcolor odpowiadającym dominującemu odcieniowi. Jeśli obraz zostanie zablokowany, komórka nadal wyświetli odpowiedni kolor, a tekst umieszczony na bgcolor pozostanie czytelny — uniknie się w ten sposób katastrofy w postaci białego tekstu na białym tle.

Obrazy należy renderować w rozmiarze 2x i zmniejszać za pomocą atrybutu width, aby wyglądały ostro na wyświetlaczach o wysokiej gęstości pikseli: źródło 600x600 wyświetlone z width="300" height="300" będzie wyraźne na ekranie Retina. Wiąże się to z większym zużyciem przepustowości, dlatego rozmiary plików powinny pozostać małe dzięki kompresji o jakości porównywalnej z WebP.

Animowane pliki GIF działają w większości klientów z wyjątkiem Outlooka, który wyświetla tylko pierwszą klatkę. Należy zaprojektować pierwszą klatkę tak, aby miała sens jako obraz statyczny — nagłówek, CTA lub najważniejsza korzyść muszą być czytelne nawet bez pozostałej części animacji.

Obrazy należy traktować jako ulepszenie, a nie jako treść wiadomości. Używaj absolutnych adresów https, ustawiaj width/height/display:block/border:0, pisz znaczący tekst alt, hostuj obrazy na szybkim CDN, łącz tła z awaryjnymi wartościami bgcolor, projektuj obrazy w rozmiarze 2x dla ekranów Retina i pamiętaj, że Outlook zatrzymuje animowane pliki GIF na pierwszej klatce.