Optymalizacja Obrazów w E-mailach

Obrazy i grafiki mogą znacząco podnieść atrakcyjność wizualną e-maila, ale ich nieumiejętne użycie może spowolnić ładowanie wiadomości, zaszkodzić dostępności i negatywnie wpłynąć na dostarczalność.

Wybierz Odpowiedni Format Pliku

• JPG/JPEG: Najlepszy dla zdjęć oraz obrazów o wielu kolorach i płynnych gradientach. Oferuje dobrą kompresję kosztem niewielkiej utraty jakości.

• PNG: Idealny dla grafik z przezroczystością (np. logo, ikony) oraz tam, gdzie ważna jest ostrość linii i krawędzi (np. zrzuty ekranu, diagramy). Pliki mogą być cięższe niż JPG.

• GIF: Głównie dla prostych, krótkich animacji. Unikaj tego formatu dla obrazów statycznych, jeśli JPG lub PNG oferują lepszy stosunek jakości do rozmiaru pliku.

• SVG: Format wektorowy, idealny dla prostych logo i ikon. Zapewnia perfekcyjną ostrość przy dowolnym skalowaniu i ma mały rozmiar pliku.

Uwaga: Wsparcie dla SVG w klientach poczty jest wciąż bardzo ograniczone (brak wsparcia m.in. w Gmailu i Outlooku), dlatego należy go używać ostrożnie.

Kompresuj Obrazy

Zawsze optymalizuj "wagę" (rozmiar w kilobajtach) obrazów przed umieszczeniem ich w e-mailu. Zbyt ciężkie grafiki drastycznie wydłużają czas ładowania wiadomości. Użyj narzędzi online (np. TinyPNG, Squoosh) lub programów graficznych (np. funkcja "Zapisz dla Internetu" w Adobe Photoshop), aby zmniejszyć rozmiar pliku przy minimalnej utracie jakości.

Podawaj Wymiary i Skaluj dla Ekranów Retina

• Atrybuty width i height: W tagu <img> zawsze dodawaj atrybuty width i height odpowiadające oryginalnym wymiarom obrazka. Zapobiega to "przeskakiwaniu" layoutu podczas ładowania treści.

• Obsługa Wyświetlaczy HiDPI (Retina): Aby obrazy wyglądały ostro na ekranach o wysokiej gęstości pikseli, zapisz plik graficzny w dwukrotnie większej rozdzielczości, a następnie w kodzie HTML ustaw jego wymiary na docelowe.

  • Przykład: Obraz ma być wyświetlany w rozmiarze 300x150px. Zapisz go jako plik 600x300px i umieść w kodzie: <img src="..." width="300" height="150" ... />.

• Responsywność: Aby obrazy poprawnie skalowały się na urządzeniach mobilnych, dodaj do nich styl CSS: max-width: 100%; height: auto;.

Hostuj Obrazy na Stabilnym Serwerze

Umieszczaj obrazy na swoim serwerze lub w usłudze CDN (Content Delivery Network) i linkuj do nich w atrybucie src tagu <img>. Unikaj osadzania obrazów bezpośrednio w kodzie e-maila (metodą Base64), chyba że są to bardzo małe ikonki. Osadzanie znacząco zwiększa rozmiar kodu HTML wiadomości.

Nie Zapominaj o Tekście Alternatywnym (ALT)

Każdy obrazek musi mieć opisowy atrybut alt. Jest to kluczowe dla dostępności (czytniki ekranu odczytują ten tekst) oraz w sytuacji, gdy klient poczty blokuje domyślne wyświetlanie obrazów.

Zachowaj Równowagę Między Tekstem a Obrazami

Unikaj tworzenia e-maili składających się wyłącznie z obrazków. Taka praktyka jest negatywnie oceniana przez filtry antyspamowe i całkowicie bezużyteczna dla osób korzystających z czytników ekranu lub mających wyłączone obrazki. Dobrą praktyką jest zachowanie proporcji ok. 60% tekstu do 40% grafik.

Ostrożnie z Obrazami Tła

Użycie obrazów jako tła dla sekcji (background-image) jest trudne technicznie, ponieważ wiele klientów poczty (zwłaszcza różne wersje Outlooka) nie wspiera tej funkcji. Jeśli decydujesz się na ten efekt, zawsze zdefiniuj jednolity kolor tła (background-color) jako alternatywę (tzw. fallback), który wyświetli się, gdy obraz tła nie zadziała.