Kiedy ostatni raz sprawdziłeś, ile ważą zdjęcia na Twojej stronie? Prawdopodobnie odpowiedź brzmi: dawno albo nigdy. A to błąd, który kosztuje Cię nie tylko pieniądze, ale i klientów.
W dzisiejszym artykule przyjrzymy się trzem najczęstszym błędom w optymalizacji obrazków, które widzę u klientów JurskiTech.pl. To nie są teoretyczne rozważania – to realne przypadki z życia firm, które straciły ruch, konwersję i pieniądze przez złe podejście do obrazków.
1. Używanie zbyt dużych obrazów i brak responsywności
Zaczniemy od podstawy, która wciąż jest nagminnie ignorowana. Większość stron wgrywa obrazy o rozdzielczości 4000×3000 pikseli, wyrenderowane prosto z aparatu. Tymczasem na stronie wyświetlają się one w kontenerze o szerokości 800 pikseli. Efekt? Strona waży 5 MB zamiast 200 KB.
Przykład z życia
Jeden z naszych klientów – sklep z odzieżą – miał średnią wagę strony 8 MB. Ponad 70% tej wagi stanowiły zdjęcia produktów. Po wdrożeniu responsywnych obrazów (srcset, sizes) i odpowiednim skalowaniu, wagę udało się zredukować do 1.5 MB. Czas ładowania spadł z 6 sekund do 2.3 sekundy. Wzrost konwersji o 12% w ciągu miesiąca.
Co robić?
- Używaj atrybutów srcset i sizes w tagu
<img>, aby przeglądarka ładowała odpowiedni rozmiar dla danego ekranu. - Wygeneruj kilka wariantów każdego obrazu: mały (400px), średni (800px), duży (1200px).
- Nie polegaj na CSS, że zmniejszy obraz – to tylko skaluje go wizualnie, ale waga pliku pozostaje.
2. Niewłaściwy format i kompresja
Kolejny błąd to zapisywanie zdjęć w formacie PNG lub JPEG z najwyższą jakością. PNG sprawdza się głównie dla grafik z przezroczystością. Dla zdjęć produktów lepszy jest WebP lub AVIF, które oferują lepszą kompresję przy zachowaniu jakości.
Nie tylko format, ale i kompresja
Wiele firm stosuje kompresję „lossless”, która w przypadku zdjęć nie ma sensu – ludzkie oko nie dostrzega różnicy między 100% a 85% jakości, a rozmiar pliku może być o połowę mniejszy. W JurskiTech.pl dla klientów e-commerce zawsze zalecamy kompresję stratną z jakością 80-85% dla zdjęć produktów.
Liczby nie kłamią
Przetestowałem to na przykładowym zdjęciu produktu:
- JPEG jakość 100%: 350 KB
- WebP jakość 80%: 90 KB
- AVIF jakość 80%: 60 KB
Różnica w odbiorze wizualnym? Żadna. Różnica w czasie ładowania strony? Ogromna.
Co robić?
- Używaj WebP jako podstawowego formatu, z fallbackiem do JPEG.
- Kompresuj obrazy stratnie na poziomie 80-85%.
- Automatyzuj proces – narzędzia takie jak ImageMagick, Sharp (Node.js) czy nawet wtyczki do CMS pozwalają na masową konwersję.
3. Leniwe ładowanie (lazy loading) – i jego przeciwieństwo
Leniwe ładowanie to technika, w której obrazy ładują się dopiero, gdy użytkownik przewinie do ich pozycji. To świetne narzędzie, ale wielu developerów stosuje je do wszystkich obrazów, w tym do tych w widocznym obszarze (above the fold). To błąd.
Dlaczego to problem?
Kiedy obraz jest powyżej folda i ma lazy loading, przeglądarka opóźnia jego ładowanie, co może sprawić, że użytkownik zobaczy pusty obszar lub brzydki placeholder. To psuje pierwsze wrażenie. Dodatkowo, jeśli lazy loading jest źle zaimplementowany (np. z bardzo niskim progiem), może powodować opóźnienie w wyświetlaniu kluczowych treści.
Przykład z życia
Klient z branży turystycznej miał na stronie głównej duży obraz hero z lazy loading. Efekt? Na słabszych połączeniach obraz pojawiał się po 3-4 sekundach. Strona wyglądała nieprofesjonalnie. Współczynnik odrzuceń wzrósł o 15%.
Co robić?
- Nie stosuj lazy loadingu do obrazów powyżej folda. Użyj native loading=”eager” lub po prostu nie dodawaj loading=”lazy”.
- Dla pozostałych obrazów ustaw loading=”lazy” i dodaj niskiej jakości placeholder (np. blur-up technique), aby użytkownik widział zarys.
- Pamiętaj też o atrybucie
decoding="async"– to pozwala przeglądarce odkodować obraz asynchronicznie, nie blokując renderowania.
Podsumowanie
W dzisiejszym interentowym krajobrazie wydajność strony nie jest już tylko kwestią wygody – to kluczowy czynnik wpływający na SEO, UX i konwersję. Obrazy to największy balast, który możesz zrzucić, aby przyspieszyć swoją stronę.
Podsumowując:
- Zadbaj o responsywne obrazy – inny rozmiar dla desktopu, inny dla mobile.
- Wybierz odpowiedni format (WebP/AVIF) i kompresuj stratnie.
- Stosuj lazy loading z głową – nie dla obrazów nad foldem.
Jeśli czujesz, że Twoja strona mogłaby działać szybciej, a nie wiesz od czego zacząć – w JurskiTech.pl pomagamy w audycie wydajności i wdrażaniu optymalizacji. Wystarczy, że się odezwiesz.
A Ty? Kiedy ostatnio sprawdzałeś wagę swojej strony?
