Optymalizacja obrazów w WordPress
– WebP, kompresja
i lazy load

Każdy, kto kiedykolwiek analizował stronę w PageSpeed Insights lub narzędziu GTmetrix, widział podobny widok: lista rekomendacji, a na jej szczycie — „Serve images in next-gen formats", „Properly size images", „Defer offscreen images". To nie przypadek. Obrazy są numerem jeden wśród powodów wolnego WordPressa i jednocześnie miejscem, w którym stosunkowo niewielki wysiłek przynosi największy efekt.

W tym artykule przejdziemy przez cały temat: od wyboru formatu, przez kompresję, aż po lazy loading i wymiary. Bez teorii dla teorii — tylko to, co faktycznie robi różnicę.

Dlaczego obrazy to największy problem z szybkością strony?

Według danych HTTP Archive obrazy stanowią średnio ponad 50% całkowitej wagi strony — niezależnie od tego, czy mówimy o sklepie, blogu czy stronie usługowej. Na urządzeniach mobilnych, gdzie połączenie bywa wolniejsze, każdy kilobajt ma znaczenie dwa razy większe.

Dla SEO kluczowy jest wpływ na LCP (Largest Contentful Paint) — jeden z trzech Core Web Vitals, który Google uwzględnia w algorytmie rankingowym. LCP mierzy czas, jaki mija od wejścia użytkownika na stronę do momentu załadowania największego widocznego elementu. W praktyce tym elementem jest prawie zawsze obraz: baner hero, zdjęcie produktu, grafika w nagłówku artykułu.

Google oczekuje LCP poniżej 2,5 sekundy. Niezoptymalizowany obraz hero o wadze 800 KB w formacie JPG potrafi samodzielnie przekroczyć ten próg. Ten sam obraz w WebP z kompresją — waży 250 KB i ładuje się trzy razy szybciej. Więcej o Core Web Vitals i ich wpływie na rankingi przeczytasz w osobnym artykule.

Format obrazów – JPG, PNG, WebP, AVIF

Pierwsza decyzja przy optymalizacji obrazów to wybór właściwego formatu. Nie wszystkie formaty nadają się do wszystkich zastosowań.

JPG – zdjęcia i fotografie

JPG (JPEG) to domyślny format dla fotografii i zdjęć z dużą liczbą kolorów i gradientów. Dobrze kompresuje się stratnie, zachowując wizualnie akceptowalną jakość. Używaj JPG tam, gdzie masz do czynienia ze zdjęciami produktów, portretami, krajobrazami — wszędzie tam, gdzie liczy się wierne odwzorowanie kolorów, a twarde krawędzie nie są krytyczne.

PNG – grafiki, loga, elementy z przezroczystością

PNG sprawdza się przy logotypach, ikonach, infografikach i wszelkich elementach wymagających przezroczystości (kanał alfa) lub ostrych krawędzi. Kompresja PNG jest bezstratna — jakość pozostaje idealna, ale pliki mogą być cięższe niż JPG w przypadku zdjęć. Nigdy nie używaj PNG do fotografii, jeśli nie potrzebujesz przezroczystości.

WebP – nowoczesny standard

WebP to format opracowany przez Google, który łączy zalety obu poprzedników: obsługuje przezroczystość jak PNG i kompresję stratną jak JPG, a pliki wychodzą średnio 25–30% mniejsze niż JPG przy tej samej jakości wizualnej. Wszystkie nowoczesne przeglądarki — Chrome, Firefox, Safari (od wersji 14), Edge — obsługują WebP bez wyjątku. W 2026 roku nie ma żadnego powodu, żeby nie używać WebP jako domyślnego formatu dla obrazów w WordPress.

AVIF – przyszłość, jeszcze nie dla wszystkich

AVIF oferuje jeszcze lepszą kompresję niż WebP (nawet 40–50% mniejsze pliki niż JPG), ale wsparcie w ekosystemie WordPress jest wciąż ograniczone. WordPress od wersji 6.5 umożliwia przesyłanie plików AVIF, jednak nie wszystkie wtyczki optymalizacji i nie wszystkie serwery generują je bez dodatkowej konfiguracji. Na dziś WebP to bezpieczny, powszechnie wspierany wybór — AVIF warto mieć na radarze na kolejne lata.

Jak sprawdzić, jakie formaty ma Twoja strona?

Wejdź na PageSpeed Insights (pagespeed.web.dev), wpisz adres strony i poszukaj rekomendacji „Serve images in next-gen formats". Narzędzie wylistuje wszystkie obrazy serwowane w starych formatach wraz z szacowaną oszczędnością w KB po konwersji. To dobry punkt startowy do audytu.

Kompresja obrazów – stratna vs bezstratna

Sam format to nie wszystko. Równie ważna jest kompresja — czyli stopień, w jakim plik jest „ściskany" przed zapisem.

• Kompresja stratna (lossy) usuwa część danych obrazu, których ludzkie oko i tak nie zauważa. Przy ustawieniu jakości 80–85% różnica wizualna jest praktycznie zerowa, a rozmiar pliku spada o 60–80% w stosunku do oryginału.
• Kompresja bezstratna (lossless) reorganizuje dane bez ich utraty — jakość pozostaje identyczna, ale oszczędności są mniejsze (zwykle 10–30%). Polecana dla logotypów i grafik, gdzie każdy piksel ma znaczenie.

W praktyce dla zdjęć i fotografii zawsze stosuj kompresję stratną na poziomie 80–85%. Dla ikon i logotypów — bezstratną lub WebP z lossless.

Wtyczki do kompresji obrazów w WordPress

Ręczna kompresja każdego zdjęcia jest niepraktyczna — szczególnie gdy biblioteka mediów liczy setki plików. Wtyczki automatyzują cały proces:

• ShortPixel — darmowy tier obejmuje 100 obrazów miesięcznie, płatne plany zaczynają się od kilku dolarów za 10 000 obrazów. Automatycznie konwertuje do WebP, oferuje kompresję stratną i bezstratną, zachowuje oryginały jako kopię zapasową. Dobry wybór dla małych i średnich stron.
• Imagify — 200 MB kompresji miesięcznie za darmo. Intuicyjny panel, integracja z WooCommerce, automatyczna konwersja do WebP i AVIF. Polecany dla sklepów i stron z dużą liczbą zdjęć produktów.
• Smush — popularna, darmowa wtyczka z kompresją bezstratną bez limitu. Wersja Pro dodaje kompresję stratną i konwersję WebP. Dobra opcja dla blogów i stron z niezbyt wymagającymi wymaganiami szybkości.
• Optimole — działa w modelu CDN: serwuje obrazy przez własną sieć dystrybucji, automatycznie dobierając format i rozmiar do urządzenia użytkownika. Wygodne rozwiązanie all-in-one dla stron z ruchem globalnym.

Rekomendacja: Jeśli zaczynasz od zera i chcesz jednej, prostej wtyczki — zacznij od ShortPixel (darmowy tier wystarczy do przetestowania) lub Imagify. Jeśli prowadzisz sklep WooCommerce z setkami produktów, Imagify lub Optimole lepiej obsłużą masową bibliotekę mediów.

Jak włączyć WebP w WordPress?

Masz kilka ścieżek — wybierz tę, która pasuje do Twojej konfiguracji.

Przez wtyczkę kompresji (najłatwiej)

ShortPixel, Imagify i Smush Pro automatycznie konwertują obrazy do WebP podczas wgrywania i w ramach masowej optymalizacji biblioteki mediów. Wystarczy włączyć odpowiednią opcję w ustawieniach wtyczki (zazwyczaj checkbox „Convert to WebP" lub „WebP Conversion"). Wtyczki serwują WebP przez reguły .htaccess lub tag <picture>, automatycznie dostarczając JPG jako fallback dla starszych przeglądarek (choć w 2026 roku niemal żadna już WebP nie obsługuje).

Natywne wsparcie WordPress 5.8+

Od wersji 5.8 WordPress akceptuje pliki WebP przesyłane bezpośrednio do biblioteki mediów — możesz więc wgrywać zdjęcia już w formacie WebP, bez konieczności konwersji przez wtyczkę. W praktyce jednak wygodniej jest wgrywać oryginały JPG/PNG i pozwolić wtyczce je przetworzyć — szczególnie gdy masz do czynienia z wieloma rozmiarami miniaturek generowanymi automatycznie przez WordPress.

Przez LiteSpeed Cache

Jeśli Twój hosting korzysta z serwera LiteSpeed (popularne na hostingach współdzielonych w Polsce), wtyczka LiteSpeed Cache oferuje wbudowaną optymalizację obrazów w sekcji „Image Optimization". Po aktywacji opcji „Convert to WebP" obrazy są konwertowane po stronie serwera, bez potrzeby instalowania osobnej wtyczki graficznej. To najwydajniejsze rozwiązanie przy dużych bibliotekach mediów.

Lazy loading – co to jest i jak włączyć?

Lazy loading (ładowanie leniwe) to technika, która sprawia, że obrazy spoza widocznego obszaru ekranu są ładowane dopiero wtedy, gdy użytkownik przewinie stronę w ich kierunku. Zamiast pobierać wszystkie obrazy naraz przy wejściu na stronę, przeglądarka odkłada ładowanie tych, których użytkownik jeszcze nie widzi.

Efekt? Szybsze pierwsze ładowanie, mniejsze zużycie danych (szczególnie na mobile), lepsza ocena w PageSpeed Insights.

WordPress 5.5+ robi to automatycznie

Od wersji 5.5 WordPress automatycznie dodaje atrybut loading="lazy" do wszystkich tagów <img> wstawianych przez edytor. Nie musisz nic konfigurować — jeśli używasz aktualnego WordPressa, lazy loading jest już włączony dla wszystkich obrazów w treści artykułów i stron.

Ważny wyjątek: obraz hero i LCP

Tu pojawia się pułapka, w którą wpada wiele stron: obraz hero (baner na górze strony) absolutnie nie powinien mieć lazy loadingu. Jeśli główny obraz ma loading="lazy", przeglądarka celowo opóźnia jego pobranie — co bezpośrednio wydłuża LCP i niszczy wynik Core Web Vitals.

Dla obrazu LCP (zazwyczaj hero) stosuj odwrotne atrybuty:

• loading="eager" — nakazuje przeglądarce załadować obraz natychmiast,
• fetchpriority="high" — sygnalizuje przeglądarce, że to najważniejszy zasób na stronie.

W kodzie wygląda to tak: <img src="hero.webp" alt="..." loading="eager" fetchpriority="high" width="1200" height="600">. To jedna z najskuteczniejszych pojedynczych zmian dla poprawy LCP — potwierdzają to testy Google i niezliczone case study optymalizacji. Więcej o tej technice piszę w artykule o wolnym ładowaniu WordPressa.

Jak sprawdzić lazy loading w DevTools?

Otwórz Chrome DevTools (F12), przejdź do zakładki Elements i kliknij na wybrany obraz. W atrybutach tagu <img> sprawdź, czy jest loading="lazy" lub loading="eager". Możesz też przejść do zakładki Network, odfiltrować zasoby po typie „Img" i obserwować, które obrazy są pobierane od razu, a które dopiero po przewinięciu strony.

Wymiary obrazów i obrazy responsywne

Dwa atrybuty, o których często się zapomina, mają ogromny wpływ na stabilność strony: width i height.

Zawsze podawaj width i height

Gdy przeglądarka napotyka tag <img> bez określonych wymiarów, nie wie, ile miejsca zarezerwować przed załadowaniem pliku. W efekcie po załadowaniu obrazu układ strony „skacze" — treść przesuwa się, przyciski zmieniają pozycję. To właśnie generuje CLS (Cumulative Layout Shift) — kolejny wskaźnik Core Web Vitals, który Google ocenia negatywnie.

Rozwiązanie jest proste: dodaj atrybuty width="800" height="450" do każdego tagu <img>. WordPress zazwyczaj robi to automatycznie przy wstawianiu obrazów przez edytor — ale warto zweryfikować, czy motywy i page buildery nie pomijają tych atrybutów.

srcset i sizes dla obrazów responsywnych

Atrybut srcset pozwala przeglądarce wybrać właściwy rozmiar obrazu zależnie od rozdzielczości ekranu urządzenia. WordPress automatycznie generuje kilka rozmiarów każdego wgrywanego obrazu (thumbnail, medium, large, full) i wstawia je jako srcset w tagach <img>. To oznacza, że użytkownik na telefonie pobierze obraz 400 px szerokości zamiast 1200 px — oszczędność danych i szybsze ładowanie.

Atrybut sizes uzupełnia srcset — informuje przeglądarkę, ile miejsca na ekranie zajmie obraz przy danej szerokości okna. Dla obrazów pełnoszerokowych zazwyczaj wystarczy sizes="100vw", dla obrazów w kolumnach — sizes="(max-width: 768px) 100vw, 50vw".

Jeśli używasz wtyczki do budowania stron (Elementor, Divi, Beaver Builder), sprawdź jej dokumentację — niektóre wersje generują srcset nieprawidłowo lub całkowicie go pomijają. W takim przypadku warto rozważyć wtyczkę korygującą, np. Regenerate Thumbnails do ponownego wygenerowania miniaturek po zmianie ustawień.

Praktyczna lista kontrolna: optymalizacja obrazów w WordPress

• Zainstaluj wtyczkę kompresji (ShortPixel, Imagify lub Smush) i uruchom masową optymalizację biblioteki mediów.
• Włącz automatyczną konwersję nowych obrazów do WebP w ustawieniach wtyczki.
• Sprawdź obraz hero — usuń loading="lazy", dodaj loading="eager" i fetchpriority="high".
• Upewnij się, że wszystkie tagi <img> mają atrybuty width i height.
• Zweryfikuj w PageSpeed Insights, czy rekomendacje dotyczące obrazów znikły z listy.
• Sprawdź CLS w Google Search Console — jeśli po dodaniu wymiarów do obrazów wskaźnik spadł, zmiana zadziałała.

Jeśli Twoja strona ładuje się wolno i nie wiesz, od czego zacząć — bezpłatny audyt pokaże Ci dokładnie, które obrazy generują największe problemy i co należy zmienić w pierwszej kolejności.

Czy muszę ręcznie konwertować każdy obraz do WebP?

Nie. Wtyczki takie jak ShortPixel, Imagify czy Smush konwertują obrazy automatycznie — zarówno nowo wgrywane, jak i całą istniejącą bibliotekę mediów w ramach jednorazowej masowej optymalizacji. Wystarczy kliknąć „Optimize All" w panelu wtyczki i poczekać na zakończenie procesu.

WordPress 5.8+ obsługuje natywne przesyłanie plików WebP, więc możesz też wgrywać zdjęcia bezpośrednio w tym formacie — przydatne, jeśli wcześniej przetworzysz je lokalnie w narzędziu takim jak Squoosh (squoosh.app) lub ImageMagick.

Jaki rozmiar pliku obrazu jest akceptowalny dla strony?

Jako punkt odniesienia stosuj następujące progi:

• Zdjęcia w artykułach i podstronach — poniżej 100 KB w formacie WebP przy kompresji 80–85%.
• Obraz hero (baner główny) — do 150–200 KB, jeśli jest odpowiednio skompresowany i serwowany w WebP.
• Ikony, loga, małe grafiki — poniżej 30 KB; rozważ SVG dla prostych grafik wektorowych.
• Zdjęcia produktów w WooCommerce — 50–80 KB przy zachowaniu dobrej jakości.

Pliki powyżej 500 KB w jakimkolwiek formacie bez wyjątku wymagają optymalizacji. Jeśli PageSpeed Insights wskazuje obraz jako „oversized" — to sygnał, że plik jest znacznie większy niż wymagają go wymiary, w których jest wyświetlany na stronie.

Czy optymalizacja obrazów wpływa na ich jakość?

To pytanie, które słyszę od właścicieli stron najczęściej — i odpowiedź jest uspokajająca: przy właściwych ustawieniach różnica wizualna jest praktycznie niewidoczna.

Kompresja stratna (lossy) na poziomie 80–85% usuwa dane, których ludzkie oko i tak nie przetwarza — niuanse kolorystyczne w jednolitych obszarach, mikroteksturę w cieniach. Na ekranie zoptymalizowany obraz wygląda identycznie jak oryginał. Dopiero przy schodzeniu poniżej 60–65% jakości zaczynają pojawiać się widoczne artefakty kompresji (charakterystyczna „pikseloza" w gradientach i krawędziach).

Kompresja bezstratna (lossless) nie zmienia jakości wizualnej w ogóle — reorganizuje jedynie dane w pliku, co daje mniejsze oszczędności, ale gwarantuje bit-perfect identyczność z oryginałem. Stosuj ją dla logotypów i grafik.

Dobra optymalizacja obrazów jest niewidoczna dla użytkownika. Widoczna jest za to jej brak — w postaci wolno ładujących się stron i słabych wyników w Google.