{"id":15382,"date":"2025-09-29T12:04:55","date_gmt":"2025-09-29T10:04:55","guid":{"rendered":"https:\/\/dhosting.pl\/pomoc\/?post_type=manual_kb&#038;p=15382"},"modified":"2025-09-29T12:04:55","modified_gmt":"2025-09-29T10:04:55","slug":"modern-image-formats-webp-i-avif-w-wordpress","status":"publish","type":"manual_kb","link":"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/","title":{"rendered":"Modern Image Formats &#8211; WebP i AVIF w WordPress"},"content":{"rendered":"<p><!-- Meta description: Jak skonfigurowa\u0107 wtyczk\u0119 Modern Image Formats w WordPress: WebP i AVIF, konwersja, CDN, cache, jako\u015b\u0107 obraz\u00f3w i Core Web Vitals. --><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-left counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Spis tre\u015bci<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Co_robi_wtyczka_i_kiedy_jej_potrzebujesz\" >Co robi wtyczka i kiedy jej potrzebujesz<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Jak_to_dziala_pod_maska\" >Jak to dzia\u0142a pod mask\u0105<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Instalacja_i_szybki_start_krok_po_kroku\" >Instalacja i szybki start krok po kroku<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Integracja_z_cache_CDN_i_serwerem\" >Integracja z cache, CDN i serwerem<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Responsive_images_i_obrazki_tla\" >Responsive images i obrazki t\u0142a<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Dobor_jakosci_i_wiernosc_obrazu\" >Dob\u00f3r jako\u015bci i wierno\u015b\u0107 obrazu<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Typowe_problemy_i_szybkie_diagnozy\" >Typowe problemy i szybkie diagnozy<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Pomiar_efektow_i_wplyw_na_Core_Web_Vitals\" >Pomiar efekt\u00f3w i wp\u0142yw na Core Web Vitals<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Bezpieczenstwo_i_zgodnosc_procesu\" >Bezpiecze\u0144stwo i zgodno\u015b\u0107 procesu<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/modern-image-formats-webp-i-avif-w-wordpress\/#Kiedy_nie_uzywac_tej_wtyczki_i_alternatywy\" >Kiedy nie u\u017cywa\u0107 tej wtyczki i alternatywy<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Co_robi_wtyczka_i_kiedy_jej_potrzebujesz\"><\/span>Co robi wtyczka i kiedy jej potrzebujesz<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Modern Image Formats automatycznie serwuje nowoczesne formaty obraz\u00f3w, przede wszystkim WebP i AVIF. Dzi\u0119ki temu skraca czas \u0142adowania stron, poprawia LCP i CLS, a w efekcie wspiera SEO i konwersje. Wtyczka konwertuje istniej\u0105ce pliki lub dostarcza alternatywne wersje tylko wtedy, gdy przegl\u0105darka je obs\u0142uguje. Dla u\u017cytkownik\u00f3w starszych przegl\u0105darek zachowuje bezpieczny fallback do JPEG lub PNG.<\/p>\n<p>Po w\u0142\u0105czeniu wtyczki nie musisz r\u0119cznie podmienia\u0107 adres\u00f3w grafik w tre\u015bci. Mechanizm przepisa\u0144 i integracja z funkcj\u0105 srcset sprawiaj\u0105, \u017ce WordPress automatycznie wybiera najlepsz\u0105 wersj\u0119 pliku. To najszybszy spos\u00f3b, aby zyska\u0107 przewag\u0119 wydajno\u015bci bez refaktoryzacji motywu.<\/p>\n<div id=\"dhost-1071606584\" class=\"dhost-inpost dhost-entity-placement\"><a href=\"https:\/\/dhosting.pl\/opieka-stron.html?utm_source=pomoc&utm_medium=artykul&utm_campaign=pomoc\" target=\"_blank\">\r\n\t<img decoding=\"async\" src=\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2025\/01\/baner-opieka.png\" alt=\"opieka stron www\">\r\n<\/a>\r\n<br \/>\r\n<br \/><\/div><h2><span class=\"ez-toc-section\" id=\"Jak_to_dziala_pod_maska\"><\/span>Jak to dzia\u0142a pod mask\u0105<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wtyczka mo\u017ce korzysta\u0107 z dw\u00f3ch podej\u015b\u0107. Pierwsze to konwersja masowa w bibliotece medi\u00f3w, kt\u00f3ra tworzy kopie WebP i AVIF dla poszczeg\u00f3lnych rozmiar\u00f3w zdj\u0119\u0107. Drugie to serwowanie na podstawie nag\u0142\u00f3wka Accept lub alternatywne adresowanie plik\u00f3w, tak aby CDN i cache mog\u0142y przechowywa\u0107 r\u00f3\u017cne warianty.<\/p>\n<p>Do generowania plik\u00f3w u\u017cywana jest biblioteka GD lub Imagick. Obs\u0142uga AVIF na serwerze zale\u017cy od dost\u0119pno\u015bci odpowiednich kodek\u00f3w, dlatego w panelu wtyczki warto sprawdzi\u0107 raport kompatybilno\u015bci. WordPress natywnie wspiera WebP w przesy\u0142aniu i przetwarzaniu medi\u00f3w, a w nowszych wersjach dodano tak\u017ce wsparcie dla AVIF, ale realnie decyduj\u0105 mo\u017cliwo\u015bci serwera.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Instalacja_i_szybki_start_krok_po_kroku\"><\/span>Instalacja i szybki start krok po kroku<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Zainstaluj wtyczk\u0119 z repozytorium WordPress lub wgraj paczk\u0119 ZIP. Po aktywacji przejd\u017a do jej ustawie\u0144 i w\u0142\u0105cz serwowanie WebP, a je\u015bli \u015brodowisko na to pozwala &#8211; tak\u017ce AVIF. Wybierz metod\u0119 dzia\u0142ania: konwersja przy przesy\u0142aniu, wsadowa konwersja istniej\u0105cych medi\u00f3w lub serwowanie on the fly.<\/p>\n<p>Nast\u0119pnie ustaw poziom jako\u015bci. Dla WebP zwykle sprawdza si\u0119 przedzia\u0142 70-82, a dla AVIF 45-60, ale zawsze testuj na swoich zdj\u0119ciach. Uruchom proces konwersji bibliotek i poczekaj, a\u017c zako\u0144czy si\u0119 dla najwa\u017cniejszych rozmiar\u00f3w miniatur. Na koniec sprawd\u017a stron\u0119 w trybie prywatnym i w narz\u0119dziach deweloperskich, por\u00f3wnuj\u0105c MIME type pobieranych obraz\u00f3w.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Integracja_z_cache_CDN_i_serwerem\"><\/span>Integracja z cache, CDN i serwerem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nowoczesne formaty najlepiej dzia\u0142aj\u0105 razem z cache stron i CDN. Je\u015bli wtyczka u\u017cywa negocjacji tre\u015bci, CDN powinien rozr\u00f3\u017cnia\u0107 \u017c\u0105dania po nag\u0142\u00f3wku Accept &#8211; ustaw odpowiednie regu\u0142y vary, aby unikn\u0105\u0107 mieszania wariant\u00f3w. Alternatywnie wybierz tryb osobnych plik\u00f3w, w kt\u00f3rym adresy zawieraj\u0105 rozszerzenie .webp lub .avif, co upraszcza cache na brzegu.<\/p>\n<p>Na serwerach Apache konieczne bywaj\u0105 wpisy w .htaccess, a w Nginx &#8211; regu\u0142y map i try_files. Gdy r\u00f3wnolegle dzia\u0142a wtyczka cache, w\u0142\u0105cz czyszczenie pami\u0119ci podr\u0119cznej po konwersji oraz po zmianach ustawie\u0144 jako\u015bci. Je\u015bli korzystasz z CDN, wyklucz \u015bcie\u017cki do narz\u0119dzi konwersji z minifikacji i zbyt agresywnych optymalizacji.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Responsive_images_i_obrazki_tla\"><\/span>Responsive images i obrazki t\u0142a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Modern Image Formats wsp\u00f3\u0142pracuje z atrybutami srcset i sizes, wi\u0119c przegl\u0105darka pobiera najmniejszy wystarczaj\u0105cy wariant. Po zmianie motywu lub rozmiar\u00f3w miniatur uruchom regeneracj\u0119, aby nowe wymiary mia\u0142y wersje WebP i AVIF. To szczeg\u00f3lnie wa\u017cne dla grafik w obszarach hero, kt\u00f3re cz\u0119sto odpowiadaj\u0105 za LCP.<\/p>\n<p>Obrazy u\u017cyte jako t\u0142a w CSS wymagaj\u0105 dodatkowej uwagi. Cz\u0119\u015b\u0107 motyw\u00f3w i builder\u00f3w generuje style inline, kt\u00f3re nie s\u0105 automatycznie podmieniane. Skorzystaj z opcji wtyczki dla background-image lub rozwa\u017c r\u0119czn\u0105 podmian\u0119 \u015bcie\u017cek w szablonach sekcji o du\u017cej wadze. Pami\u0119taj te\u017c o ikonach SVG &#8211; nie konwertujemy ich, ale mo\u017cemy je optymalizowa\u0107 osobno.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dobor_jakosci_i_wiernosc_obrazu\"><\/span>Dob\u00f3r jako\u015bci i wierno\u015b\u0107 obrazu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ni\u017cszy bitrate zwi\u0119ksza kompresj\u0119, lecz mo\u017ce wprowadza\u0107 artefakty. Dla zdj\u0119\u0107 z du\u017c\u0105 ilo\u015bci\u0105 detalu testuj WebP w okolicach 75, a AVIF nawet przy ni\u017cszych warto\u015bciach zachowuje dobr\u0105 ostro\u015b\u0107. Z kolei grafiki UI i z przezroczysto\u015bci\u0105 mog\u0105 wygl\u0105da\u0107 lepiej przy nieco wy\u017cszej jako\u015bci lub pozostaniu przy PNG.<\/p>\n<p>Por\u00f3wnuj efekty na krytycznych komponentach: zdj\u0119cia produktowe, slajdy, grafiki z tekstem. Unikaj konwersji bardzo ma\u0142ych ikon i piksel-artu, gdzie zysk jest znikomy. Je\u017celi zauwa\u017cysz banding w gradientach, podnie\u015b jako\u015b\u0107 lub pozostaw wybrane pliki w formacie \u017ar\u00f3d\u0142owym, dodaj\u0105c je do listy wyj\u0105tk\u00f3w.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Typowe_problemy_i_szybkie_diagnozy\"><\/span>Typowe problemy i szybkie diagnozy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Gdy pliki .webp lub .avif zwracaj\u0105 404, sprawd\u017a prawa do katalog\u00f3w z miniaturami oraz regu\u0142y przepisa\u0144. Brak AVIF zwykle oznacza, \u017ce serwer nie ma kodeka w Imagick lub GD &#8211; wtedy w\u0142\u0105cz tylko WebP. Je\u015bli po konwersji wy\u015bwietlaj\u0105 si\u0119 orygina\u0142y, winny bywa cache przegl\u0105darki albo CDN bez regu\u0142y vary.<\/p>\n<p>Konflikty z lazy-loadem to najcz\u0119\u015bciej efekt podw\u00f3jnej optymalizacji wielu wtyczek naraz. W sekcjach Above The Fold rozwa\u017c wy\u0142\u0105czenie op\u00f3\u017anionego \u0142adowania dla kluczowych hero images, aby poprawi\u0107 LCP. Kiedy Lighthouse raportuje &#8220;serve images in modern formats&#8221;, sprawd\u017a czy wszystkie rozmiary maj\u0105 warianty WebP lub AVIF oraz czy nie \u0142adujesz t\u0142a z CSS w starym formacie.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Pomiar_efektow_i_wplyw_na_Core_Web_Vitals\"><\/span>Pomiar efekt\u00f3w i wp\u0142yw na Core Web Vitals<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Po wdro\u017ceniu por\u00f3wnaj wagi zasob\u00f3w i czasy \u0142adowania. Zwr\u00f3\u0107 uwag\u0119 na LCP, INP i CLS, patrz\u0105c na raporty z realnych u\u017cytkownik\u00f3w. Modern Image Formats potrafi znacz\u0105co zmniejszy\u0107 transfer na stronach produktowych i blogowych, gdzie obraz\u00f3w jest najwi\u0119cej. Pami\u0119taj, aby testy wykonywa\u0107 na tych samych stronach, z wyczyszczonym cache i z wy\u0142\u0105czonymi innymi zmianami.<\/p>\n<p>Raporty z narz\u0119dzi wydajno\u015bciowych mog\u0105 si\u0119 r\u00f3\u017cni\u0107, dlatego zapisuj wyniki przed i po wraz z dat\u0105 i zestawem modyfikacji. Najbardziej miarodajne s\u0105 dane terenowe, ale szybkie sanity check z narz\u0119dzi laboratoryjnych pomaga wykry\u0107 oczywiste niedoci\u0105gni\u0119cia. Je\u015bli korzystasz z CDN z transkodowaniem na brzegu, upewnij si\u0119, \u017ce nie dublujesz tej funkcji z wtyczk\u0105.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bezpieczenstwo_i_zgodnosc_procesu\"><\/span>Bezpiecze\u0144stwo i zgodno\u015b\u0107 procesu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Konwersja obraz\u00f3w to operacje na plikach i procesorze, wi\u0119c zadbaj o limity i harmonogramy. Uruchamiaj wsadow\u0105 konwersj\u0119 poza godzinami szczytu, monitoruj\u0105c wykorzystanie CPU i przestrzeni dyskowej. Wtyczka zazwyczaj pomija orygina\u0142y i przechowuje alternatywne wersje obok nich, co u\u0142atwia wycofanie zmian bez ryzyka utraty danych.<\/p>\n<p>W procesie publikacji nowych tre\u015bci dodaj krok w checklistach autor\u00f3w: przesy\u0142anie obraz\u00f3w w rozs\u0105dnej rozdzielczo\u015bci, prawid\u0142owych proporcjach i z kompresj\u0105 startow\u0105. Lepszy wsad \u017ar\u00f3d\u0142owy oznacza szybsz\u0105 i wy\u017csz\u0105 jako\u015b\u0107 wynik\u00f3w po konwersji do WebP lub AVIF. Dodatkowo wyklucz z optymalizacji pliki z prawami licencyjnymi, kt\u00f3re nie pozwalaj\u0105 na modyfikacj\u0119.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Kiedy_nie_uzywac_tej_wtyczki_i_alternatywy\"><\/span>Kiedy nie u\u017cywa\u0107 tej wtyczki i alternatywy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Je\u015bli Tw\u00f3j CDN ju\u017c serwuje WebP i AVIF w locie, wtyczka mo\u017ce by\u0107 zb\u0119dna lub wr\u0119cz dublowa\u0107 dzia\u0142anie. W aplikacjach headless z pipeline CI lepiej utrzymywa\u0107 konwersj\u0119 w procesie budowania i publikowa\u0107 gotowe artefakty. Na hostingach o bardzo skromnych zasobach obci\u0105\u017cenie konwersj\u0105 mo\u017ce spowalnia\u0107 panel &#8211; wtedy wybierz tryb konwersji przy wgrywaniu lub ogranicz dzia\u0142anie do wybranych rozmiar\u00f3w.<\/p>\n<p>W serwisach, gdzie grafiki rzadko si\u0119 zmieniaj\u0105, jednorazowa konwersja i sta\u0142y cache na brzegu dadz\u0105 niemal ten sam efekt. Zawsze priorytetyzuj stabilno\u015b\u0107 i prostot\u0119 konfiguracji. Modern Image Formats najwi\u0119cej zysku przynosi tam, gdzie wolumen zdj\u0119\u0107 jest du\u017cy, a redakcja regularnie publikuje nowe wpisy.<\/p>\n","protected":false},"author":6,"featured_media":10957,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[118,5649],"manual_kb_tag":[6055,166,952,5648,4545,6054,4109,6056,1469,76,567,3537],"class_list":["post-15382","manual_kb","type-manual_kb","status-publish","format-standard","has-post-thumbnail","hentry","manualknowledgebasecat-pozostale","manualknowledgebasecat-wtyczki-wordpress","manual_kb_tag-avif","manual_kb_tag-cache","manual_kb_tag-cdn","manual_kb_tag-core-web-vitals","manual_kb_tag-konwersja","manual_kb_tag-modern-image-formats","manual_kb_tag-optymalizacja-obrazow","manual_kb_tag-srcset","manual_kb_tag-webp","manual_kb_tag-wordpress","manual_kb_tag-wtyczka","manual_kb_tag-wydajnosc"],"_links":{"self":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/15382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":1,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/15382\/revisions"}],"predecessor-version":[{"id":15383,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/15382\/revisions\/15383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media\/10957"}],"wp:attachment":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media?parent=15382"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manualknowledgebasecat?post=15382"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb_tag?post=15382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}