Dlaczego to ważne
Google bierze pod uwagę Core Web Vitals w ocenie jakości strony. Largest Contentful Paint (LCP) — często główne zdjęcie — powinien załadować się w ciągu 2,5 sekundy, a Cumulative Layout Shift (CLS) nie powinien przekraczać 0,1. Ciężkie zdjęcia bez określonych wymiarów szkodzą obu wskaźnikom, zwłaszcza na telefonach.
Schemat w 4 krokach
- Zmniejsz do rozmiaru wyświetlania. Zdjęcie pokazywane w szerokości 800 px nie potrzebuje 4000 px. Użyj Zmień rozmiar zdjęcia — ok. 2× szerokość wyświetlania wystarczy dla ekranów o dużej gęstości.
- Wybierz nowoczesny format. Zamień zdjęcia na WebP (albo AVIF), a PNG zostaw tylko dla grafik wymagających jakości bezstratnej.
- Skompresuj. W Kompresji zdjęć jakość 70–80% jest zwykle niezauważalna dla odwiedzających.
- Nadaj plikom opisowe nazwy przed wgraniem (zobacz SEO zdjęć).
Wskazówki HTML
- Zawsze ustawiaj atrybuty
widthiheight, żeby przeglądarka zarezerwowała miejsce (brak przesunięć układu). - Używaj
loading="lazy"dla zdjęć poniżej pierwszego ekranu — ale nigdy dla głównego zdjęcia. - Głównemu zdjęciu (LCP) nadaj
fetchpriority="high". - Serwuj kilka rozmiarów przez
srcsetisizes, żeby telefony pobierały mniejsze pliki.
Docelowe rozmiary plików
| Zdjęcie | Typowa szerokość | Docelowa waga |
|---|---|---|
| Główne zdjęcie na całą szerokość | 1600–2400 px | 150–350 KB |
| Zdjęcie w treści | 800–1200 px | 50–150 KB |
| Zdjęcie produktu (z zoomem) | 1200–2000 px | 100–300 KB |
| Miniatura | 300–600 px | 10–40 KB |
Najczęstsze pytania
WebP czy AVIF?
WebP to bezpieczny wybór obsługiwany przez wszystkie przeglądarki. AVIF kompresuje lepiej i działa w nowoczesnych przeglądarkach; używaj go, jeśli Twoja platforma potrafi go generować i serwować.