Optymalizacja obrazów: WebP, kompresja, lazy loading

Obrazy to zwykle 50-70% wagi strony - i najprostsze miejsce na wielkie oszczędności. Wyjaśniamy formaty (JPG, PNG, WebP, AVIF, SVG), właściwe wymiary, kompresję, lazy loading i automatyzację w WordPressie, dzięki której cała biblioteka zdjęć odchudzi się sama.

Dlaczego obrazy są tak ważne dla szybkości?

Według corocznych badań HTTP Archive obrazy stanowią największą pojedynczą część wagi przeciętnej strony internetowej. Jedno nieoptymalizowane zdjęcie z aparatu (5-8 MB) waży więcej niż cały kod HTML, CSS i JavaScript dobrze zrobionej witryny razem wzięte. Dobra wiadomość: żadna inna optymalizacja nie daje tak dużego efektu przy tak małym wysiłku - i żadna nie jest równie bezpieczna, bo nie dotyka logiki strony.

Który format do czego? Ściąga

  • WebP - dzisiejszy standard dla zdjęć i grafik na WWW: 25-35% mniejszy od JPG przy tej samej jakości, obsługiwany przez wszystkie współczesne przeglądarki. Domyślny wybór.
  • AVIF - jeszcze skuteczniejsza kompresja (często o kolejne 20-30% mniej niż WebP), wsparcie przeglądarek już powszechne; wady: wolniejsze kodowanie. Idealny jako pierwszy wybór z WebP jako zapasem.
  • JPG - nadal OK dla zdjęć, jeśli nie możesz użyć WebP; jakość 75-85% jest wizualnie nie do odróżnienia od 100%.
  • PNG - tylko tam, gdzie potrzebna bezstratność lub przezroczystość, której nie pokrywa WebP (rzadkość); zrzuty ekranu z tekstem.
  • SVG - logo, ikony, proste ilustracje: wektor waży kilobajty i skaluje się bez strat na każdym ekranie.

Wymiary: nie wysyłaj plakatu tam, gdzie wisi pocztówka

Najczęstszy błąd: obraz 4000 px szerokości wyświetlany w kolumnie o szerokości 400 px. Przeglądarka pobiera całość, po czym... zmniejsza. Zasady:

  1. Maksymalna sensowna szerokość na stronę: ~1600-1920 px dla pełnoekranowych hero, ~800-1200 px dla obrazów w treści, ~600 px dla miniatur produktów.
  2. WordPress generuje rozmiary pośrednie automatycznie - i serwuje je przez srcset (przeglądarka sama wybiera właściwy dla ekranu). Warunek: wgrywaj rozsądny oryginał, nie 8000 px z aparatu.
  3. Ekrany Retina: wystarczy 1,5-2× rozmiar wyświetlania; więcej to marnowanie transferu.

Kompresja: jakość 80 wygląda jak 100, waży jak 30

Kompresja stratna usuwa szczegóły niewidoczne dla oka. Praktyka:

  • ustawienie jakości 75-85% to strefa optymalna - różnicy nie zobaczysz, a plik chudnie kilkukrotnie;
  • narzędzia ręczne: Squoosh (squoosh.app - darmowe, w przeglądarce, z podglądem przed/po), TinyPNG;
  • cel praktyczny: obraz w treści < 100-200 KB, hero < 250-350 KB, miniatura < 50 KB.

Lazy loading - ładuj tylko to, co widać

Lazy loading opóźnia pobieranie obrazów spoza pierwszego ekranu do momentu, aż użytkownik do nich doscrolluje. WordPress dodaje atrybut loading="lazy" automatycznie od wersji 5.5 - upewnij się tylko, że motyw tego nie psuje.

Jeden krytyczny wyjątek: obraz hero (największy element pierwszego ekranu) NIE może być lazy - opóźniłbyś metrykę LCP, czyli dokładnie to, co Google mierzy najmocniej. Dla hero właściwe są atrybuty loading="eager" i fetchpriority="high" (dobre wtyczki optymalizacyjne ustawiają to same). Więcej o metrykach - w artykule o Core Web Vitals na naszym blogu.

Automatyzacja w WordPressie - ustaw raz, działa zawsze

Nie musisz optymalizować ręcznie każdego pliku:

  1. Converter for Media (darmowa, polska) - konwertuje całą bibliotekę do WebP/AVIF i serwuje nowe formaty automatycznie, ze starymi jako zapasem;
  2. Smush / ShortPixel / Imagify - kompresja przy wgrywaniu + hurtowo wstecz, skalowanie zbyt dużych oryginałów;
  3. wtyczki cache (LiteSpeed Cache) - często mają optymalizację obrazów wbudowaną, łącznie z generowaniem WebP i poprawnym traktowaniem hero.

Po masowej konwersji wyczyść cache strony i sprawdź kilka podstron - zwłaszcza galerie i slidery starszych wtyczek.

Obrazy a SEO - dwa słowa o alt i nazwach

  • Nazwa pliku: opisowa, z myślnikami - „hosting-panel-directadmin.webp", nie „IMG_4521.webp";
  • tekst alternatywny (alt): zwięzły opis zawartości - dla czytników ekranu, dla Google Images i jako tekst zastępczy; nie upychaj w nim słów kluczowych na siłę;
  • grafika z tekstem: unikaj - tekst na obrazku jest niewidoczny dla wyszukiwarki i nieczytelny na telefonie; treść trzymaj w HTML.

Najczęściej zadawane pytania

Czy WebP na pewno zadziała u wszystkich?

Wszystkie współczesne przeglądarki (Chrome, Firefox, Safari, Edge) obsługują WebP od lat. Wtyczki konwertujące i tak zachowują oryginały jako zapas, więc ryzyko jest zerowe.

Mam sklep z tysiącami zdjęć produktów - od czego zacząć?

Wtyczka z konwersją hurtową w tle (ShortPixel/Converter for Media) + limity rozmiaru przy wgrywaniu nowych. Konwersja potrwa kilka godzin, ale odbywa się automatycznie. Efekt w sklepie bywa spektakularny - to zwykle połowa wagi katalogu (resztę recept opisujemy w tekście o przyspieszaniu WooCommerce).

Zrobiłem wszystko - co jeszcze mogę ugrać?

Wymiary w atrybutach (stabilność układu), preload dla hero, CDN przy międzynarodowym ruchu i przegląd, czy każdy obraz w ogóle jest potrzebny - najlżejszy obraz to ten, którego nie ma.

Podsumowanie

Formuła zdrowych obrazów: WebP/AVIF + rozsądne wymiary + jakość ~80% + lazy loading (poza hero) + automatyzacja wtyczką. Godzina konfiguracji, a strona chudnie o połowę i przyspiesza odczuwalnie na każdym telefonie. W połączeniu z cache i szybkim hostingiem - masz komplet fundamentów wydajności.

Powiązane poradniki

Wszystkie poradniki z kategorii: Szybkość i wydajność

Powiązane usługi McProdukt

Zobacz również