Zdjęcie 6000×4000 px wgrane prosto z aparatu nie staje się lekkie tylko dlatego, że CSS wyświetla je w szerokości 700 px. WordPress generuje miniatury i obsługuje responsive images, ale motyw oraz wtyczki muszą korzystać z właściwych rozmiarów. Dobra optymalizacja obrazów zaczyna się przed formatem WebP czy AVIF: od wyboru realnych wymiarów i jakości.
Szybka odpowiedź
Sprawdź w Network, jaki plik faktycznie pobiera przeglądarka dla urządzenia mobilnego i desktopu. Jeśli hero ma 2500 KB, zacznij od niego. Wybierz odpowiedni format, skompresuj obraz i upewnij się, że srcset/sizes pozwalają przeglądarce wybrać mniejszy wariant. Obrazu LCP nie opóźniaj agresywnym lazy loadingiem.
Wymiary przed kompresją
Zmniejszenie zdjęcia z 6000 px do rozmiaru potrzebnego na stronie daje często większy efekt niż sama zmiana formatu. Zachowaj wersję źródłową poza serwisem, jeśli będzie potrzebna do druku. WordPress nie powinien być archiwum wszystkich oryginałów w maksymalnej rozdzielczości, jeśli użytkownik nigdy ich nie zobaczy.
WebP i AVIF
Nowoczesne formaty potrafią znacznie zmniejszyć plik przy podobnej jakości. Nie wybieraj jednak formatu wyłącznie na podstawie nazwy — sprawdź realny wynik dla konkretnego obrazu. AVIF bywa bardzo skuteczny dla fotografii, ale koszt kodowania i kompatybilność pipeline’u mogą być inne niż dla WebP.
Responsive images w WordPressie
WordPress generuje srcset, jeśli motyw używa jego mechanizmów obrazów. Problem pojawia się, gdy builder wstawia twardy URL do największego pliku albo CSS background-image omija srcset. Audytuj HTML, nie tylko bibliotekę mediów. To przeglądarka decyduje, który wariant pobierze na podstawie znaczników.
Lazy loading z głową
Obrazy poniżej pierwszego ekranu warto ładować później, ale element LCP powinien pojawić się szybko. Jeśli hero jest oznaczony lazy i przeglądarka odkrywa go późno, wynik LCP może się pogorszyć. Z kolei wyłączenie lazy dla wszystkich grafik zwiększy transfer. Priorytet dobieraj do położenia i roli obrazu.
Generowanie miniaturek i miejsce na dysku
Zmiana motywu lub dodanie pluginu może zarejestrować nowe rozmiary i wygenerować wiele wersji każdego pliku. Na dużej bibliotece mediów zajmuje to dużo dysku. Po zmianach sprawdź, które rozmiary są faktycznie używane i nie regeneruj całej biblioteki bez kopii oraz wolnej przestrzeni.
Jak potwierdzić, że naprawa naprawdę działa?
Po optymalizacji otwórz Network na mobile i desktopie i sprawdź, jaki wariant obrazu faktycznie został pobrany. Nie wystarczy zobaczyć plik WebP w bibliotece mediów. Zweryfikuj srcset, rozmiar transferu, wymiary renderowane i LCP. Dla galerii sprawdź również zoom/lightbox, ponieważ część rozwiązań potrzebuje większego pliku dopiero po interakcji.
Co obserwować po zmianie?
Monitoruj miejsce na dysku po generowaniu dodatkowych formatów. Jeśli dla każdego obrazu tworzysz wiele rozmiarów JPEG, WebP i AVIF, biblioteka może urosnąć mimo mniejszych plików pojedynczych. Ustal retencję nieużywanych wariantów i procedurę regeneracji po zmianie motywu.
Kiedy przekazać temat dalej?
Eskaluj, gdy proces konwersji zużywa tyle CPU/RAM, że powoduje 5xx albo nie kończy się dla części obrazów. Wtedy warto przenieść przetwarzanie w tle, ograniczyć rozmiary wejściowe albo użyć wyspecjalizowanej usługi obrazu/CDN.
Praktyczny scenariusz diagnostyczny
Przykład: na desktopie hero wygląda dobrze, ale telefon pobiera ten sam plik 2500 px ważący ponad megabajt. Sprawdź, czy WordPress generuje warianty obrazu i czy przeglądarka dostaje poprawne srcset/sizes. Jeśli motyw ustawia obraz jako CSS background, automatyczne mechanizmy responsywne mogą nie zadziałać tak dobrze jak dla znacznika <img>. Przygotuj WebP/AVIF tam, gdzie jest to wspierane, ale nie ścigaj samego formatu — właściwy rozmiar i kompresja są równie ważne. Po zmianie przetestuj realny transfer na telefonie i element LCP. Unikaj też lazy-load dla obrazu znajdującego się natychmiast nad foldem, jeśli opóźnia jego pobranie. Optymalizacja obrazów ma skracać krytyczną ścieżkę renderowania, nie tylko poprawiać wynik w tabelce biblioteki mediów.
Bezpieczna kolejność działań
- Znajdź największe obrazy w Network/PageSpeed.
- Dopasuj realne wymiary do miejsca wyświetlania.
- Porównaj JPEG/PNG z WebP/AVIF dla jakości i rozmiaru.
- Sprawdź
srcset,sizesi zachowanie na mobile. - Nie stosuj lazy loadingu do kluczowego obrazu LCP.
- Po zmianie testuj jakość, CLS, LCP i miejsce na dysku.
Czego nie robić
Nie konwertuj całej biblioteki na nowy format bez backupu i testu. Nie usuwaj oryginałów, jeśli system generowania wariantów nadal ich potrzebuje. I nie stosuj lazy loadingu do każdego obrazu bez uwzględnienia pierwszego ekranu.
Powiązane poradniki HeatLogic
Potrzebujesz pomocy?
Jeśli galeria lub hero spowalnia stronę, możemy sprawdzić faktycznie pobierane warianty, skonfigurować nowoczesne formaty i responsive images oraz poprawić LCP bez widocznego pogorszenia jakości.
Najczęściej zadawane pytania
Czy WebP zawsze jest mniejszy od JPEG?
Często, ale nie zawsze. Warto porównać konkretne pliki i jakość zamiast automatycznie konwertować wszystko.
Czy AVIF jest lepszy od WebP?
Może dać lepszą kompresję dla części grafik, ale wybór zależy od pipeline’u, jakości, kosztu generowania i wsparcia środowiska.
Czy lazy loading przyspiesza stronę?
Dla obrazów poniżej pierwszego ekranu zwykle ogranicza początkowy transfer. Dla obrazu LCP może jednak pogorszyć wynik.
Czy WordPress sam tworzy srcset?
Tak dla obrazów używanych zgodnie z mechanizmami WordPressa, ale motyw lub builder może ten mechanizm ominąć.