Żeby obrazy nie spowalniały strony na WordPressie, wgrywaj je w rozsądnych wymiarach i serwuj w formacie WebP lub AVIF. Nie opóźniaj ładowania pierwszego dużego zdjęcia i pilnuj, żeby każdy obraz miał podane wymiary. Te zasady poprawiają dwa wskaźniki Google: LCP, czyli czas pokazania głównej treści, i CLS, czyli przeskakiwanie układu.

Co WordPress robi z obrazem po wgraniu

Z jednego wgranego pliku WordPress tworzy kilka kopii w różnych rozmiarach. Domyślnie są to:

  • miniatura 150 × 150 px, przycięta do kwadratu,
  • rozmiar średni, do 300 px,
  • rozmiar pośredni, do 768 px szerokości,
  • rozmiar duży, do 1024 px,
  • dwa rozmiary dodatkowe, do 1536 px i do 2048 px.

Jeśli dłuższy bok oryginału przekracza 2560 px, WordPress zmniejsza go i zapisuje jako plik z końcówką „-scaled”. Oryginał zostaje jednak na serwerze. Motyw i wtyczki dodają zwykle własne rozmiary, więc przy rozbudowanym motywie jedno zdjęcie daje kilkanaście plików.

Z tych kopii WordPress buduje atrybut srcset. Przeglądarka wybiera z niego plik dopasowany do szerokości ekranu. Telefon pobiera wtedy wersję 768 px zamiast pełnego zdjęcia.

Zdjęcie 6000 px prosto z aparatu nie daje więc żadnej korzyści. Zajmuje za to miejsce na dysku i w każdej kopii zapasowej.

WebP czy AVIF

Oba formaty dają mniejsze pliki niż JPEG i PNG przy tej samej jakości. WordPress obsługuje WebP od wersji 5.8, a AVIF od wersji 6.5. Według zespołu WordPressa plik AVIF bywa nawet o 50% mniejszy od JPEG o tej samej jakości.

  • WebP działa we wszystkich aktualnych przeglądarkach i szybko się koduje. To bezpieczny wybór domyślny.
  • AVIF daje zwykle mniejsze pliki, szczególnie przy zdjęciach. Kodowanie trwa dłużej i mocniej obciąża serwer przy wgrywaniu. Biblioteka graficzna na serwerze musi też obsługiwać ten format.

Obsługę AVIF na swoim hostingu sprawdzisz w panelu: Narzędzia, Stan witryny, zakładka Informacja, sekcja Obsługa mediów. AVIF musi być na liście obsługiwanych formatów.

WordPress sam z siebie nie zamienia JPEG na WebP ani AVIF. Wgrany JPEG zostaje JPEG-iem razem ze wszystkimi kopiami. Masz trzy drogi zmiany formatu:

  1. Filtr w motywie potomnym. Kilka linii kodu każe WordPressowi zapisywać kopie w innym formacie: add_filter( 'image_editor_output_format', function( $f ) { $f['image/jpeg'] = 'image/webp'; return $f; } );
  2. Wtyczka Modern Image Formats od zespołu wydajności WordPressa. Format wybierasz w Ustawienia, Media. Wtyczka potrafi też zapisać pliki zapasowe w starym formacie dla elementu picture.
  3. Konwersja na serwerze lub w CDN. Serwer sprawdza, jakie formaty akceptuje przeglądarka, i wysyła AVIF, WebP albo JPEG. Biblioteka mediów zostaje bez zmian.

Pierwsze dwie metody działają tylko dla nowych plików.

Stare obrazy przetworzysz poleceniem wp media regenerate w WP-CLI albo wtyczką do regeneracji miniatur. Przy dużej bibliotece uruchom to poza godzinami ruchu i po wykonaniu kopii zapasowej.

WordPress 7.1 z sierpnia 2026 r. przeniósł część obróbki zdjęć do przeglądarki. W Chrome i Edge od wersji 137 kompresja i miniatury powstają na komputerze osoby, która wgrywa plik. Format pliku się przy tym nie zmienia, dopóki nie ustawisz go filtrem opisanym wyżej.

Jakie wymiary i wagę plików przyjąć

Dla strony firmowej sprawdzają się proste progi:

  • Zdjęcie na całą szerokość ekranu: od 1920 do 2560 px szerokości, w WebP lub AVIF poniżej 300 KB.
  • Zdjęcie w treści wpisu: od 1200 do 1600 px, poniżej 150 KB.
  • Miniatury produktów i kafelki: od 600 do 800 px, poniżej 60 KB.
  • Logo i ikony: SVG, jeśli masz plik wektorowy. WordPress domyślnie blokuje wgrywanie SVG, bo plik może zawierać skrypt. Wtyczka, która go dopuszcza, musi oczyszczać plik przy wgrywaniu.
  • Zrzuty ekranu i grafiki z tekstem: WebP bezstratny albo PNG. Kompresja stratna rozmywa litery.

Domyślna jakość kompresji JPEG w WordPressie to 82 w skali do 100. Do większości zdjęć wystarcza. Jeśli fotograf zauważy artefakty, filtr wp_editor_set_quality podniesie tę wartość.

Lazy loading i LCP

LCP to czas, po którym pojawia się największy element widoczny na starcie. Google uznaje za dobry wynik do 2,5 s, mierzony dla 75% wizyt. Na stronach z dużym zdjęciem w nagłówku to ono zwykle jest elementem LCP.

Od wersji 5.5 WordPress dodaje do obrazów atrybut loading="lazy". Przeglądarka pobiera je dopiero wtedy, gdy zbliżają się do ekranu. Od wersji 6.3 WordPress pomija ten atrybut przy pierwszych obrazach na stronie. Obraz, który najpewniej będzie elementem LCP, dostaje fetchpriority="high". Według zespołu WordPressa sam ten atrybut poprawia LCP zwykle o 5 do 10%.

Kłopot zaczyna się, gdy coś te mechanizmy nadpisuje. Najczęstsze przypadki:

  • Wtyczka do leniwego ładowania oparta na JavaScript opóźnia też zdjęcie w nagłówku. Obraz czeka, aż skrypt się wczyta.
  • Slider w nagłówku ładuje wszystkie slajdy naraz albo wstawia pierwszy dopiero skryptem.
  • Zdjęcie w nagłówku jest tłem w CSS. Przeglądarka odkrywa je późno, a WordPress nie nada mu priorytetu.
  • Page builder włącza leniwe ładowanie na wszystkich obrazach, łącznie z pierwszym. Więcej o takich skutkach piszemy przy page builderach i wydajności.

Sprawdzenie zajmuje minutę. W PageSpeed Insights znajdź w diagnostyce element LCP. Jeśli to obraz z loading="lazy", masz pierwszą poprawkę do zrobienia. Narzędzia do pomiaru i ich odczyt opisujemy w poradniku optymalizacji WordPress.

WordPress 6.7 dodał jeszcze sizes="auto" dla obrazów ładowanych leniwie. Przeglądarka dobiera wtedy plik z srcset do faktycznej szerokości obrazu na stronie. Pobiera mniej danych bez żadnej konfiguracji.

CLS, czyli skaczący układ strony

CLS mierzy, jak bardzo elementy strony przesuwają się podczas ładowania. Dobry wynik to 0,1 lub mniej. Najczęstsza przyczyna to obraz bez wymiarów. Przeglądarka nie rezerwuje dla niego miejsca, a po pobraniu pliku spycha tekst w dół.

WordPress sam dodaje atrybuty width i height do obrazów wstawionych w edytorze. Problem robią obrazy wstawione inną drogą:

  • logo i banery wpisane w szablon motywu bez wymiarów,
  • obrazy dodawane skryptem, na przykład w karuzelach produktów,
  • banery reklamowe i okna zgód bez zarezerwowanego miejsca,
  • grafiki w widżetach page buildera, który gubi wymiary.

Poprawka jest zwykle prosta. Wymiary w HTML albo właściwość CSS aspect-ratio rezerwują miejsce, zanim plik dotrze do przeglądarki.

CDN dla obrazów

CDN przechowuje kopie plików na serwerach bliżej odwiedzających. Firma sprzedająca w Polsce, z serwerem w Polsce, zyska na samej odległości niewiele. Więcej daje CDN, który przerabia obrazy w locie.

Taki CDN czyta nagłówek przeglądarki i wysyła AVIF, WebP albo JPEG, zależnie od tego, co obsługuje. Potrafi też zmniejszyć obraz do wymiaru podanego w adresie. Przed wyborem sprawdź trzy rzeczy:

  1. jak liczona jest opłata: za liczbę przekształceń, za transfer czy ryczałtem,
  2. czy adresy obrazów przechodzą na domenę CDN i co to oznacza dla wyników w wyszukiwarce grafik,
  3. czy CDN czyści swoją kopię po podmianie pliku w bibliotece mediów.

CDN nie naprawi wolnego serwera. Parametry, na które warto patrzeć przy wyborze, opisujemy w tekście o hostingu dla WordPress i WooCommerce.

Porządki w bibliotece mediów

Po kilku latach biblioteka mediów liczy często tysiące plików, a strona używa tylko części. Każdy plik to kilka kopii w różnych rozmiarach. Rosną przez to kopie zapasowe i wydłuża się ich przywracanie.

Porządki rób w tej kolejności:

  1. Wykonaj pełną kopię zapasową plików i bazy danych.
  2. Uruchom wp media regenerate. Polecenie tworzy kopie w rozmiarach zarejestrowanych dziś i domyślnie kasuje stare, na przykład po poprzednim motywie. Jeśli do starych plików prowadzą linki z zewnątrz, dodaj opcję --skip-delete.
  3. Znajdź nieużywane pliki wtyczką lub zapytaniem do bazy.
  4. Nie kasuj ich od razu. Przenieś je na 30 dni do osobnego katalogu.
  5. Przez ten czas sprawdzaj w logach serwera błędy 404 na obrazach. Dopiero potem usuń pliki na stałe.

Ostrożnie z wtyczkami, które same „wykrywają nieużywane media”. Często nie widzą obrazów wpisanych w pola ACF, ustawienia page buildera albo arkusze CSS. Usunięcie takiego pliku psuje stronę w miejscu, którego nikt nie sprawdzi od razu.

Przy okazji uzupełnij teksty alternatywne. Atrybut alt opisuje obraz osobom korzystającym z czytników ekranu i pomaga w wyszukiwarce grafik. Wymagania opisujemy w tekście o dostępności stron na WordPressie.

Najczęstsze pytania

Czy WebP i AVIF działają we wszystkich przeglądarkach?

WebP działa we wszystkich aktualnych przeglądarkach. AVIF obsługują aktualne wersje Chrome, Edge, Firefox i Safari, ale starsze iPhone'y z systemem sprzed iOS 16 go nie wyświetlą. Jeśli masz takich odwiedzających, serwuj AVIF z plikiem zapasowym przez element picture albo przez CDN.

Czy wtyczka do kompresji obrazów wystarczy?

Wtyczka zmniejszy wagę plików. Nie poprawi jednak leniwego ładowania obrazu LCP, braku wymiarów ani zbyt dużych zdjęć wstawionych w szablon. Te problemy siedzą w motywie i w sposobie wstawiania obrazów, więc kompresja to jeden krok z kilku.

Ile powinno ważyć zdjęcie na stronie?

Zdjęcie na całą szerokość ekranu w WebP lub AVIF zmieścisz zwykle w 300 KB, a zdjęcie w treści wpisu w 150 KB. Ważniejsze od wagi jest to, czy przeglądarka pobiera wersję dopasowaną do ekranu. Dlatego wstawiaj obrazy z biblioteki mediów, żeby WordPress zbudował dla nich srcset.

Czy usunięcie nieużywanych obrazów przyspieszy stronę?

Nie bezpośrednio. Odwiedzający pobiera tylko obrazy z oglądanej podstrony, więc rozmiar biblioteki nie zmienia czasu ładowania. Porządki skracają za to kopie zapasowe, migracje i przywracanie strony po awarii.

Przy słabym wyniku LCP zacznij od sprawdzenia, który obraz jest elementem LCP i czy nie ładuje się leniwie. Stałą opiekę nad stroną WordPress, z aktualizacjami testowanymi na kopii strony i monitoringiem dostępności 24/7, opisujemy na osobnej stronie.