Zdjęcia i grafiki w newsletterze: praktyczny poradnik

Określ rolę każdego obrazu

Zdjęcie produktu może pokazać nowy artykuł. Fotografia wydarzenia pomaga wyobrazić sobie miejsce lub zajęcia. Schemat może wyjaśnić zmianę czytelniej niż akapit tekstu. Wybierz obraz, który pomaga czytelnikowi zrozumieć treść tej konkretnej wiadomości.

Zastanów się, co zniknęłoby wraz z obrazem. Jeśli to tylko dekoracja, mniejszy obraz lub jego brak może zostawić więcej miejsca na treść. Jeśli fotografia pokazuje ważny szczegół produktu, wybierz ujęcie, w którym ten szczegół widać również na telefonie.

Ten poradnik dotyczy obrazów wyświetlanych w treści newslettera. Dla zdjęć wysyłanych jako załączniki do pobrania przygotowaliśmy poradnik kompresowania obrazów do e-maila.

Zapisz najważniejsze informacje także poza obrazem

Wpisz nagłówek, istotne dane i główny link jako tekst w edytorze newslettera, na przykład w Moosend. Przy promocji podaj rabat, warunki i datę zakończenia; przy wydarzeniu datę, miejsce i link do rezerwacji. Grafika promocyjna może uzupełniać te informacje, ale nie powinna być jedynym miejscem, w którym się pojawiają.

Dobierz tekst alternatywny do roli obrazu:

• Zdjęcie przekazujące przydatne informacje: opisz szczegół potrzebny czytelnikowi, na przykład widoczny kształt lub cechę produktu.
• Obraz czysto dekoracyjny: pozostaw tekst alternatywny pusty, jeśli obraz nie wnosi informacji i nie jest linkiem. Poradnik W3C o obrazach dekoracyjnych wyjaśnia, dlaczego zbędne opisy mogą rozpraszać osoby korzystające z czytnika ekranu.
• Obraz będący jedyną zawartością linku: podaj cel lub działanie, na przykład „Zobacz niebieski kubek”, zamiast opisywać tylko wygląd. Zobacz poradnik W3C o obrazach funkcyjnych.

Tekst alternatywny nie zastępuje głównej treści e-maila: niektóre aplikacje nie wyświetlają go w każdej sytuacji. Mailchimp opisuje te ograniczenia. Więcej przykładów znajdziesz w naszym poradniku tekstów alternatywnych.

Dostosuj obraz do szablonu e-maila

Zacznij od wymiarów zalecanych dla bloku obrazu w szablonie. Fotografia na całą szerokość kolumny i mała karta produktu wymagają innych plików. Przytnij kopię do dostępnego miejsca, nie rozciągając obiektu. W razie potrzeby użyj narzędzia do przycinania.

Odróżnij szerokość wyświetlaną w e-mailu od wymiarów pliku w pikselach. Jeśli zdjęcie jest wyświetlane na szerokości 600 pikseli, możesz porównać pliki szerokie na 600 i 1200 pikseli, pokazując oba na szerokości 600. Szerszy plik zawiera więcej pikseli przydatnych na ekranie o wysokiej rozdzielczości; nie powinien poszerzać wiadomości. Wymaga też odpowiednio dużego oryginału i może zwiększać ilość pobieranych danych. To przykładowe wymiary: stosuj zalecenia szablonu i porównuj otrzymane wiadomości. Zalecenia Mailchimp różnią się zależnie od szablonu i bloku treści.

Sprawdź, czy usługa newsletterowa przyjmuje plik. Następnie otwórz otrzymaną wiadomość w testowanych aplikacjach i sprawdź, czy obraz się wyświetla. Udane przesłanie pliku nie dowodzi, że obraz będzie poprawnie wyświetlany u odbiorców. JPEG to praktyczny punkt wyjścia dla zdjęć, a PNG przydaje się do przezroczystości i grafik. Mailchimp zaleca JPG, PNG lub GIF w swoim poradniku obrazów w szablonach. Sprawdź własną usługę, zanim ponownie użyjesz pliku wyeksportowanego na stronę internetową.

Jeśli używasz animowanego GIF-a, jego pierwsza klatka powinna być zrozumiała także bez animacji. Niektórzy odbiorcy mogą zobaczyć tylko ją; poradnik Microsoft o animacjach wyjaśnia, jak ustawienia animacji mogą to powodować w Outlooku. Nie umieszczaj niezbędnego kroku lub oferty wyłącznie w późniejszych klatkach.

Oceń łączny rozmiar plików, a nie tylko szczegóły obrazów. Kilka dużych grafik może spowalniać ładowanie e-maila. Nasz poradnik zmniejszania rozmiaru plików wyjaśnia przygotowanie mniejszych kopii.

Przykład: przedstaw nowy produkt

Wyobraź sobie sklep z artykułami do domu, który przedstawia nowy niebieski kubek ceramiczny. Poniższe wersje wykorzystują to samo zdjęcie produktu:

W drugiej wersji przytnij zdjęcie tak, aby kubek i ucho pozostały widoczne na telefonie. Jeśli zdjęcie jest osobnym linkiem do produktu, dodaj odpowiedni tekst alternatywny i sprawdź jego cel oprócz celu linku tekstowego.

Testuj e-mail tak, jak widzi go odbiorca

Podgląd edytora pomaga ułożyć treść, ale aplikacje pocztowe mogą wyświetlać tę samą wiadomość inaczej. Wyślij test przez usługę newsletterową i otwórz otrzymany e-mail na komputerze i telefonie. Jeśli to możliwe, uwzględnij aplikacje używane przez odbiorców, takie jak Gmail, Outlook lub Apple Mail. Poradnik Mailchimp o podglądach i testach wyjaśnia, dlaczego potrzebne są oba sposoby sprawdzania.

• Sprawdź główny obiekt i kadr. Czy twarze, produkty i ważne szczegóły widać bez rozciągania lub poszerzania układu?
• Obejrzyj obraz w wyświetlanym rozmiarze. Czy da się zrozumieć zdjęcie bez powiększania? Dodaj potrzebne oznaczenia i wyjaśnienia schematów również do tekstu e-maila.
• Wypróbuj jasny i ciemny tryb, jeśli są dostępne. Ciemne logo z przezroczystym tłem może być słabo widoczne na ciemnym podłożu. Wypróbuj wersję z kontrastowym obrysem lub odpowiednim jednolitym tłem zapisanym w obrazie i sprawdź oba tryby. Poradnik Mailchimp o ciemnym trybie omawia kontrast logo i różnice między aplikacjami.
• Obejrzyj wiadomość z zablokowanymi obrazami, jeśli aplikacja na to pozwala. Przeczytaj pozostałą treść, sprawdź teksty alternatywne i upewnij się, że główny link jest dostępny.
• Otwórz linki. Sprawdź osobno obrazy z linkami i przyciski: mogą prowadzić do różnych miejsc.

Jeśli obraz się nie wyświetla, ustal przyczynę

Wykonaj poniższe kontrole w podanej kolejności. Klasyczny Outlook może blokować obrazy zewnętrzne, co opisuje poradnik Microsoft o pobieraniu obrazów. Gmail może ukrywać obrazy w wiadomościach uznanych za podejrzane; zobacz ustawienia obrazów w Gmailu.

1. Sprawdź ładowanie obrazów w otrzymanym teście. Jeśli aplikacja proponuje pokazanie lub pobranie obrazów, zezwól na to dla własnej wiadomości testowej. Jeśli się pojawią, blokowała je aplikacja. Kompresja nie omija tego ustawienia.
2. Znajdź problematyczny obraz w edytorze newslettera. Otwórz jego blok i upewnij się, że wybrano właściwy plik z biblioteki. Jeśli pliku brakuje, prześlij ponownie zachowaną kopię i wybierz nowy plik. Przy obrazie przechowywanym poza usługą sprawdź adres użyty w bloku.
3. Sprawdź dostęp do pliku zewnętrznego. Otwórz bezpośredni adres obrazu w prywatnym oknie przeglądarki bez logowania. Ekran logowania ani strona udostępniania nie są plikiem obrazu. Użyj zamiast tego biblioteki usługi lub odpowiedniego publicznego adresu obrazu. Powodzenie tej próby potwierdza jedynie dostęp przez przeglądarkę bez logowania, a nie wyświetlanie w każdej aplikacji pocztowej.
4. Zbadaj różnice między aplikacjami. Jeśli plik jest dostępny, lecz nie pojawia się w jednej aplikacji, najpierw sprawdź w niej ustawienia ładowania obrazów. Następnie porównaj format z zaleceniami usługi. Wypróbuj kopię JPEG dla zdjęcia lub PNG, gdy potrzebna jest przezroczystość, i wstaw ją przez zwykły blok obrazu. Jeśli własny szablon nadal nie działa, poproś jego opiekuna o sprawdzenie kodu HTML obrazu.
5. Wyślij nowy test po poprawce. Otwórz go w aplikacji, w której wystąpił problem. Sprawdź obraz, aktualny tekst alternatywny oraz link obrazu i osobny link tekstowy, jeśli występują.

Poradnik Mailchimp o rozwiązywaniu problemów opisuje błędne adresy obrazów, ograniczony dostęp i problemy z wyświetlaniem. Wybieraj i zastępuj pliki w bibliotece zgodnie z instrukcjami własnej usługi.

Ostatnia kontrola przed wysyłką

• Kadr, szczegóły i rozmiar pliku pasują do szablonu.
• Główny przekaz jest zrozumiały, a link działa także bez obrazów.
• Tekst alternatywny odpowiada roli każdego obrazu.
• Pierwsza klatka ewentualnego GIF-a działa samodzielnie, a logo pozostaje widoczne w jasnym i ciemnym trybie.
• Ostateczna wiadomość testowa została sprawdzona w odpowiednich aplikacjach, również pod kątem źródeł obrazów i celów linków.