grafika nagłówkowa

Grafika nagłówkowa to obraz umieszczany na początku wiadomości, budujący rozpoznawalność marki nadawcy.

Grafika nagłówkowa jako element wiadomości elektronicznej

Grafika nagłówkowa to obraz umieszczony na początku wiadomości e-mail, newslettera, komunikatu wyświetlanego w aplikacji albo strony internetowej. Jej położenie odróżnia ją od ikony nadawcy, zdjęcia profilowego i obrazów umieszczanych w treści między akapitami. W praktyce może zawierać logo, nazwę firmy, ilustrację produktu, fotografię urządzenia lub krótki komunikat zapisany jako część obrazu. Po otwarciu wiadomości klient pocztowy pobiera grafikę z treści HTML albo wyświetla jej kopię zapisaną lokalnie w wiadomości.

Wiadomość z grafiką nagłówkową jest zwykle dokumentem HTML, w którym obraz wskazuje element <img>. Plik może być dołączony bezpośrednio do wiadomości i odwoływać się do niego przez identyfikator CID albo znajdować się na serwerze i być pobierany za pomocą adresu HTTPS. Drugi wariant pozwala zmieniać obraz bez ponownego wysyłania wiadomości, ale wymaga dostępu do zewnętrznego zasobu. Część programów pocztowych domyślnie blokuje obrazy z internetu do czasu zgody odbiorcy, dlatego tekstowy opis grafiki powinien być przekazany w atrybucie alt.

Format pliku, rozmiar i sposób wyświetlania

Dobór formatu powinien wynikać z zawartości obrazu. JPEG stosuje kompresję stratną i dobrze nadaje się do fotografii oraz grafik z płynnymi przejściami tonalnymi. PNG zachowuje bezstratną jakość i obsługuje przezroczystość, dlatego pasuje do logotypów, prostych ilustracji i obrazów z ostrymi krawędziami. GIF jest ograniczony do 256 kolorów w pojedynczej klatce, ale może przechowywać prostą animację. WebP i AVIF potrafią zmniejszyć rozmiar pliku przy zachowaniu dobrej jakości, jednak ich poprawne wyświetlenie zależy od używanego programu pocztowego i sposobu osadzania wiadomości.

Wymiary grafiki należy określać w pikselach, a nie wyłącznie w jednostkach używanych do druku, takich jak centymetry czy DPI. W wiadomości responsywnej obraz może mieć na przykład szerokość ograniczoną do 100 procent szerokości kontenera, aby nie wychodził poza ekran telefonu. Atrybuty width i height pomagają klientowi zarezerwować miejsce przed zakończeniem pobierania pliku, natomiast arkusze CSS mogą dodatkowo ustalać skalowanie. Zbyt szeroki obraz powoduje przewijanie poziome, a zbyt duży plik wydłuża ładowanie i zwiększa zużycie transferu. Ważne elementy, takie jak logo lub napis, powinny znajdować się z dala od krawędzi, ponieważ niektóre szablony przycinają obraz w zależności od szerokości okna.

Czytelność, dostępność i zachowanie klienta pocztowego

Grafika nagłówkowa nie powinna być jedynym nośnikiem informacji. Jeżeli na obrazie znajduje się istotny komunikat, jego treść należy powtórzyć w zwykłym tekście wiadomości. Dzięki temu odbiorca zobaczy informację także wtedy, gdy obrazy są zablokowane, a osoba korzystająca z czytnika ekranu otrzyma sensowny opis. Atrybut alt powinien krótko opisywać funkcję obrazu, na przykład „Logo serwisu naprawy laptopów”, a nie zawierać przypadkowego ciągu znaków będącego nazwą pliku.

Kontrast tekstu i tła powinien umożliwiać odczytanie napisu również na ekranie o małej jasności. Tekst zapisany w obrazie nie skaluje się tak elastycznie jak tekst HTML, może być nieczytelny po pomniejszeniu i nie jest łatwy do zaznaczenia ani przetłumaczenia. Animowana grafika GIF może zwiększać rozmiar wiadomości i odwracać uwagę, a w części klientów pocztowych zostanie pokazana tylko jej pierwsza klatka. Należy także sprawdzić, czy grafika nie zawiera nieaktualnego adresu, numeru telefonu albo informacji zależnej od daty, ponieważ obraz zapisany w wysłanej wiadomości nie zmieni się po późniejszej aktualizacji strony.

Kontrola grafiki na laptopie i komputerze stacjonarnym

Problemy z wyświetlaniem grafiki nagłówkowej mogą wynikać z programu pocztowego, blokady zewnętrznych obrazów, nieprawidłowego adresu zasobu, uszkodzonego załącznika albo błędów w kodzie HTML. Podczas sprawdzania warto otworzyć tę samą wiadomość w kilku klientach pocztowych oraz w przeglądarce internetowej, porównać widok na ekranie laptopa i telefonu, a także zweryfikować, czy plik rzeczywiście istnieje pod wskazanym adresem. Narzędzia deweloperskie przeglądarki pozwalają sprawdzić status żądania HTTP, typ MIME, rozmiar pobranego pliku i reguły CSS wpływające na jego szerokość.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC oraz podzespołów, dlatego może sprawdzić również lokalne przyczyny problemów z wyświetlaniem obrazów, takie jak błędne ustawienia przeglądarki, uszkodzony profil programu pocztowego, brak aktualizacji lub problemy z połączeniem sieciowym. Sama usterka grafiki nie zawsze oznacza awarię ekranu albo karty graficznej; jeżeli obraz jest widoczny w innych aplikacjach, a nie pojawia się tylko w wiadomości, pierwszeństwo ma diagnostyka treści HTML, blokad pobierania i konfiguracji klienta pocztowego.