Optymalizacja obrazów pod kątem szybkości strony: kompletny przewodnik

Obrazy stanowią ok. 50% wagi strony. Ich optymalizacja to najszybszy sposób na przyspieszenie serwisu.

---

Dlaczego warto optymalizować?

• 53% użytkowników mobilnych opuszcza stronę, jeśli ładuje się dłużej niż 3 sekundy (dane Google)
• Opóźnienie o 1 sekundę = 7% mniej konwersji
• Core Web Vitals (LCP, CLS) bezpośrednio wpływają na pozycje w wynikach wyszukiwania Google

---

Krok 1: właściwy format

• WebP — najlepszy wybór dla wszystkich obrazów webowych (25–35% mniejszy niż JPEG)
• PNG — zrzuty ekranu, przezroczystość, logotypy
• JPEG — zdjęcia przy braku wsparcia WebP
• SVG — ikony, logotypy
• AVIF — format nowej generacji, używaj z fallbackiem

---

Krok 2: kompresja

TinyImg — bezpłatnie, prywatnie, natychmiastowo.

---

Krok 3: obrazy responsywne

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Opis" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Opis" width="800" height="600" />
</picture>

---

Krok 4: leniwe ładowanie

<img src="image.webp" loading="lazy" alt="Opis" width="800" height="600" />

Nigdy nie stosuj leniwego ładowania do obrazów powyżej linii zgięcia. Zawsze podawaj szerokość i wysokość — zapobiega to przesunięciom layoutu (CLS).

---

Krok 5: podaj wymiary

<img src="photo.webp" alt="Zdjęcie" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Krok 6: używaj CDN

Cloudflare (bezpłatny), Cloudinary, imgix, Vercel.

---

Krok 7: mierz wyniki

• LCP: poniżej 2,5 s
• CLS: poniżej 0,1
• Łączna waga obrazów: poniżej 500 KB

Narzędzia: PageSpeed Insights, Lighthouse, WebPageTest.

---

Lista kontrolna

• Format WebP
• Kompresja przez TinyImg
• srcset + sizes
• Lazy load dla obrazów poniżej linii zgięcia
• Atrybuty width i height
• CDN
• Audyt PageSpeed

Zacznij od TinyImg.