Optymalizacja obrazków WordPress — kompletny poradnik 2026
Badania Google pokazują, że obrazki odpowiadają za ponad 50% wagi typowej strony internetowej. Na WordPressie problem jest szczególnie widoczny — domyślne ustawienia sprzyjają wgrywaniu ciężkich plików JPEG i PNG, które mogą liczyć po kilka megabajtów. Skutek? Wolne ładowanie, słaby wynik PageSpeed i gorsze pozycje w Google. W tym poradniku dowiesz się, jak krok po kroku naprawić każdy z tych problemów.
Dlaczego obrazki spowalniają WordPress?
WordPress pozwala wgrać praktycznie dowolny plik graficzny bez żadnych ostrzeżeń co do rozmiaru. Użytkownicy wgrywają więc oryginalne zdjęcia z aparatów lub smartfonów — często 6–20 MB na plik. WordPress co prawda tworzy pomniejszone wersje (thumbnails), ale oryginalny, ciężki plik pozostaje w bibliotece i może być wyświetlany np. na stronach archiwum.
Trzy główne przyczyny spowolnień przez obrazki na WordPress to:
- 1. Zbyt duże pliki i nienowoczesne formaty — JPEG i PNG są o 25–55% cięższe od WebP i AVIF przy tej samej jakości wizualnej. Na stronie z 30 obrazkami różnica w całkowitej wadze może wynosić 2–5 MB.
-
2. Brak lazy loadingu lub nieprawidłowa konfiguracja — WordPress domyślnie dodaje
loading="lazy"od wersji 5.5, ale starsze motywy lub ręcznie wstawiane zdjęcia mogą nie mieć tej optymalizacji. Przeglądarka wtedy wczytuje wszystkie obrazki jednocześnie. - 3. Błędne rozmiary obrazków — motyw wyświetla zdjęcie w rozmiarze 400×300 px, ale WordPress serwuje oryginalny plik 2000×1500 px. Przeglądarka pobiera 10× więcej danych niż potrzebuje.
Efekt tych problemów to wolne LCP (Largest Contentful Paint) — metryka Core Web Vitals, która mierzy czas do załadowania największego widocznego elementu strony (najczęściej właśnie obrazka). Google wymaga LCP poniżej 2,5 sekundy dla zielonego wyniku.
Jak sprawdzić stan obrazków na swojej stronie?
Zanim zaczniesz optymalizację, warto wiedzieć, z jakimi problemami masz do czynienia. Użyj skanera poniżej, by zobaczyć, ile procent obrazków na Twojej stronie jest już w WebP lub AVIF, a ile wciąż czeka na konwersję:
Oprócz WebP Check warto przejrzeć raport Google PageSpeed Insights (pagespeed.web.dev) — zakładka Opportunities pokaże dokładnie, które obrazki są zbyt duże i ile KB można zaoszczędzić. Search Console w sekcji Core Web Vitals pokaże natomiast, jak Twoja strona wypada w danych rzeczywistych (field data).
WebP i AVIF na WordPress — dlaczego warto?
WebP to format stworzony przez Google, który daje 25–35% mniejsze pliki niż JPEG przy tej samej jakości. Obsługiwany jest przez ~97% przeglądarek i jest to praktycznie bezpieczna opcja bez żadnych kompromisów kompatybilności.
AVIF idzie krok dalej — kompresja lepsza o 40–55% od JPEG i 15–25% od WebP. Obsługuje go ~92% przeglądarek (w tym Safari od wersji 16). Kodowanie jest wolniejsze, ale przy użyciu wtyczki, która przetwarza obrazki w chmurze, nie ma to znaczenia dla Twojego serwera.
Praktyczny efekt: strona z 40 obrazkami po konwersji do WebP może ważyć 1,5–3 MB mniej, co przekłada się na 0,5–1,5 sekundy szybsze ładowanie i realną poprawę LCP. To bezpośrednio wpływa na pozycję w wynikach Google.
WordPress 6.x: Od WordPress 6.5 generator miniatur tworzy obrazki WebP obok JPEG. Nie obejmuje to jednak starszych zdjęć w bibliotece — tych wymaga ręcznego przeliczenia lub wtyczki.
Najlepsze wtyczki do optymalizacji obrazków WordPress
Poniżej trzy rekomendowane wtyczki, sprawdzone przez społeczność WordPressa. Różnią się modelem cenowym i sposobem przetwarzania:
Jak włączyć lazy loading na WordPress?
Lazy loading (leniwe ładowanie) sprawia, że przeglądarka pobiera obrazki dopiero wtedy, gdy użytkownik zbliża się do nich podczas scrollowania. Obrazki poniżej ekranu nie są pobierane przy wejściu na stronę — co znacząco przyspiesza pierwsze ładowanie.
WordPress dodaje loading="lazy" automatycznie od wersji 5.5 do wszystkich obrazków wstawianych przez edytor. Jeśli motyw lub wtyczka wstawia obrazki ręcznie przez HTML, możesz dodać ten atrybut samodzielnie lub przez filtr WordPress:
// Dodaj do functions.php swojego motywu
add_filter( 'wp_lazy_loading_enabled', '__return_true' );
// Dla obrazków wstawianych ręcznie — użyj atrybutu HTML:
// <img src="obrazek.webp" alt="..." loading="lazy" width="800" height="600">
Ważne: NIE dodawaj loading="lazy" do głównego obrazka hero lub nagłówka strony (tzw. LCP element). To spowolni LCP, bo przeglądarka odłoży jego wczytanie na później. Dla obrazka LCP użyj zamiast tego fetchpriority="high".
Optymalne rozmiary obrazków na WordPress
Wgrywanie zbyt dużych obrazków to jeden z najczęstszych błędów. Poniżej tabela z zalecanymi rozmiarami i wagami dla typowych zastosowań:
| Typ obrazka | Wymiary (px) | Max waga (WebP) | Format |
|---|---|---|---|
| Hero / baner | 1920 × 600 | 150–200 KB | WebP lub AVIF |
| Zdjęcie produktu | 800 × 800 | 60–100 KB | WebP lub AVIF |
| Miniaturka wpisu bloga | 400 × 300 | 25–40 KB | WebP |
| Zdjęcie w artykule | max 1200 px szer. | 80–120 KB | WebP lub AVIF |
| Logo | 200 × 60 | max 10 KB | SVG (preferowany) |
| Ikona / avatar | 96 × 96 | max 8 KB | WebP lub SVG |
Całkowita waga wszystkich obrazków na stronie główowej nie powinna przekraczać 1 MB. W przypadku stron e-commerce ze stronami kategorii pełnymi produktów — max 1,5 MB. Możesz sprawdzić aktualną wagę przez DevTools (F12 → Network → filtr Img, kolumna Size).
Jak skonfigurować ShortPixel krok po kroku
ShortPixel to najszybsza droga do WebP i AVIF na WordPressie. Oto jak go uruchomić w kilka minut:
Zainstaluj wtyczkę z repozytorium WordPress (Wtyczki → Dodaj nową → szukaj "ShortPixel") lub pobierz bezpośrednio ze strony ShortPixel.
Zarejestruj darmowe konto na shortpixel.com i skopiuj swój klucz API (dostępny po zalogowaniu w panelu).
Wklej klucz API w ustawieniach wtyczki (Ustawienia → ShortPixel). Kliknij "Validate".
Wybierz tryb kompresji: Glossy (zalecany — najlepsza równowaga jakość/rozmiar) lub Lossy (największa kompresja, minimalnie gorsza jakość).
Włącz WebP i AVIF w zakładce "WebP & AVIF". Wybierz metodę dostarczania (rekomendowana: .htaccess / Nginx redirect).
Uruchom Bulk Optimizer (Media → Bulk ShortPixel) — wtyczka zacznie przetwarzać obrazki z Twojej biblioteki mediów. Darmowy plan: 100/miesiąc.
Instalacja 5 minut, efekty widoczne natychmiast w PageSpeed Insights.
Checklist optymalizacji obrazków WordPress
Użyj tej listy jako mini-audytu swojej strony. Każdy punkt to konkretna poprawa szybkości i Core Web Vitals:
- Wszystkie nowe obrazki wgrywane jako WebP lub AVIF (nie JPEG/PNG)
- Stare obrazki skonwertowane do WebP/AVIF przez ShortPixel lub inną wtyczkę
- Rozmiary nie przekraczają zaleceń z tabeli powyżej
- Lazy loading włączony dla obrazków poniżej linii scrollu
- Brak lazy loading na obrazku LCP (hero/header) — użyty
fetchpriority="high" - Atrybut alt uzupełniony dla każdego obrazka (SEO + dostępność)
- Atrybuty width i height ustawione — zapobiega przeskakiwaniu layoutu (CLS)
- Logo strony jako SVG lub bardzo mały WebP
- Srcset i sizes skonfigurowane dla obrazków responsywnych
- LCP poniżej 2,5 sekundy w Google PageSpeed Insights
Najczęściej zadawane pytania
Najszybsza metoda to instalacja wtyczki ShortPixel lub Imagify, która automatycznie kompresuje obrazki i konwertuje je do WebP lub AVIF. Oprócz tego warto włączyć lazy loading (WordPress robi to domyślnie od wersji 5.5), używać odpowiednich rozmiarów i nie wgrywać zdjęć większych niż potrzeba.
Tak — WordPress obsługuje natywne przesyłanie plików WebP od wersji 5.8 (2021). Można bezpośrednio wgrywać pliki .webp do biblioteki mediów. Konwersję istniejących obrazków JPEG/PNG do WebP najłatwiej wykonać przez wtyczkę ShortPixel, Imagify lub Smush.
ShortPixel jest uznawany za jedną z najlepszych wtyczek do optymalizacji obrazków WordPress — obsługuje kompresję stratną, bezstratną i glossy, konwersję do WebP i AVIF, a przetwarzanie odbywa się w chmurze bez obciążania serwera. Darmowy plan obejmuje 100 obrazków miesięcznie.
WordPress automatycznie dodaje atrybut loading="lazy" do obrazków od wersji 5.5 (2020). Jeśli używasz starszej wersji lub chcesz mieć więcej kontroli, możesz użyć wtyczek takich jak a3 Lazy Load lub WP Rocket. Pamiętaj, żeby NIE dodawać lazy loading do obrazka LCP (hero, header) — spowolni to LCP.
Zalecane rozmiary: obrazek hero/baner max 200 KB w WebP (1920×600 px), zdjęcie produktu max 100 KB (800×800 px), miniaturka wpisu max 40 KB (400×300 px), logo max 10 KB (SVG lub WebP). Całkowita waga obrazków na stronie głównej nie powinna przekraczać 1 MB.