Jak zoptymalizować obrazki pod WordPress, żeby przyspieszyć stronę

Duże, nieskompresowane zdjęcia to jedna z najczęstszych przyczyn wolnego ładowania się stron WordPress. Zanim zaczniesz szukać winowajcy w ustawieniach hostingu czy w cache’u, sprawdź obrazki – to zwykle miejsce, w którym da się odzyskać najwięcej sekund ładowania przy najmniejszym nakładzie pracy. Ten poradnik prowadzi krok po kroku przez cały proces: od sprawdzenia obecnego stanu, przez kompresję i konwersję do nowoczesnych formatów, po lazy loading i weryfikację efektu.

1. Sprawdź punkt wyjścia w PageSpeed Insights – wpisz adres swojej strony i zanotuj wynik oraz sekcje dotyczące obrazków, np. „Właściwie określ rozmiar obrazów” albo „Podawaj obrazy w formatach nowej generacji”. To będzie punkt odniesienia do porównania na koniec.
2. Ustal, w jakiej szerokości obrazek faktycznie wyświetla się na stronie – dla typowego wpisu na blogu to zwykle 800–1200 px, a nie pełna rozdzielczość zdjęcia z aparatu czy telefonu (często 3000–4000 px).
3. Zmniejsz wymiary obrazka do ustalonej wartości jeszcze przed wgraniem do WordPressa – możesz użyć darmowego narzędzia w przeglądarce, np. Squoosh.app, albo dowolnego edytora graficznego.
4. Skompresuj obrazek przed wgraniem – w tym samym narzędziu ustaw jakość na poziomie 70–80% dla plików JPG. Przy takiej wartości różnica gołym okiem jest praktycznie niewidoczna, a waga pliku spada nawet o połowę.
5. Zainstaluj w WordPressie wtyczkę do automatycznej optymalizacji obrazków, np. ShortPixel, Imagify albo EWWW Image Optimizer. Dzięki niej każdy kolejny wgrany plik zostanie skompresowany bez Twojego udziału.
6. W ustawieniach wtyczki włącz automatyczną konwersję nowych obrazków do formatu WebP (a jeśli wtyczka to obsługuje – również do AVIF). Oba formaty ważą znacznie mniej niż JPG czy PNG przy tej samej jakości wizualnej.
7. Uruchom w tej samej wtyczce funkcję masowej optymalizacji (bulk optimize), żeby objąć nią również zdjęcia, które już wcześniej trafiły do biblioteki mediów.
8. Sprawdź, czy lazy loading działa dla obrazków znajdujących się poniżej pierwszego ekranu. WordPress od wersji 5.5 dodaje atrybut loading="lazy" domyślnie, ale niektóre motywy lub wtyczki cache potrafią go nadpisywać – zajrzyj do kodu strony (Ctrl+U) i poszukaj tego atrybutu przy tagach <img>.
9. Upewnij się, że każdy obrazek ma w kodzie HTML ustawione atrybuty width i height. Bez nich przeglądarka nie zna proporcji obrazka z góry, przez co treść „skacze” podczas ładowania strony (tzw. CLS).
10. Dla głównego zdjęcia w pierwszym widoku (np. nagłówkowego) wyłącz lazy loading i – jeśli motyw na to pozwala – dodaj atrybut fetchpriority="high". Ten obrazek użytkownik widzi od razu, więc nie powinien czekać w kolejce ładowania.
11. Wyczyść cache strony oraz cache wtyczki optymalizującej po wprowadzeniu wszystkich zmian, żeby przeglądarka i ewentualny CDN zaczęły serwować nowe, mniejsze pliki zamiast starych wersji.
12. Zmierz efekt ponownie w PageSpeed Insights i porównaj wynik z tym zapisanym w kroku 1. Zwróć uwagę zwłaszcza na metryki LCP (czas wyświetlenia największego elementu) i CLS.

Co zrobić, gdy coś pójdzie nie tak

Wtyczka skonwertowała zdjęcia na WebP, ale strona nadal ładuje się wolno. Najczęściej winny jest cache – zarówno w przeglądarce, jak i po stronie hostingu czy CDN, jeśli z niego korzystasz. Wyczyść wszystkie warstwy cache (wtyczka cache, panel hostingowy, CDN) i sprawdź stronę w trybie incognito, żeby mieć pewność, że widzisz aktualną wersję.

Po kompresji obrazki wyglądają rozmazane albo mają przekłamane kolory. To znak, że poziom kompresji był zbyt agresywny. W ustawieniach wtyczki optymalizującej znajdź opcję jakości (quality) dla danego typu plików i podnieś ją o 10–15 punktów procentowych, a następnie uruchom ponowną optymalizację tylko dla tych konkretnych zdjęć.

Masowa optymalizacja zatrzymuje się w połowie biblioteki mediów. Na tańszych planach hostingowych bywa ograniczony czas wykonania skryptu PHP, co przerywa długi proces. Uruchamiaj optymalizację mniejszymi partiami (np. po 50–100 zdjęć) zamiast całej biblioteki naraz, a jeśli problem się powtarza, zapytaj dział wsparcia hostingu o limit max_execution_time dla Twojego konta.