Obrazki odpowiadają za 50–80% wagi przeciętnej strony WordPress. Blog z dwudziestoma niezoptymalizowanymi zdjęciami z telefonu potrafi ważyć 30 MB — a ten sam blog po optymalizacji schodzi do 3–5 MB. Różnica w czasie ładowania: z 8 sekund do 2. Różnica w Core Web Vitals: z czerwonego LCP na zielony. Różnica w kosztach hostingu: mniejsze zużycie transferu i dysku.
W tym poradniku przechodzę przez cały pipeline optymalizacji obrazków w WordPressie — od kompresji przed uploadem, przez automatyczną konwersję do WebP/AVIF, lazy loading, aż po serwowanie z CDN. Każdy krok z konkretną wtyczką i ustawieniami.
Dlaczego obrazki tak spowalniają WordPress?
Kiedy wrzucasz zdjęcie do biblioteki mediów, WordPress tworzy kilka rozmiarów (thumbnail, medium, large, full), ale nie kompresuje ich agresywnie i nie konwertuje do nowoczesnych formatów. Efekt: serwujesz JPEG/PNG z aparatu w oryginalnej wadze — 2–5 MB na zdjęcie. Na stronie z 10 zdjęciami to 20–50 MB danych do pobrania.
Przeglądarki muszą pobrać każdy bajt, zdekodować obrazek i wyrenderować go na ekranie. Im więcej danych — tym dłużej trwa ładowanie, tym wyższy LCP (Largest Contentful Paint), tym gorzej w Core Web Vitals.
Krok 1. Kompresja przed uploadem — optymalizuj u źródła
Najlepsza optymalizacja to taka, którą robisz zanim wrzucisz zdjęcie do WordPressa. Dwa darmowe narzędzia:
- Squoosh (squoosh.app) — webowa aplikacja od Google. Wrzucasz zdjęcie, wybierasz format (WebP, AVIF, JPEG), ustawiasz jakość (75–85% to sweet spot), porównujesz wizualnie i pobierasz. Idealny do pojedynczych zdjęć.
- TinyPNG / TinyJPG (tinypng.com) — batch compression. Wrzucasz do 20 plików naraz, serwis kompresuje bezstratnie lub z minimalną stratą. Darmowe do 500 kompresji miesięcznie.
Cel: zdjęcie z telefonu (5 MB) powinno schodzić do 100–300 KB w formacie WebP przy rozdzielczości 1200–1600px (szerokość wystarczająca dla full-width na desktopie).
Krok 2. Automatyczna kompresja i konwersja w WordPress
Ręczna kompresja jest idealna dla nowych zdjęć, ale co z setkami już wrzuconych obrazków? Tutaj wchodzą wtyczki, które kompresują i konwertują automatycznie — zarówno nowe uploady, jak i istniejącą bibliotekę.
ShortPixel (rekomendacja)
ShortPixel Image Optimizer to najbardziej kompletna wtyczka do optymalizacji obrazków. Darmowy plan daje 100 kredytów miesięcznie (1 kredyt = 1 obrazek we wszystkich rozmiarach), płatne plany zaczynają się od ~$5 za 5000 obrazków.
Co robi:
- Kompresuje JPEG/PNG przy uploadzie (lossy, glossy lub lossless — wybierasz poziom)
- Automatycznie konwertuje do WebP i opcjonalnie AVIF
- Serwuje WebP/AVIF przeglądarkom, które to obsługują (wszystkie nowoczesne), a JPEG/PNG tym, które nie (IE11, stare boty)
- Bulk optimization — przerobienie całej istniejącej biblioteki jednym kliknięciem
- Zachowuje oryginały jako backup (możesz cofnąć optymalizację)
Imagify
Alternatywa od twórców WP Rocket. Działa identycznie: kompresja + WebP + bulk. Darmowy plan: 20 MB miesięcznie. Zaletą jest głęboka integracja z WP Rocket (jeśli go używasz).
EWWW Image Optimizer
Jedyna wtyczka, która kompresuje lokalnie na serwerze (bez wysyłania zdjęć na zewnętrzny serwer). Darmowa wersja obsługuje kompresję lossless i konwersję do WebP. Idealna dla osób, które nie chcą wysyłać zdjęć do zewnętrznych API ze względu na prywatność.
Krok 3. WebP vs AVIF — co wybrać?
Dwa nowoczesne formaty obrazków, które zastępują JPEG i PNG:
| Cecha | WebP | AVIF |
|---|---|---|
| Kompresja vs JPEG | 25–35% mniejszy | 40–50% mniejszy |
| Wsparcie przeglądarek | 97%+ (wszystkie nowoczesne) | 92%+ (brak w Edge starszym, IE) |
| Czas kodowania | Szybki | Wolny (3–5x dłuższy) |
| Jakość przy niskim bitrate | Dobra | Lepsza (mniej artefaktów) |
| Animacje | Tak (zastępuje GIF) | Tak |
Rekomendacja: Używaj WebP jako domyślnego formatu — ma niemal pełne wsparcie przeglądarek i szybkie kodowanie. AVIF włączaj jako dodatkową opcję (ShortPixel i Imagify potrafią serwować AVIF → WebP → JPEG w kolejności preferencji). Nie rezygnuj z fallbacka JPEG/PNG dla starych botów i przeglądarek.
Krok 4. Lazy loading — ładuj obrazki tylko gdy są widoczne
Lazy loading oznacza, że obrazki poniżej widocznego obszaru ekranu (below the fold) nie są pobierane od razu — ładują się dopiero, gdy użytkownik do nich scrolluje. Efekt: zamiast pobierać 20 obrazków na raz, przeglądarka pobiera 2–3 widoczne i dokłada kolejne w miarę scrollowania.
Od WordPress 5.5 lazy loading jest włączony domyślnie — WordPress automatycznie dodaje atrybut loading="lazy" do tagów <img>. Sprawdź, czy Twoja strona go ma: otwórz źródło strony (Ctrl+U) i szukaj loading="lazy" przy obrazkach.
Ważne: nie stosuj lazy loadingu do obrazka LCP (najczęściej hero image / featured image na górze strony). Opóźnienie ładowania tego obrazka pogorszy LCP. WordPress od wersji 6.3 automatycznie pomija lazy loading dla pierwszego obrazka na stronie — ale jeśli używasz wtyczki cache’ującej lub buildera (Elementor, Divi), sprawdź to ręcznie.
Krok 5. Responsywne obrazki — srcset i sizes
WordPress od wersji 4.4 automatycznie generuje atrybut srcset dla każdego obrazka — czyli listę wariantów w różnych rozmiarach. Przeglądarka wybiera najmniejszy wariant, który pasuje do ekranu. Na telefonie z ekranem 400px przeglądarka pobiera obrazek 400px zamiast 1600px — 4x mniej danych.
Aby to działało poprawnie:
- Wrzucaj zdjęcia w oryginalnej rozdzielczości (przynajmniej 1600px szerokości) — WordPress sam wygeneruje mniejsze warianty.
- Nie usuwaj wygenerowanych rozmiarów z katalogu
uploads— WordPress ich potrzebuje do srcset. - Sprawdź, czy Twój motyw nie nadpisuje srcset — niektóre motywy (szczególnie starsze) wyłączają tę funkcję.
Krok 6. Serwowanie obrazków z CDN
CDN (Content Delivery Network) serwuje obrazki z serwera najbliższego użytkownikowi. Ktoś z Warszawy dostaje obrazki z węzła w Warszawie, ktoś z Londynu — z Londynu. Efekt: czas pobierania obrazka spada z 200–500 ms do 20–50 ms.
Opcje:
- Cloudflare (darmowy plan) — automatycznie cache’uje i serwuje statyczne zasoby (obrazki, CSS, JS) z globalnej sieci. Dla WordPressa: Cloudflare APO ($5/mc) to opcja pełnego page cache na edge.
- ShortPixel Adaptive Images — serwuje obrazki z CDN ShortPixel, automatycznie dopasowując rozmiar do urządzenia. Zero konfiguracji po stronie WordPressa.
- Bunny CDN — bardzo szybki i tani ($0.01/GB), popularny wśród specjalistów. Wymaga ręcznej konfiguracji lub wtyczki CDN Enabler.
Krok 7. Audyt — sprawdź, co jeszcze można poprawić
Po wdrożeniu powyższych kroków, uruchom audyt:
- PageSpeed Insights — sprawdź, czy zniknęły ostrzeżenia „Serve images in next-gen formats” i „Properly size images”.
- GTmetrix → Waterfall — przejrzyj czas ładowania poszczególnych obrazków. Każdy powinien być poniżej 100 ms.
- Bulk Smush / ShortPixel → Statistics — sprawdź ile KB/MB zaoszczędziłeś na całej bibliotece.
Typowe wyniki po pełnej optymalizacji: waga strony spada o 60–80%, LCP schodzi z 3–5 sekund do 1–2, PageSpeed Score rośnie o 15–30 punktów.
Najczęściej zadawane pytania
Czy konwersja do WebP pogarsza jakość zdjęć?
Przy ustawieniu jakości 80–85% różnica jest niewidoczna gołym okiem — nawet na dużych monitorach. WebP został zaprojektowany tak, żeby przy niższym rozmiarze pliku zachować percepcyjną jakość JPEG. Wtyczki typu ShortPixel mają tryb „glossy”, który daje idealny kompromis jakość/rozmiar.
Czy muszę ręcznie konwertować stare obrazki?
Nie. ShortPixel, Imagify i EWWW mają opcję Bulk Optimization — jedno kliknięcie konwertuje całą istniejącą bibliotekę. Proces trwa od kilku minut (100 obrazków) do kilku godzin (10 000+), ale działa w tle.
Czy WebP działa w każdej przeglądarce?
WebP jest wspierany przez 97%+ przeglądarek (Chrome, Firefox, Edge, Safari 14+, Opera). Jedyne, co go nie obsługuje, to IE11 i Safari poniżej wersji 14. Wtyczki automatycznie serwują fallback (JPEG/PNG) dla tych przeglądarek — nie musisz się o to martwić.
Czy optymalizacja obrazków pomaga w SEO?
Tak, i znacząco. Google używa Core Web Vitals (LCP, CLS, INP) jako sygnału rankingowego. Obrazki są głównym czynnikiem wpływającym na LCP — im lżejsze i szybciej serwowane, tym lepszy LCP, tym lepsze CWV, tym lepsza pozycja. Dodatkowo Google Images to osobne źródło ruchu — zoptymalizowane obrazki z właściwymi atrybutami alt pojawiają się wyżej w wyszukiwarce grafiki.
Podsumowanie
Optymalizacja obrazków to najniżej wiszący owoc w całym performance WordPressa. Jedna wtyczka (ShortPixel lub Imagify) + włączony lazy loading + CDN = strona 2–3x lżejsza bez żadnej widocznej utraty jakości. Zacznij od bulk optimization istniejącej biblioteki, a potem ustaw automatyczną kompresję nowych uploadów — i zapomnij o problemie.
A jeśli po optymalizacji obrazków chcesz pójść dalej i obniżyć TTFB serwera — mamy do tego osobny poradnik z 8 poprawkami.
