> For the complete documentation index, see [llms.txt](https://newpanel.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://newpanel.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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://newpanel.docs.emaillabs.io/poradniki/wyglad-i-zawartosc-e-maili/optymalizacja-obrazow-w-e-mailach.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.