Obrazy to zwykle najcięższa rzecz na stronie, co czyni je największą dźwignią szybkości, którą kontrolujesz. Ustaw ich wymiary i wagę pliku dobrze, a strony wydają się natychmiastowe. Ustaw je źle, a nie zdasz Core Web Vitals niezależnie od tego, jak czysty jest Twój kod. Oto cele i proces, by je osiągnąć.
Cele wymiarów
Dopasuj rozmiar obrazu w pikselach do miejsca, gdzie faktycznie się pojawia. Z grubsza:
- Grafika główna na całą szerokość: 1600–2000 px szerokości pokrywa większość układów na komputery. Szersze rzadko pomaga, a kosztuje mnóstwo bajtów.
- Zdjęcie w treści: szerokość kolumny treści, zwykle 800–1200 px.
- Miniatura / obraz karty: 300–500 px.
- Awatar / ikona: 48–200 px w rozmiarze wyświetlania.
Podanie obrazu 4000 px do miejsca 800 px oznacza, że przeglądarka pobiera i dekoduje 25× więcej pikseli, niż kiedykolwiek pokaże. To czysta strata — a dekodowanie dużych obrazów szarpie też głównym wątkiem.
Cele wagi
Wymiary ustawiają pułap; kompresja ustawia rzeczywistą wagę. Celuj w:
- Grafika główna: poniżej 200 KB (najlepiej 100–150 KB).
- Zdjęcie w treści: 80–150 KB.
- Miniatura: 10–30 KB.
- Suma obrazów na stronie: staraj się zmieścić poniżej ~1 MB dla całej strony.
Jeśli pojedynczy obraz przekracza ~300 KB, potraktuj to jak błąd do zbadania.
Dlaczego to napędza Core Web Vitals
Google'owski wskaźnik Largest Contentful Paint (LCP) mierzy, ile czasu upływa, zanim wyrenderuje się największy element na ekranie — a na większości stron tym największym elementem jest obraz (zwykle grafika główna). Ciężka, przewymiarowana grafika główna wprost zawyża LCP. Dobre LCP to poniżej 2,5 sekundy; rozdęta grafika główna sama potrafi to przebić na łączach mobilnych.
Dwie dodatkowe korzyści związane z obrazami:
- Ustaw atrybuty szerokości i wysokości, żeby przeglądarka zarezerwowała miejsce — to chroni Twój wynik Cumulative Layout Shift (CLS).
- Priorytetyzuj grafikę główną (nie ładuj leniwie obrazu LCP) i ładuj leniwie wszystko poniżej pierwszego ekranu.
Dwuetapowy proces
Krok 1 — zmień rozmiar do rzeczywistej szerokości wyświetlania. Użyj narzędzia do zmiany rozmiaru, by sprowadzić każdy obraz do rozmiaru, w jakim się pojawia. Blokada proporcji włączona, wysokiej jakości zmniejszenie. Samo to często tnie wagę o 80–90%.
Krok 2 — skompresuj. Podaj obrazy o zmienionym rozmiarze do kompresora obrazów: jakość 75–85 dla zdjęć (wizualnie bezstratna), kwantyzacja do 256 kolorów dla PNG. Nigdy nie zwraca pliku większego niż oryginał, obsługuje partie i ma opcjonalny limit szerokości, więc oba kroki możesz wykonać naraz. W nowoczesnych przeglądarkach konwersja zdjęć do WebP wyciska kolejne 25–35%.
Zmierz, nie zgaduj
Gdy obrazy są zoptymalizowane, potwierdź, że strona faktycznie przyspieszyła. Page QA w IMG.DIY audytuje działający adres URL przez Google PageSpeed Insights i raportuje wagę obrazów strony, żebyś wychwycił każdy plik wciąż zbyt ciężki. Jedno zastrzeżenie: Page QA wymaga połączenia z internetem — w przeciwieństwie do narzędzi do obrazów wywołuje API PageSpeed Google'a, więc nie działa offline. Użyj go po wdrożeniu, by sprawdzić rzeczywiste LCP i budżet obrazów.
Prywatne domyślnie
Narzędzia do zmiany rozmiaru, kompresji i konwersji działają w całości w Twojej przeglądarce dzięki Canvas i WebAssembly — nic nie jest przesyłane, a po pierwszej wizycie są zapisane w pamięci podręcznej i działają offline. Możesz przygotować obrazy na całą stronę bez połączenia, a potem uruchomić Page QA online, gdy strona już działa.
Szybkie podsumowanie: dobierz właściwe wymiary, skompresuj do celów wagi, priorytetyzuj grafikę główną pod LCP i zweryfikuj przez Page QA.