Jak kompresować obrazy na stronę i przyspieszyć jej ładowanie

Dlaczego waga obrazów ma znaczenie

Zdjęcie prosto z telefonu może ważyć kilka megabajtów. Jeśli umieścisz je w artykule, użytkownik z połączeniem mobilnym musi pobrać je w całości, mimo że wyświetla się ono zaledwie kilkaset pikseli szerokości. Skutkiem jest wolna strona, więcej osób, które z niej rezygnują, i zmarnowane dane mobilne.

Szybkość wiąże się też ze wskaźnikami Core Web Vitals, których używa Google. Jednym z nich jest LCP (Largest Contentful Paint), który mierzy, jak szybko pojawia się największy widoczny element. Bardzo często jest nim główny obraz, więc jego waga bezpośrednio wpływa na wynik. Google określa dobry LCP jako 2,5 sekundy lub mniej.

Wybór formatu: WebP czy JPG

JPG nadaje się do fotografii i działa wszędzie. WebP zwykle daje mniejszy plik przy zbliżonej jakości obrazu, często o około jedną czwartą lub więcej, a obecnie obsługują go wszystkie główne przeglądarki. W nowych witrynach WebP to zwykle dobry wybór domyślny.

PNG jest właściwym wyborem dla zrzutów ekranu, logo i grafik z ostrymi krawędziami lub przezroczystością. Zdjęcia zapisane jako PNG są niezwykle duże, więc przekonwertuj je do JPG lub WebP. Pliki HEIC z telefonów również należy przekonwertować, zanim trafią na stronę internetową.

Ustawianie jakości

W przypadku formatów stratnych (JPG, WebP) jakość rzędu 75–85 w skali od 0 do 100 zwykle wystarcza dla zdjęć. Poniżej około 70 zaczynają być widoczne kwadratowe obszary i szum wokół krawędzi, a powyżej 90 plik mocno rośnie przy różnicy, której oko prawie nie dostrzega.

Najlepszą metodą jest wypróbowanie: wyeksportuj kilka wersji i porównaj je na ekranie w rozmiarze, w jakim będą faktycznie wyświetlane. Obrazy z dużymi jednolitymi obszarami lub drobnym tekstem szybciej pokazują artefakty kompresji i mogą wymagać wyższego ustawienia.

Dopasuj rozmiar do wyświetlanego

Sama kompresja bez zmiany rozmiaru to tylko połowa pracy. Jeśli obraz wyświetla się w szerokości 800 px, nie ma sensu serwować pliku o szerokości 4000 px. Zmniejszenie dużego zdjęcia z 4000 do 1600 px szerokości zmniejsza wagę pliku kilkukrotnie, ponieważ liczba pikseli maleje z kwadratem szerokości.

Aby obrazy były ostre na ekranach o wysokiej gęstości pikseli, przygotuj wersję o mniej więcej dwukrotnie większej szerokości niż wyświetlana. Dla miejsca o szerokości 800 px zwykle wystarczy plik 1600 px.

Obrazy responsywne i ładowanie

Atrybut srcset pozwala przeglądarce wybrać plik o rozmiarze odpowiednim dla ekranu. Przykład:

<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="Description" loading="lazy">

Atrybut loading="lazy" mówi przeglądarce, by pobrała obraz dopiero wtedy, gdy użytkownik przewinie stronę w jego pobliże, więc stosuj go dla obrazów poniżej pierwszego ekranu. Nie ładuj leniwie głównego obrazu widocznego na samej górze, bo może to pogorszyć LCP.

Atrybuty width i height pozwalają przeglądarce zarezerwować miejsce z wyprzedzeniem, dzięki czemu strona nie skacze podczas ładowania. Poprawia to wskaźnik CLS (Cumulative Layout Shift).

Praktyczna lista kontrolna przed publikacją

• Obraz zmniejszony do szerokości, w jakiej naprawdę jest wyświetlany (najwyżej około dwukrotnie większej).
• Wybrany format: WebP lub JPG dla zdjęć, PNG lub WebP dla grafik z przezroczystością.
• Jakość około 75–85, sprawdzona wzrokowo na ekranie.
• Ustawione atrybuty width i height.
• Obrazy poniżej pierwszego ekranu używają loading="lazy".
• Opisowe nazwy plików (na przykład kaunas-old-town.webp) i sensowny tekst alternatywny alt.
• Rzeczywisty rozmiar pobranego pliku sprawdzony w narzędziach deweloperskich przeglądarki (karta Sieć).

Jak zmierzyć efekt

Przed optymalizacją zanotuj, ile waży strona. W narzędziach deweloperskich przeglądarki (F12, karta Sieć, filtr Img) zobaczysz rozmiar każdego obrazu i ich sumę. Po optymalizacji powtórz pomiar z wyłączoną pamięcią podręczną (Disable cache), aby porównanie było rzetelne.

Przykład: artykuł ma pięć zdjęć po 3 MB, czyli łącznie około 15 MB. Jeśli zmniejszysz każde do szerokości 1600 px i zapiszesz jako WebP w jakości 80, każde waży często około 100–250 KB, a wszystkie razem poniżej 1,5 MB. Dokładny wynik zależy od zawartości zdjęcia, więc zawsze mierz samodzielnie.

Częste błędy

• Zmiana rozmiaru tylko w CSS: jeśli wgrasz plik 4000 px i wyświetlisz go w szerokości 400 px, przeglądarka i tak pobierze cały plik.
• Wielokrotna rekompresja: każdy ponowny zapis JPG dodaje straty. Zawsze eksportuj z oryginału.
• Używanie PNG dla zdjęć: plik może być kilka razy większy niż JPG lub WebP.
• Leniwe ładowanie pierwszego obrazu: główny obraz na górze strony powinien ładować się od razu.
• Brak tekstu alternatywnego alt: jest ważny dla dostępności i pomaga wyszukiwarkom zrozumieć obraz.