Rozmiary obrazów w newsletterach e-mail

Utrzymuj wagę każdego obrazu w newsletterze poniżej 100 KB, dopasowuj rozmiar obrazów do dwukrotności ich szerokości wyświetlania i używaj formatów JPG lub PNG zamiast WebP. Gmail skraca każdą wiadomość, której kod Hypertext Markup Language (HTML) przekracza około 102 KB, zastępując resztę linkiem Wyświetl całą wiadomość.

Większość nadawców dowiaduje się o limicie obcinania w bolesny sposób, zazwyczaj gdy link do rezygnacji z subskrypcji i piksel śledzący lądują poniżej linii cięcia. Obrazy są częstą przyczyną – albo dlatego, że są osadzone bezpośrednio w wiadomości, albo dlatego, że otaczający je kod HTML rozrósł się w trakcie kilku kampanii.

Co tak naprawdę mierzy limit obcinania wiadomości w Gmailu

Gmail mierzy źródło HTML wiadomości, a nie obrazy, do których prowadzą linki. Newsletter zawierający linki do 10 dużych zdjęć mieści się w limicie, podczas gdy wiadomość z ciężkim stylowaniem inline i osadzonymi obrazami – nie.

To rozróżnienie jest istotne, ponieważ rozwiązanie problemu jest inne. Obrazy podlinkowane nie wliczają się do limitu 102 KB, więc obcinanie jest zazwyczaj spowodowane powtarzającymi się stylami inline, długimi parametrami śledzenia przy każdym linku lub obrazami osadzonymi jako dane base64. Usunięcie osadzonych obrazów i odchudzenie kodu HTML rozwiązuje problem obcinania, podczas gdy kompresja podlinkowanych zdjęć skraca czas ładowania.

Zalecane rozmiary obrazów w wiadomościach e-mail

Zaprojektuj układ wiadomości e-mail o szerokości 600 pikseli i eksportuj obrazy w rozmiarze 1200 pikseli dla ekranów o wysokiej gęstości (Retina). Standard 600 pikseli utrzymuje się od lat, ponieważ pasuje do każdego panelu podglądu w programach pocztowych na komputerach bez konieczności przewijania w poziomie.

Podwojenie szerokości eksportu wystarcza dla wyświetlaczy o wysokiej gęstości. Eksportowanie w szerokości 3-krotnie większej niż szerokość wyświetlania dodaje wagi, której żaden program pocztowy nie wyrenderuje lepiej, a e-mail to jedyny kanał, w którym każdy kilobajt jest pobierany na telefonie użytkownika.

Dlaczego WebP to wciąż zły wybór w e-mailach

Wsparcie dla formatu WebP w programach pocztowych pozostaje nierówne, a Outlook w szczególności bywa nieprzewidywalny. E-mail to jedno z niewielu miejsc, w których stare, bezpieczne formaty są najlepszym wyborem.

Przeglądarki internetowe obsługują WebP, co prowadzi do błędnego założenia, że programy pocztowe również to robią. Desktopowa wersja programu Outlook renderuje wiadomości przy użyciu zupełnie innego silnika, a niektóre korporacyjne systemy pocztowe usuwają lub nie radzą sobie z formatami, których nie rozpoznają. Uszkodzony obraz w newsletterze jest znacznie bardziej kosztowny niż 30-procentowa oszczędność na rozmiarze pliku, którą przyniósłby format WebP, dlatego JPG i PNG pozostają tutaj właściwym wyborem.

Wybór formatu wewnątrz wiadomości e-mail

Używaj formatu JPG do zdjęć oraz PNG do logo, przycisków i wszystkiego, co zawiera tekst. Zasada jest taka sama jak w przypadku stron internetowych, a konsekwencje są bardziej widoczne, ponieważ obrazy w e-mailach są często małe.

• JPG do zdjęć produktów, obrazów w nagłówkach i wszelkich zdjęć przedstawiających rzeczywiste sceny.
• PNG do logo, ikon i grafik z jednolitymi kolorami lub ostrymi krawędziami tekstu.
• Animowany GIF tylko wtedy, gdy animacja niesie ze sobą istotną treść, i o wadze poniżej 1 MB.
• Unikaj formatów WebP i AVIF, ponieważ żaden z nich nie renderuje się niezawodnie we wszystkich programach pocztowych.
• Unikaj całkowicie formatu SVG, ponieważ większość programów pocztowych blokuje go ze względów bezpieczeństwa.

Obrazy są domyślnie blokowane w wielu programach pocztowych

Wielu odbiorców widzi Twój e-mail z wyłączonymi obrazami, więc wiadomość musi być czytelna również jako sam tekst. Korporacyjne systemy pocztowe oraz użytkownicy dbający o prywatność blokują pobieranie zewnętrznych obrazów, dopóki czytelnik nie zdecyduje się ich załadować.

Dodawaj tekst alternatywny (alt) do każdego obrazu, ponieważ zablokowane obrazy wyświetlają ten tekst w swoim miejscu. Nigdy nie umieszczaj kluczowych informacji, w tym oferty, terminu ważności czy wezwania do działania (CTA), wyłącznie na obrazie. Newsletter zbudowany w całości z jednej dużej grafiki staje się pustym prostokątem dla znacznej części listy odbiorców, a ponadto jest nieprzyjazny dla czytników ekranu.

Jak przygotować obrazy do newslettera

Aby newsletter ładował się szybko i był czytelny, wykonaj poniższe 7 kroków.

1. Zaprojektuj e-mail o szerokości 600 pikseli, którą każdy program pocztowy na komputerze wyrenderuje bez konieczności przewijania.
2. Przytnij każdy obraz do dokładnego kształtu, jaki zajmie w układzie wiadomości.
3. Zmień rozmiar do dwukrotności szerokości wyświetlania i nie więcej.
4. Konwertuj do formatu JPG w przypadku zdjęć lub PNG w przypadku grafik zawierających tekst.
5. Skompresuj każdy plik do rozmiaru poniżej 100 KB.
6. Hostuj obrazy na swojej platformie wysyłkowej lub własnym serwerze, zamiast osadzać je bezpośrednio w wiadomości.
7. Wyślij test do Gmaila, Outlooka oraz na telefon przed zaplanowaniem wysyłki kampanii.

Całkowita waga wiadomości e-mail ma większe znaczenie niż pojedynczy obraz

Utrzymuj wagę całej wiadomości poniżej 600 KB wraz z obrazami, ponieważ subskrybenci otwierają newslettery na telefonach, często przy słabym połączeniu. Newsletter o wadze 5 MB ładuje się powoli i może zostać zamknięty, zanim w ogóle się wyrenderuje.

Policz obrazy przed rozpoczęciem kompresji. Newsletter zawierający 12 zdjęć po 100 KB każde waży już 1.2 MB, co sugeruje, że układ wymaga raczej mniejszej liczby obrazów niż ich mocniejszego zmniejszania. Ograniczenie liczby obrazów zazwyczaj poprawia zarówno wydajność, jak i czytelność, ponieważ długie, przeładowane grafiką newslettery rzadko są czytane do końca.

Tryb ciemny zmienia wygląd obrazów

Niektóre programy pocztowe odwracają lub dostosowują kolory w trybie ciemnym, przez co logo na białym tle staje się jaskrawym prostokątem w ciemnej wiadomości. Przetestuj każdą kampanię w trybie ciemnym przed wysyłką.

Używaj plików PNG z przezroczystym tłem dla logo i ikon, aby wyglądały poprawnie na każdym tle. Unikaj obrazów z białym tłem, jeśli projekt zakłada, że strona pod nimi również będzie biała. Zdjęcia są zazwyczaj bezpieczne, ponieważ programy pocztowe rzadko modyfikują zawartość fotograficzną, natomiast problemy z trybem ciemnym pojawiają się przy prostych grafikach i obrazach zawierających tekst.

Ekrany Retina a ostrość obrazu

Eksportuj obrazy w dwukrotnej szerokości wyświetlania, aby zachować ich ostrość na ekranach o wysokiej gęstości, a następnie skompresuj je mocniej, aby zrównoważyć dodatkowe piksele. Obraz o szerokości 1200 pikseli przy jakości 70 zazwyczaj wygląda lepiej i waży mniej niż obraz o szerokości 600 pikseli przy jakości 95.

Ustaw atrybut szerokości (width) w kodzie HTML na rozmiar wyświetlania, a nie rozmiar pliku, aby program pocztowy wyrenderował obraz w rozmiarze 600 pikseli, korzystając jednocześnie z dodatkowych szczegółów. Pominięcie atrybutu szerokości powoduje, że niektóre programy wyświetlają obraz w jego pełnym rozmiarze pikselowym, co niszczy układ wiadomości na komputerach.

Sprawdzanie kampanii przed wysyłką

• Wyślij test do Gmaila, Outlooka, Apple Mail i na co najmniej jeden telefon.
• Wyświetl wiadomość testową z zablokowanymi obrazami, upewniając się, że treść nadal ma sens.
• Upewnij się, że wiadomość nie jest obcięta w Gmailu, co objawia się linkiem Wyświetl całą wiadomość na dole.
• Potwierdź, że każdy obraz ma tekst alternatywny opisujący to, co przedstawia.
• Sprawdź renderowanie w trybie ciemnym, szczególnie w przypadku logo i prostych grafik.
• Zsumuj wagę wszystkich obrazów i upewnij się, że nie przekracza ona 600 KB.

Przygotowanie kampanii w jednej partii

Przetwarzaj wszystkie obrazy do newslettera razem, aby cała kampania miała spójne parametry. Newsletter zazwyczaj zawiera od 5 do 15 obrazów, a nadawca wysyłający wiadomości co tydzień przygotowuje ich setki w ciągu roku.

Ustaw raz szerokość i docelowy rozmiar w KB, przeciągnij obrazy, a każdy plik zostanie odpowiednio dopasowany. Wszystko odbywa się w Twojej przeglądarce, na Twoim własnym procesorze, więc nieogłoszone jeszcze oferty, listy subskrybentów wyrenderowane jako obrazy czy materiały z kampanii klientów nigdy nie trafiają na zewnętrzny serwer. Dla agencji przygotowującej premierę zachowanie tych plików lokalnie pozwala uniknąć wycieku danych, którego nie usprawiedliwiłaby żadna oszczędność na kompresji.

Przechowuj folder szablonów z poprawnie zwymiarowanymi obrazami zastępczymi (placeholders) dla każdego powtarzającego się bloku układu, takiego jak nagłówek, dwukolumnowy wiersz produktów czy logo w stopce. Nadawcy wysyłający cotygodniowe wiadomości używają tych samych 4 lub 5 kształtów bez końca, a dopasowanie nowych grafik do istniejącej specyfikacji zajmuje mniej czasu niż ponowne decydowanie o wymiarach przy każdej kampanii.