Spis treści
Co robi wtyczka i kiedy jej potrzebujesz
Modern Image Formats automatycznie serwuje nowoczesne formaty obrazów, przede wszystkim WebP i AVIF. Dzięki temu skraca czas ładowania stron, poprawia LCP i CLS, a w efekcie wspiera SEO i konwersje. Wtyczka konwertuje istniejące pliki lub dostarcza alternatywne wersje tylko wtedy, gdy przeglądarka je obsługuje. Dla użytkowników starszych przeglądarek zachowuje bezpieczny fallback do JPEG lub PNG.
Po włączeniu wtyczki nie musisz ręcznie podmieniać adresów grafik w treści. Mechanizm przepisań i integracja z funkcją srcset sprawiają, że WordPress automatycznie wybiera najlepszą wersję pliku. To najszybszy sposób, aby zyskać przewagę wydajności bez refaktoryzacji motywu.
Jak to działa pod maską
Wtyczka może korzystać z dwóch podejść. Pierwsze to konwersja masowa w bibliotece mediów, która tworzy kopie WebP i AVIF dla poszczególnych rozmiarów zdjęć. Drugie to serwowanie na podstawie nagłówka Accept lub alternatywne adresowanie plików, tak aby CDN i cache mogły przechowywać różne warianty.
Do generowania plików używana jest biblioteka GD lub Imagick. Obsługa AVIF na serwerze zależy od dostępności odpowiednich kodeków, dlatego w panelu wtyczki warto sprawdzić raport kompatybilności. WordPress natywnie wspiera WebP w przesyłaniu i przetwarzaniu mediów, a w nowszych wersjach dodano także wsparcie dla AVIF, ale realnie decydują możliwości serwera.
Instalacja i szybki start krok po kroku
Zainstaluj wtyczkę z repozytorium WordPress lub wgraj paczkę ZIP. Po aktywacji przejdź do jej ustawień i włącz serwowanie WebP, a jeśli środowisko na to pozwala – także AVIF. Wybierz metodę działania: konwersja przy przesyłaniu, wsadowa konwersja istniejących mediów lub serwowanie on the fly.
Następnie ustaw poziom jakości. Dla WebP zwykle sprawdza się przedział 70-82, a dla AVIF 45-60, ale zawsze testuj na swoich zdjęciach. Uruchom proces konwersji bibliotek i poczekaj, aż zakończy się dla najważniejszych rozmiarów miniatur. Na koniec sprawdź stronę w trybie prywatnym i w narzędziach deweloperskich, porównując MIME type pobieranych obrazów.
Integracja z cache, CDN i serwerem
Nowoczesne formaty najlepiej działają razem z cache stron i CDN. Jeśli wtyczka używa negocjacji treści, CDN powinien rozróżniać żądania po nagłówku Accept – ustaw odpowiednie reguły vary, aby uniknąć mieszania wariantów. Alternatywnie wybierz tryb osobnych plików, w którym adresy zawierają rozszerzenie .webp lub .avif, co upraszcza cache na brzegu.
Na serwerach Apache konieczne bywają wpisy w .htaccess, a w Nginx – reguły map i try_files. Gdy równolegle działa wtyczka cache, włącz czyszczenie pamięci podręcznej po konwersji oraz po zmianach ustawień jakości. Jeśli korzystasz z CDN, wyklucz ścieżki do narzędzi konwersji z minifikacji i zbyt agresywnych optymalizacji.
Responsive images i obrazki tła
Modern Image Formats współpracuje z atrybutami srcset i sizes, więc przeglądarka pobiera najmniejszy wystarczający wariant. Po zmianie motywu lub rozmiarów miniatur uruchom regenerację, aby nowe wymiary miały wersje WebP i AVIF. To szczególnie ważne dla grafik w obszarach hero, które często odpowiadają za LCP.
Obrazy użyte jako tła w CSS wymagają dodatkowej uwagi. Część motywów i builderów generuje style inline, które nie są automatycznie podmieniane. Skorzystaj z opcji wtyczki dla background-image lub rozważ ręczną podmianę ścieżek w szablonach sekcji o dużej wadze. Pamiętaj też o ikonach SVG – nie konwertujemy ich, ale możemy je optymalizować osobno.
Dobór jakości i wierność obrazu
Niższy bitrate zwiększa kompresję, lecz może wprowadzać artefakty. Dla zdjęć z dużą ilością detalu testuj WebP w okolicach 75, a AVIF nawet przy niższych wartościach zachowuje dobrą ostrość. Z kolei grafiki UI i z przezroczystością mogą wyglądać lepiej przy nieco wyższej jakości lub pozostaniu przy PNG.
Porównuj efekty na krytycznych komponentach: zdjęcia produktowe, slajdy, grafiki z tekstem. Unikaj konwersji bardzo małych ikon i piksel-artu, gdzie zysk jest znikomy. Jeżeli zauważysz banding w gradientach, podnieś jakość lub pozostaw wybrane pliki w formacie źródłowym, dodając je do listy wyjątków.
Typowe problemy i szybkie diagnozy
Gdy pliki .webp lub .avif zwracają 404, sprawdź prawa do katalogów z miniaturami oraz reguły przepisań. Brak AVIF zwykle oznacza, że serwer nie ma kodeka w Imagick lub GD – wtedy włącz tylko WebP. Jeśli po konwersji wyświetlają się oryginały, winny bywa cache przeglądarki albo CDN bez reguły vary.
Konflikty z lazy-loadem to najczęściej efekt podwójnej optymalizacji wielu wtyczek naraz. W sekcjach Above The Fold rozważ wyłączenie opóźnionego ładowania dla kluczowych hero images, aby poprawić LCP. Kiedy Lighthouse raportuje “serve images in modern formats”, sprawdź czy wszystkie rozmiary mają warianty WebP lub AVIF oraz czy nie ładujesz tła z CSS w starym formacie.
Pomiar efektów i wpływ na Core Web Vitals
Po wdrożeniu porównaj wagi zasobów i czasy ładowania. Zwróć uwagę na LCP, INP i CLS, patrząc na raporty z realnych użytkowników. Modern Image Formats potrafi znacząco zmniejszyć transfer na stronach produktowych i blogowych, gdzie obrazów jest najwięcej. Pamiętaj, aby testy wykonywać na tych samych stronach, z wyczyszczonym cache i z wyłączonymi innymi zmianami.
Raporty z narzędzi wydajnościowych mogą się różnić, dlatego zapisuj wyniki przed i po wraz z datą i zestawem modyfikacji. Najbardziej miarodajne są dane terenowe, ale szybkie sanity check z narzędzi laboratoryjnych pomaga wykryć oczywiste niedociągnięcia. Jeśli korzystasz z CDN z transkodowaniem na brzegu, upewnij się, że nie dublujesz tej funkcji z wtyczką.
Bezpieczeństwo i zgodność procesu
Konwersja obrazów to operacje na plikach i procesorze, więc zadbaj o limity i harmonogramy. Uruchamiaj wsadową konwersję poza godzinami szczytu, monitorując wykorzystanie CPU i przestrzeni dyskowej. Wtyczka zazwyczaj pomija oryginały i przechowuje alternatywne wersje obok nich, co ułatwia wycofanie zmian bez ryzyka utraty danych.
W procesie publikacji nowych treści dodaj krok w checklistach autorów: przesyłanie obrazów w rozsądnej rozdzielczości, prawidłowych proporcjach i z kompresją startową. Lepszy wsad źródłowy oznacza szybszą i wyższą jakość wyników po konwersji do WebP lub AVIF. Dodatkowo wyklucz z optymalizacji pliki z prawami licencyjnymi, które nie pozwalają na modyfikację.
Kiedy nie używać tej wtyczki i alternatywy
Jeśli Twój CDN już serwuje WebP i AVIF w locie, wtyczka może być zbędna lub wręcz dublować działanie. W aplikacjach headless z pipeline CI lepiej utrzymywać konwersję w procesie budowania i publikować gotowe artefakty. Na hostingach o bardzo skromnych zasobach obciążenie konwersją może spowalniać panel – wtedy wybierz tryb konwersji przy wgrywaniu lub ogranicz działanie do wybranych rozmiarów.
W serwisach, gdzie grafiki rzadko się zmieniają, jednorazowa konwersja i stały cache na brzegu dadzą niemal ten sam efekt. Zawsze priorytetyzuj stabilność i prostotę konfiguracji. Modern Image Formats najwięcej zysku przynosi tam, gdzie wolumen zdjęć jest duży, a redakcja regularnie publikuje nowe wpisy.
