> For the complete documentation index, see [llms.txt](https://docs.emaillabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.emaillabs.io/poradniki/wyglad-i-zawartosc-e-maili/optymalizacja-obrazow-w-e-mailach.md).

# 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. 

{% hint style="info" %}
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.
{% endhint %}

### **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](https://www.google.com/search?q=link-do-artykulu-o-dostepnosci) (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.