PageSpeed Insights wyświetla rekomendację „Serve images in next-gen formats", a obrazy na stronie wciąż są w JPEG. Konwersja wszystkiego do WebP nie jest trudna. Trudność leży gdzie indziej: niewielki odsetek odwiedzających ze starszymi przeglądarkami zobaczy uszkodzone obrazy, jeśli po prostu zastąpi się format na serwerze.

Zadanie nie polega na konwersji, lecz na selektywnym serwowaniu: WebP dla tych, którzy go obsługują, i oryginał dla reszty. W WordPress rozwiązuje się to na trzy różne sposoby, każdy dopasowany do swojego stacku i budżetu.

💡 Szybki przegląd:

• Proszę zrozumieć, czym jest WebP i dlaczego jest lepszy od JPEG
• Proszę poznać dwa podejścia do serwowania WebP
• Proszę wybrać jedną z trzech metod pod swój stack i budżet
• Proszę skonfigurować wtyczkę i sprawdzić wynik w Chrome DevTools

Czym jest WebP i dlaczego jest potrzebny

WebP, format obrazów od Google, który kompresuje lepiej niż JPEG i PNG przy tej samej jakości wizualnej. Obraz o rozmiarze 100 KB w WebP waży 55-75 KB. Żadnej magii: po prostu efektywniejszy algorytm kompresji.

Format nie jest nowy. Specyfikację opublikował Google w 2010 roku. Od tego czasu WebP przeszedł drogę od eksperymentu do standardu: kompresja stratna i bezstratna, przezroczystość, animacja. W istocie łączy możliwości JPEG, PNG i GIF w jednym kontenerze.

Szybkie porównanie z tradycyjnymi formatami:

Różnica w rozmiarze jest odczuwalna. Dla witryny z pół setką obrazów na stronie przejście na WebP zmniejsza całkowitą wagę wielokrotnie. Wpływ na Core Web Vitals i pozycje w wynikach wyszukiwania jest bezpośredni.

Dlaczego nie można po prostu wszędzie włączyć WebP

Odpowiedź sprowadza się do kompatybilności. Dziś WebP obsługuje ponad 96% przeglądarek: Chrome, Firefox, Safari (od iOS 14), Edge. Pozostaje jednak niewielki odsetek starych urządzeń, które nie rozumieją tego formatu.

Jeśli po prostu zastąpi się wszystkie JPEG plikami WebP na serwerze, te kilka procent odwiedzających zobaczy uszkodzone obrazy. Dla witryny komercyjnej czy sklepu internetowego taka utrata użytkowników jest nie do zaakceptowania.

Dlatego zadanie sprowadza się nie do „przekonwertować obrazy", lecz do „serwować WebP tym, którzy go obsługują, a oryginał reszcie".

Dwa podstawowe podejścia do serwowania WebP

Zanim przejdziemy do metod dla WordPressa, warto zrozumieć, jak przeglądarka i serwer uzgadniają format. Mechanizmy są tylko dwa.

Podejście 1: znacznik

Przeglądarce proponuje się wybór między WebP a oryginałem bezpośrednio w znacznikach HTML:

1
<picture>
2
  <source srcset="img.webp" type="image/webp">
3
  <source srcset="img.jpg" type="image/jpeg">
4
  <img src="img.jpg" alt="Описание изображения">
5
</picture>

Przeglądarka z obsługą WebP pobierze pierwszy <source>. Reszta zignoruje źródło WebP i załaduje JPEG z <img>.

Plus: działa bez konfiguracji serwera i z dowolnym CDN. Minus: nie działa z obrazami tła w CSS i zmienia strukturę HTML. Niektóre wtyczki cache i leniwego ładowania potykają się o <picture>.

Podejście 2: zróżnicowana odpowiedź (Varied Response)

W HTML pozostaje zwykły <img src="img.jpg">, ale serwer pod tym samym adresem URL serwuje różną zawartość: przeglądarce z obsługą WebP plik WebP, reszcie JPEG.

Kluczem do mechanizmu jest nagłówek HTTP Accept. Przeglądarka wysyła go z każdym żądaniem, serwer lub CDN podejmuje decyzję, co odesłać.

Plus: działa wszędzie, w tym z obrazami tła w CSS. HTML nie ulega zmianie. Minus: wymagana jest konfiguracja serwera i nie każdy CDN prawidłowo uwzględnia Accept w kluczu cache.

Porównajmy:

Teraz zobaczmy, jak te podejścia stosuje się w WordPressie.

Metoda 1: CDN z konwersją do WebP w locie

Najprostsza ścieżka. Podłącza się CDN, który w locie optymalizuje obrazy i serwuje WebP przeglądarkom, które go obsługują. Przekonwertowane kopie nie są przechowywane na Pana serwerze, co daje oszczędność miejsca na dysku.

Kilka działających opcji:

• BunnyCDN z Bunny Optimizer, kompresuje i konwertuje obrazy w locie, obsługuje WebP w kluczu cache. Od 0,01 USD/GB.
• Cloudflare z Polish (plan Pro, 20 USD/mies.), automatyczna kompresja i konwersja do WebP.
• Cloudinary, wyspecjalizowany serwis do pracy z obrazami, WebP od ręki.
• ShortPixel Adaptive Images, wtyczka WordPress korzystająca z CDN bunny.net. Konwertuje i serwuje WebP automatycznie. Plan darmowy: 500 MB transferu miesięcznie.
• WP Compress, usługa hybrydowa: optymalizacja obrazów plus dostawa przez własny CDN.

Kiedy wybrać metodę 1: jeśli są Państwo gotowi płacić za CDN i nie chcą Państwo zajmować się konfiguracją serwera. Podpinają Państwo, włączają optymalizację i działa.

Metoda 2: Varied Response + CDN

Metoda dla tych, którzy wolą rozwiązać zadanie na poziomie serwera bez zmiany znaczników HTML.

Sedno: konfigurują Państwo serwer tak, aby pod jednym adresem URL serwował WebP lub JPEG/PNG w zależności od nagłówka Accept. Wszystkie adresy URL obrazów w kodzie pozostają niezmienione.

Konfiguracja przez WebP Express

Najprostszy sposób wdrożenia Varied Response w WordPressie, wtyczka WebP Express. Wtyczka ma ponad 400 000 aktywnych instalacji, regularne aktualizacje, aktywne wsparcie autora. Robi trzy rzeczy:

• Konwertuje przesłane obrazy do WebP.
• Zapisuje reguły przekierowania (.htaccess dla Apache/LiteSpeed lub reguły Nginx).
• Podczas żądania obrazu sprawdza nagłówek Accept i serwuje odpowiedni format.

Po instalacji wystarczy kliknąć „Zapisz ustawienia i zastosuj nowe reguły.htaccess". Wtyczka sama skonfiguruje konwerter i reguły.

Dla serwerów na Nginx

WebP Express generuje reguły dla .htaccess (Apache/LiteSpeed/OpenLiteSpeed). Jeśli mają Państwo Nginx, reguły trzeba wpisać w konfiguracji ręcznie:

1
## --- Nginx rules: try WebP first, fallback to converter
2
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
3
  add_header Vary Accept;
4
  expires 365d;
5
  if ($http_accept !~* "webp") {
6
    break;
7
  }
8
  try_files
9
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
10
    $uri.webp
11
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=$request_filename&wp-content=wp-content
12
    ;
13
}
14
 
15
## --- Route missing .webp requests to the realizer
16
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
17
    try_files
18
      $uri
19
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
20
      ;
21
}
22
## --- End WebP Express rules

Co robią reguły: dodają nagłówek Vary: Accept (aby CDN nie cache'ował WebP dla wszystkich), próbują serwować gotowy .webp, a jeśli go nie ma, wysyłają żądanie do konwertera.

Krytyczne: wybór CDN dla metody 2

Błąd, który psuje całą metodę: CDN cache'uje WebP i serwuje go przeglądarkom bez obsługi tego formatu. Dzieje się tak, gdy CDN nie uwzględnia nagłówka Accept w kluczu cache.

Dostawcy, którzy poprawnie obsługują Vary: Accept:

Bunny CDN, obsługa Varied Response włącza się w ustawieniach strefy.

• KeyCDN, również obsługuje WebP jako część klucza cache. Włącza się w ustawieniach strefy, sekcja Cache.

• Google CDN, domyślnie uwzględnia Vary: Accept.

W bezpłatnym planie Cloudflare nie ma pełnego uwzględniania Accept w kluczu cache. Skutek: WebP może trafić tam, gdzie nie jest obsługiwany. Są dwa wyjścia: przejść na plan Pro (20 USD/mies.) albo użyć CDN, który potrafi obsługiwać Vary: Accept od razu po włączeniu (BunnyCDN lub KeyCDN).

Zestawienie WebP Express + CDN u popularnych dostawców hostingu

Schemat dla wszystkich jest ten sam: instalują Państwo WebP Express, a następnie działają w zależności od środowiska serwerowego:

• Kinsta / WP Engine, proszę skontaktować się z pomocą techniczną. Inżynierowie dodadzą konfigurację Nginx dla WebP Express i włączą poprawny klucz cache WebP w ich CDN (KeyCDN w Kinsta).
• Cloudways, hybryda Apache+Nginx. WebP Express z zachowaniem .htaccess zazwyczaj wystarcza. Reguły są przechwytywane automatycznie.
• SiteGround, proszę poprosić pomoc techniczną o dodanie reguł Nginx i użyć kompatybilnego CDN.
• LiteSpeed / OpenLiteSpeed / Apache, tylko WebP Express i reguły .htaccess. Proszę wybrać CDN z obsługą Vary: Accept.
• Własny VPS z Nginx (LEMP), proszę ręcznie dodać powyższe reguły Nginx i podłączyć CDN z obsługą Vary: Accept.

Kiedy wybrać metodę 2: jeśli fundamentalnie nie chcą Państwo zmieniać znaczników HTML, występują obrazy tła w CSS i są Państwo gotowi jednorazowo skonfigurować serwer.

Metoda 3: przez tag

Wariant zapasowy, gdy dwie pierwsze nie pasują. Nie wymaga konfiguracji serwera, działa z każdym CDN. Wtyczka zastępuje standardowe tagi <img> konstrukcją <picture>, a przeglądarka sama wybiera format.

Wady metody:

• Nie działa z obrazami tła.
• Może kolidować z motywami i wtyczkami cache, które modyfikują wyjście <img>.
• Zmienia strukturę HTML, co czasem psuje wtyczki lazy loadingu.

Konfiguracja przez WebP Express

Ten sam WebP Express potrafi pracować w trybie <picture>. W ustawieniach wybierz tryb „CDN friendly" i włącz opcję „Alter HTML". Wtyczka w locie opakuje wszystkie <img> w <picture> ze źródłem WebP.

Kiedy wybrać metodę 3: jeśli nie ma dostępu do konfiguracji serwera, a CDN nie obsługuje Vary: Accept. Na przykład tani hosting z twardymi ograniczeniami lub darmowy Cloudflare.

Wideo: WebP w WordPress w 10 minut

Jeśli wygodniej jest Panu/Pani obejrzeć niż przeczytać, oto poglądowy tutorial z konfiguracji WebP przez WebP Express:

W filmie pokazano pełną konfigurację WebP Express od instalacji po weryfikację w Chrome DevTools. Przy okazji poruszono konwersję do AVIF jako następny krok po WebP.

⁉️🤔 Często zadawane pytania

WebP, czy to zawsze zmniejszenie rozmiaru?

Nie zawsze, ale w większości przypadków. Dla zdjęć i zrzutów ekranu oszczędność wynosi 25-50%, dane deweloperów Google. Dla obrazów z tekstem lub płaskimi kolorami WebP może okazać się nawet cięższy niż PNG-8. Dla obrazów treści WebP praktycznie zawsze daje zysk. Dla ikon i prostej grafiki optymalniejszy jest SVG lub zoptymalizowany PNG. Wtyczki takie jak WebP Express konwertują wszystko po kolei, wynik zależy od formatu źródłowego.

Czy można używać WebP bez wtyczek w WordPress?

Począwszy od WordPress 5.8, tak. Rdzeń przyjmuje pliki .webp podczas przesyłania do biblioteki mediów. Nie ma jednak automatycznej konwersji starych obrazów ani podmiany formatu pod przeglądarkę. Jeśli przesyła Pan/Pani tylko nowe obrazki w WebP i odpowiada Panu/Pani brak fallbacku dla niewielkiego odsetka starych przeglądarek, wtyczki nie są obowiązkowe. Do pełnego wdrożenia na istniejącej stronie bez wtyczki się nie obejdzie: potrzebna jest konwersja wsadowa i mechanizm podmiany formatu.

Jak sprawdzić, czy WebP jest serwowany poprawnie?

Proszę otworzyć stronę w Chrome, nacisnąć F12, zakładka Network, przefiltrować po Img. W kolumnie Type powinno być webp. Alternatywnie: w odpowiedzi serwera proszę szukać nagłówka X-WebP-Express (jeśli używa Pan/Pani WebP Express) lub content-type: image/webp. Chrome DevTools, to najpewniejszy sposób: filtruje Pan/Pani po obrazach i patrzy na kolumnę Type. Jeśli jest tam webp, wszystko działa.

Co zrobić, jeśli CDN cache'uje WebP niepoprawnie?

Symptom: część użytkowników widzi uszkodzone obrazki, choć w ustawieniach wszystko jest włączone. Rozwiązanie: proszę upewnić się, że CDN uwzględnia nagłówki Accept i Vary w kluczu cache. W panelach BunnyCDN i KeyCDN są do tego jawne przełączniki. Jeśli w kluczu cache nie ma Accept, pierwsze żądanie z Chrome utworzy kopię WebP i wszyscy kolejni użytkownicy, w tym Safari bez WebP, otrzymają właśnie tę kopię. Na Cloudflare nie ma darmowego rozwiązania: albo Pro, albo zmiana CDN.

WebP czy AVIF, co wybrać w 2026 roku?

AVIF daje jeszcze lepszą kompresję (o 20-30% mniejszy rozmiar niż WebP przy tej samej jakości), ale wsparcie przeglądarek na razie odstaje: około 92% wobec 96% dla WebP. W 2026 roku WebP pozostaje de facto standardem dla webu. AVIF dogania, ale różnica we wsparciu przeglądarek jest wciąż krytyczna dla projektów komercyjnych. Praktyczna strategia: WebP teraz, AVIF, gdy wsparcie przekroczy 95%.

Którą metodę wybrać do swojego zadania: podsumowanie

Wybór metody zależy nie od tego, która jest „lepsza w ogóle", ale od Pana/Pani konkretnego stacku i gotowości do poświęcenia czasu lub pieniędzy:

• Gotowość płacenia za CDN i nieruszania serwera, metoda 1 z BunnyCDN (od $0.01/GB) lub Cloudflare Pro ($20/mies.). Skonfigurowane w pięć minut i zapomniane.
• Jest dostęp do serwera i chce Pan/Pani rozwiązać problem raz na zawsze, metoda 2 z WebP Express i CDN obsługującym Vary: Accept. Działa z obrazami tła, nie rusza HTML.
• Nie ma dostępu do serwera, a budżet jest ograniczony, metoda 3 z WebP Express w trybie <picture>. Nieidealnie, ale lepiej niż całkiem bez WebP.

Proszę przetestować wybrany sposób na stage'u. Proszę sprawdzić w Chrome DevTools nagłówki odpowiedzi i kolumnę Type. Proszę upewnić się, że stare przeglądarki otrzymują JPEG, a nie uszkodzone linki. I dopiero wtedy wdrażać na produkcję.

Proszę wypróbować WebP Express, wtyczka pokrywa obie metody serwerowe od ręki i jest darmowa. Proszę napisać w komentarzach, które podejście Pan/Pani wybrał/a i na jakie problemy Pan/Pani natrafił/a.