AVIF czy WebP: który format obrazów wybrać w 2026

Jeśli prowadzisz sklep internetowy, blog albo katalog produktów, obrazy niemal na pewno zajmują najwięcej wagi na stronie. To właśnie one spowalniają ładowanie, zjadają transfer odwiedzających i psują oceny szybkości w wyszukiwarkach. Dobra wiadomość: w ostatnich latach pojawiły się formaty, które kompresują zdjęcia wielokrotnie mocniej niż zwykły JPG, a obraz wygląda tak samo. Zła wiadomość: jest ich od razu kilka, każdy ma swoje plusy i swoje pułapki, i wybór z marszu nie jest łatwy. W tym artykule wyjaśnimy, czym AVIF różni się od WebP, przy czym tu JPEG XL, kiedy używać którego formatu i jak wszystko ustawić tak, żeby było szybko u wszystkich odwiedzających bez wyjątku.

Wyobraź sobie dwa wyglądające identycznie zdjęcia produktu. Jedno waży 800 KB, drugie 180 KB. Dla oka różnicy nie ma, a dla strony jest ogromna. Na stronie katalogu zwykle jest 20-40 obrazów, i jeśli każdy jest zbędnie ciężki, strona rozrasta się do kilku megabajtów. Odwiedzający z telefonu na niezbyt szybkim internecie po prostu zamyka kartę, nie doczekawszy się załadowania. Według statystyk spora część ludzi opuszcza stronę, która ładuje się dłużej niż trzy sekundy, i najczęściej winne są właśnie ciężkie obrazy.

Szybkość ładowania od dawna jest czynnikiem rankingowym. Wyszukiwarki mierzą, jak szybko rysuje się główna treść strony, a obrazy są tu na pierwszym miejscu pod względem wpływu. Im lżejsze obrazy, tym szybciej pojawia się strona, tym większa szansa, że odwiedzający zostanie i coś kupi. Działa to w obie strony: szybka strona dostaje więcej odwiedzających z wyszukiwarki, a szybka strona lepiej zatrzymuje tych, którzy już przyszli. Obrazy w tym równaniu są niemal zawsze najsłabszym ogniwem, bo tekst i style ważą kilobajty, a jedno nieskompresowane zdjęcie może ważyć megabajt.

Jest też czysto finansowa strona sprawy. Każdy megabajt, który wysyłasz odwiedzającemu, to transfer. Na dużej stronie z tysiącami wejść dziennie waga obrazów bezpośrednio wpływa na koszty hostingu i na szybkość działania serwera. Zmniejszając obrazy dwukrotnie, dwukrotnie obniżasz obciążenie i koszty, nic nie tracąc na jakości obrazu.

Stary dobry JPG odsłużył swoje, ale pod względem skuteczności kompresji beznadziejnie odstaje. Nowoczesne formaty przy tej samej jakości wizualnej dają pliki dwa razy lżejsze i mniejsze. Pytanie tylko, który z nowych formatów wybrać i jak nie zepsuć strony dla tych, którzy mają stara przeglądarkę. Zróbmy to po kolei, bez zbędnej teorii, tylko to, co przyda się w praktyce.

Krótki słownik formatów, żeby dalej było jasno

Zanim zaczniemy porównywać, przejdźmy przez bohaterów opowieści. Jest ich pięciu, i każdy ma swoją rolę.

• JPG (czyli JPEG). Weteran od 1992 roku. Kompresja stratna, bez przezroczystości i animacji. Otwiera się absolutnie wszędzie, ale pod względem skuteczności beznadziejnie się zestarzał.
• PNG. Kompresja bezstratna, obsługuje przezroczystość. Niezastąpiony dla logotypów, ikon i grafiki z ostrymi liniami, ale zdjęcia w nim ważą bardzo dużo.
• WebP. Format od Google, pojawił się w 2010 roku, masowo przyjął się w połowie lat 2010. Umie i kompresję stratną, i bezstratną, plus przezroczystość i animację. Złoty środek pod względem zgodności.
• AVIF. Młody format oparty na kodeku wideo AV1, pojawił się w 2019 roku. Kompresuje mocniej niż wszystkie przy tej samej jakości, obsługuje przezroczystość, animację, rozszerzony kolor i HDR. Główna wada to wolne kodowanie.
• JPEG XL (JXL). Obiecujący nowicjusz, który umie prawie wszystko i jest wstecznie zgodny z JPG, ale na razie słabo obsługiwany przez przeglądarki. O nim osobno porozmawiamy niżej.

WebP pojawił się wcześniej niż nowocześni konkurenci i zdążył stać się praktycznie standardem. Jeśli chcesz jeden format, który po prostu działa wszędzie i nie sprawia kłopotów, to właśnie on.

Mocne strony WebP

• Niemal pełna obsługa przeglądarek. WebP rozumie ponad 97 procent przeglądarek na całym świecie. Obsługa pojawiła się w Chrome jeszcze w latach 2010-2014, w Firefoksie od wersji 65 (2019), w Safari od wersji 14 na macOS Big Sur (2020), a na iPhonie w pełni od iOS 14. To znaczy, że przytłaczająca większość Twoich odwiedzających zobaczy obraz bez żadnych sztuczek.
• Zauważalna oszczędność wagi. W porównaniu z JPG tej samej jakości WebP jest lżejszy o około 25-35 procent. Dla większości stron to już ogromny skok: strona, która ważyła 4 MB, zaczyna ważyć poniżej 2,5 MB.
• Szybkie kodowanie. Przekonwertować obraz do WebP jest szybko, wielokrotnie szybciej niż do AVIF. To krytyczne, gdy obrazy są konwertowane w locie, na przykład gdy użytkownik wgrywa awatar albo zdjęcie do opinii i czeka na wynik od razu.
• Obsługa przezroczystości i animacji. WebP umie i kanał alfa (przezroczyste tło), i animację, więc nadaje się i jako zamiennik PNG z przezroczystym tłem, i jako zamiennik ciężkich animacji GIF. Animowany WebP jest wielokrotnie lżejszy niż ten sam materiał w GIF.
• Tryb bezstratny. WebP ma też tryb lossless, bezpośredniego konkurenta PNG. Daje pliki średnio o 20-26 procent lżejsze niż PNG przy idealnie dokładnym zachowaniu pikseli, co świetnie pasuje do zrzutów ekranu i grafiki.
• Dojrzały ekosystem. Format istnieje wystarczająco długo, żeby wszystkie popularne systemy zarządzania treścią, wtyczki i narzędzia umiały z nim pracować bez kombinowania. Raczej nie natrafisz na to, że jakiś serwis go nie rozumie.

Gdzie WebP przegrywa

Główny zarzut wobec WebP to fakt, że istnieje format, który kompresuje jeszcze mocniej. Przy bardzo dużej liczbie obrazów (tysiące produktów w katalogu) każdy zaoszczędzony procent wagi zamienia się w realną oszczędność na transferze i w szybsze ładowanie. Gdy mowa o kilkudziesięciu obrazach, różnica między WebP a agresywniejszą kompresją jest prawie niezauważalna. Ale jeśli masz duży katalog albo galerię na setki zdjęć, te procenty składają się w dziesiątki i setki megabajtów, i tu WebP ustępuje.

Jeszcze jeden niuans: WebP stratny czasem nieco gorzej radzi sobie z bardzo płynnymi gradientami na dużych zdjęciach niż najnowocześniejszy format. W praktyce widać to rzadko i tylko przy silnej kompresji, ale warto o tym wiedzieć, jeśli pracujesz ze zdjęciami artystycznymi. WebP ma też techniczne ograniczenie rozmiaru: maksymalnie 16383 na 16383 piksele, co wystarcza prawie zawsze, ale gigantyczne panoramy się w nim nie zmieszczą.

Warto rozumieć, skąd w ogóle bierze się ta oszczędność. WebP używa mądrzejszych algorytmów przewidywania sąsiednich pikseli niż stary JPG i skuteczniej pakuje powtarzające się fragmenty obrazu. Mówiąc obrazowo, format lepiej zgaduje, jaki będzie następny kawałek obrazu, i przechowuje tylko różnicę, a nie wszystko po kolei. Dla użytkownika oznacza to jedno: ta sama wizualna ostrość przy mniejszej wadze, bez żadnych ustawień z jego strony.

Gdzie WebP szczególnie ratuje w praktyce

Jest kilka typowych scenariuszy, w których przejście na WebP daje najszybszy i najbardziej zauważalny efekt, przy tym niemal bez ryzyka coś zepsuć.

• Blog i artykuły informacyjne. Tu obrazy są głównie ilustracyjne, nie ma ich zbyt wiele, a maksymalna zgodność jest ważniejsza niż ostatni procent kompresji. WebP w pełni zamyka zadanie.
• Podglądy i miniatury w katalogu. Małe obrazy na liście, gdzie najważniejsze, żeby pojawiły się natychmiast i jednakowo u wszystkich. WebP koduje się szybko i ładuje szybko.
• Strony na gotowych platformach. Jeśli masz typowy system zarządzania treścią, przełączenie obrazów na WebP najczęściej robi się jednym gotowym rozwiązaniem, które automatycznie wysyła WebP tym, którzy go obsługują, a zwykły JPG pozostałym. To najprostsza droga do przyspieszenia bez pracy ręcznej.
• Zamiana ciężkich GIF-ów. Animowane banery i krótkie zapętlone materiały w GIF ważą potwornie dużo. Ten sam materiał w animowanym WebP jest lżejszy kilkukrotnie, a wygląda tak samo lub lepiej.

Dla wielu właścicieli stron samo przejście na WebP wystarcza, żeby zamknąć temat optymalizacji obrazów na najbliższe lata. Nie znaczy to, że AVIF jest niepotrzebny, po prostu WebP daje osiemdziesiąt procent efektu za dwadzieścia procent wysiłku, i rozsądnie jest od niego zacząć.

Wniosek co do WebP jest prosty: to bezpieczny domyślny wybór. Jeśli nie chcesz wnikać w niuanse i konfigurację rozwiązań zapasowych, przekonwertuj wszystko do WebP i już zyskasz większość korzyści z nowoczesnych formatów. Pomylić się tu praktycznie nie da, a dla ogromnej liczby stron sam WebP z nawiązką wystarcza, żeby radykalnie przyspieszyć ładowanie.

AVIF to nowszy format zbudowany na technologiach nowoczesnego kodowania wideo: używa kompresji wewnątrzklatkowej z kodeka AV1, tego samego, na którym działają nowoczesne streamingi. Jego główny atut to agresywna kompresja, i tu jest liderem.

Czym AVIF jest lepszy

• Najsilniejsza kompresja. Przy tej samej jakości wizualnej pliki AVIF są o 20-30 procent lżejsze niż WebP i o około 50 procent lżejsze niż JPG. Czyli AVIF może być dwa razy lżejszy od zwykłego obrazu JPG, a oko różnicy nie zauważy.
• Dobrze trzyma złożone obrazy. Na zdjęciach z płynnymi gradientami (niebo, skóra, rozmyte tło) AVIF niemal nie zostawia tych brzydkich artefaktów i kwadracików, którymi grzeszy JPG przy silnej kompresji. Zamiast kwadratowej blokowości daje miękkie rozmycie, które oko odbiera znacznie łagodniej.
• Przezroczystość i animacja. AVIF obsługuje kanał alfa (przezroczyste tło) i animację, tak jak WebP, więc może zastąpić i PNG, i GIF.
• Szeroki kolor i HDR. To coś, czego WebP nie ma wcale. AVIF umie 10- i 12-bitową głębię koloru, rozszerzone przestrzenie barwne i HDR. Dla katalogu butów to nieistotne, ale dla galerii zdjęć, portfolio fotografa albo strony o podróżach żywe, nasycone zdjęcia na nowoczesnych ekranach wyglądają zauważalnie bogaciej.
• Dobra praca przy niskich bitrate. Przy bardzo silnej kompresji AVIF rozpada się najładniej ze wszystkich: nawet gdy waga jest ściśnięta do granic, obraz pozostaje akceptowalny, podczas gdy JPG w tej samej sytuacji zamienia się w mozaikę.

Pułapki AVIF

• Wolne kodowanie. To główny minus. Przekonwertować obraz do AVIF jest 5-10 razy wolniej niż do WebP, a na maksymalnych ustawieniach jakości jeszcze bardziej. Dlaczego to ważne właśnie dla treści tworzonych przez użytkowników (UGC): gdy człowiek właśnie teraz wgrywa zdjęcie do opinii albo awatar i czeka, dodatkowe sekundy na kodowanie psują całe doświadczenie. Dla statycznych obrazów strony to nie problem, raz skonwertowałeś i zapomniałeś, ale dla przetwarzania w czasie rzeczywistym opóźnienie jest odczuwalne.
• Obsługa nieco niższa, ale już świetna. Do 2026 roku AVIF rozumie około 95 procent z okładem przeglądarek. Chrome obsługuje od wersji 85 (2020), Firefox od wersji 93 (2021), Safari od wersji 16 na iOS 16 i macOS Ventura (2022). To bardzo dobry wynik, ale wciąż o parę procent niższy niż u WebP. Znaczy to, że potrzebny jest wariant zapasowy dla tych, u których format się nie otwiera.
• Stare oprogramowanie nie otwiera. Wiele programów desktopowych, klientów pocztowych, komunikatorów i edytorów zdjęć wciąż nie umie otwierać AVIF. Jeśli odwiedzający pobierze taki obraz na komputer, może się on nie otworzyć w jego zwykłej przeglądarce. Dlatego AVIF jest dobry do pokazywania na stronie, ale jako plik do pobrania czy przesłania jest na razie dyskusyjny.
• Nieco wyższe wymagania zasobów przy wyświetlaniu. Rozpakowanie AVIF nieco mocniej obciąża procesor urządzenia niż WebP. Na nowoczesnych telefonach i komputerach jest to niezauważalne, ale na bardzo starych i słabych urządzeniach teoretycznie może odrobinę spowolnić rysowanie. Na tle korzyści w wadze to drobiazg, ale uczciwie warto o tym wspomnieć.

Żeby było bardziej obrazowo, wyobraźmy sobie typową kartę produktu z jednym zdjęciem 1200 na 1200 pikseli. W formacie JPG przyzwoitej jakości waży ono około 350 KB. Ten sam kadr w WebP to około 230 KB. A w AVIF to około 140 KB. Czyli AVIF jest tu lżejszy od JPG dwa i pół raza i lżejszy od WebP półtora raza. Pomnóż to przez setki produktów, a skala oszczędności staje się oczywista.

Jak skonwertować obrazy do AVIF i WebP

Sposobów jest kilka, a wybór zależy od tego, ile masz obrazów i jak bardzo chcesz zautomatyzować proces.

1. Konwerter online do zadań jednorazowych. Najprostsza droga, gdy trzeba przekonwertować kilka obrazów: wgrywasz obraz, dostajesz AVIF albo WebP, pobierasz i wgrywasz na stronę. Idealne dla obrazu pierwszego ekranu, banerów i kilkunastu kluczowych zdjęć. Nasze narzędzie do konwersji robi to prosto w przeglądarce, bez instalowania czegokolwiek.
2. Przetwarzanie wsadowe folderu. Jeśli obrazów są setki, warto przepuścić je paczką. Wiele konwerterów umie przyjąć cały folder i wydać gotowy zestaw plików w nowym formacie z tymi samymi nazwami.
3. Automatyzacja po stronie strony. Dla dużych katalogów rozsądnie jest ustawić, żeby strona sama tworzyła AVIF i WebP przy wgrywaniu każdego nowego obrazu i wysyłała odpowiedni wariant zależnie od typu przeglądarki. Wtedy o ręcznej konwersji można zapomnieć całkiem.

Na co zwracać uwagę przy konwersji: ustawiaj jakość w okolicy średnio-wysokiej, nie wykręcaj kompresji na maksimum dla dodatkowych kilobajtów (to daje rozmycie) i koniecznie zachowuj oryginał w JPG lub PNG jako rozwiązanie zapasowe. Rozmiar obrazu w pikselach też jest ważny: nie ma sensu trzymać zdjęcia o szerokości 4000 pikseli, jeśli na stronie pokazuje się w 800. Najpierw zmniejsz do potrzebnego rozmiaru, potem konwertuj, tak zysk będzie maksymalny.

W skrócie: AVIF stworzono do przypadków, gdzie najważniejsza jest minimalna waga, a Ty jesteś gotów poświęcić czas na jednorazową konwersję. To idealny format dla statycznych obrazów, które wgrywasz raz i pokazujesz tysiącom odwiedzających. Raz poświęciłeś kilka sekund na konwersję, a zysk w szybkości dostajesz przy każdym wyświetleniu strony, i tak miliony razy.

Żeby nie gubić się w parametrach, trzymaj się praktycznej zasady. Pokrywa niemal wszystkie realne sytuacje.

Ściąga: format pod typ treści

Jeśli trzeba zdecydować w parę sekund, kieruj się typem obrazu.

• Zdjęcia produktów w katalogu: AVIF z rozwiązaniem zapasowym WebP. Obrazów jest dużo, ładują się często, oszczędność maksymalna.
• Duże banery i okładki: AVIF. To najcięższe elementy, i najbardziej zyskują na agresywnej kompresji.
• Ikony, logotypy, prosta grafika: SVG, jeśli to możliwe, w przeciwnym razie PNG albo WebP bezstratny.
• Ilustracje w artykułach: WebP, przy dużych ilościach AVIF. Zgodność jest tu cenniejsza niż ekstremalna kompresja.
• Zdjęcia wgrywane przez użytkowników (UGC): WebP, bo ważne jest natychmiastowe przetwarzanie.
• Obrazy w mailach: tylko JPG albo PNG, nowych formatów poczta nie rozumie.
• Podglądy do sieci społecznościowych (og:image): JPG albo PNG, inaczej podgląd może się nie zbudować.
• Animacja: animowany WebP albo AVIF zamiast GIF, oszczędność wielokrotna.

Wybieraj AVIF, gdy

• Obrazy są statyczne i rzadko się zmieniają: zdjęcia produktów w katalogu, ilustracje w artykułach, banery, obrazy w nagłówku i stopce.
• Obrazów jest dużo, i każdy zaoszczędzony kilobajt mnoży się przez tysiące wyświetleń.
• Przygotowujesz obrazy z góry (raz skonwertowałeś przy wgrywaniu na stronę), a nie w locie.
• Potrzebne są żywe, nasycone zdjęcia z szerokim kolorem lub HDR, na przykład w portfolio czy galerii.
• Głównym celem jest wycisnąć maksimum szybkości i minimum transferu.

Wybieraj WebP, gdy

• Treść tworzą użytkownicy: awatary, zdjęcia w opiniach, obrazy wgrywane właśnie teraz, które muszą się przetworzyć natychmiast.
• Zależy Ci na prostocie i przewidywalności, bez zabawy z rozwiązaniami zapasowymi.
• Potrzebna jest maksymalnie szeroka zgodność przy minimum wysiłku.
• Obrazów nie ma aż tak dużo, żeby różnica w kompresji stała się decydująca.

Wybieraj PNG, gdy

• To logotyp, ikona, zrzut ekranu albo grafika z ostrymi liniami i płaszczyznami koloru.
• Potrzebna jest idealnie czysta przezroczystość bez najmniejszych artefaktów po krawędziach.
• Obraz będzie potem edytowany, i ważne jest zachowanie pikseli co do jednego.

Kiedy zostawić JPG

JPG pod względem kompresji się zestarzał, ale otwiera się absolutnie wszędzie, nawet w najstarszych programach i urządzeniach. Warto trzymać JPG tylko jako ostatnie rozwiązanie zapasowe dla wyjątkowych przypadków albo gdy obraz trzeba oddać do systemu, który nie rozumie nic nowego (na przykład przy wysyłce zdjęć produktów na niektóre platformy handlowe, które przyjmują tylko klasyczne formaty). Dla samej strony JPG jako główny format w 2026 roku już się nie wybiera.

A co z JPEG XL?

JPEG XL (JXL) to nowy format, na który wielu pokłada nadzieje, i nie bez powodu. Technicznie robi wrażenie: kompresuje mniej więcej na poziomie AVIF lub odrobinę lepiej na zdjęciach, koduje się szybciej niż AVIF, umie przezroczystość, animację, szeroki kolor i HDR, ładowanie progresywne (obraz proyawia się stopniowo, a nie z góry na dół) i, co szczególnie cenne, potrafi bezstratnie przekompresować istniejący JPG, ściskając go o około 20 procent i zachowując możliwość powrotu do oryginału. Brzmi jak idealny format.

Problem jest jeden, ale decydujący: obsługa przeglądarek. Na rok 2026 JPEG XL od razu rozumie Safari (od wersji 17), za to Chrome obsługę usunął, a Firefox włącza ją tylko za flagą. Znaczy to, że wysyłać JXL głównej masie odwiedzających na razie nie można bez niezawodnego rozwiązania zapasowego, i w praktyce gra częściej nie jest warta świeczki. Wniosek: trzymaj JPEG XL na radarze jako bardzo obiecujący format, ale dla działającej strony w 2026 roku stawka na AVIF plus WebP jest pewniejsza. Gdy tylko Chrome przywróci obsługę, obraz może się zmienić, i wtedy warto zrewidować strategię.

Sytuacje sporne

Czasem zadanie nie mieści się dokładnie w zasadzie. Oto częste rozwidlenia i jak je rozwiązywać.

• Katalog jest duży, ale zdjęcia wgrywają sami sprzedawcy. Tu rozsądny jest hybryda: przy wgrywaniu przyjmować dowolny format, w locie robić szybki WebP do natychmiastowego pokazania, a nocą procesem w tle przerabiać nazbierane do AVIF. Tak użytkownik nie czeka, a odwiedzający ostatecznie dostają najlżejszy wariant.
• Logotypy, ikony, prosta grafika z ostrymi liniami. Dla takich obrazów z małą liczbą kolorów często wciąż dobrze pasuje format grafiki wektorowej (SVG) albo PNG, a z rastrowych WebP w trybie bezstratnym. Zysk AVIF na prostej grafice jest mniejszy niż na zdjęciach.
• Obrazy do mailingów. Programy pocztowe słabo obsługują nowe formaty: ani na AVIF, ani na WebP w mailach nie można liczyć. Zostawiaj klasyczny JPG lub PNG. To ten przypadek, gdzie zgodność jest ważniejsza niż waga.
• Obrazy do sieci społecznościowych i podglądy linków. Roboty sieci społecznościowych, które budują podgląd przy udostępnieniu, często rozumieją tylko JPG i PNG. Obraz do og:image trzymaj w klasycznym formacie, inaczej podgląd może się nie pojawić.

Mity, przez które ludzie zwlekają z przejściem

Wokół nowych formatów nazbierało się kilka nieporozumień, które przeszkadzają ludziom zrobić prosty i opłacalny krok. Rozłóżmy najczęstsze.

• Mit: nowe formaty są gorsze jakościowo. Wręcz przeciwnie. Przy równej wadze AVIF i WebP wyglądają lepiej niż JPG, a przy równej jakości ważą mniej. Obraz wydaje się gorszy tylko jeśli wykręcić kompresję do granic, ale to problem ustawień, a nie formatu.
• Mit: to trudno wdrożyć. Na minimalnym poziomie to jeden konwerter online i zamiana pliku. Pełny schemat z picture jest odrobinę trudniejszy, ale robi się według szablonu, który podaliśmy wyżej, i potem po prostu się go kopiuje.
• Mit: połowa odwiedzających nie zobaczy obrazów. To prawda tylko jeśli wysyłać nowy format bez rozwiązania zapasowego. Z łańcuchem picture obraz gwarantowanie widzi sto procent odwiedzających, po prostu ktoś dostaje lekki AVIF, a ktoś zapasowy JPG.
• Mit: wyszukiwarki nie lubią nowych formatów. Dokładnie na odwrót, narzędzia do sprawdzania szybkości same rekomendują przejście na nowoczesne formaty, a szybka strona rankuje lepiej.
• Mit: skoro jest AVIF, WebP już niepotrzebny. Potrzebny, i to właśnie jako rozwiązanie zapasowe do AVIF, i jako szybki format do wgrywań użytkowników. Działają w parze.

Najbardziej eleganckie rozwiązanie to nie wybierać jednego formatu, a wysyłać każdej przeglądarce najlepszy z dostępnych jej. Przeglądarka sama dobierze pierwszy format, który rozumie, a resztę pominie. Robi się to tagiem picture.

Jak działa tag picture

Wewnątrz picture wymieniasz warianty od najskuteczniejszego do najbardziej zgodnego. Przeglądarka czyta je z góry na dół i bierze pierwszy pasujący.

• Jako pierwszy idzie AVIF, najlżejszy wariant. Jeśli przeglądarka go rozumie, załaduje właśnie jego.
• Jako drugi idzie WebP, na wypadek gdyby AVIF nie był obsługiwany.
• Na samym końcu zwykły tag img z JPG albo PNG, to zabezpieczenie dla całkiem starych przeglądarek.

Schemat wygląda tak:

``` <picture> <source srcset="foto.avif" type="image/avif"> <source srcset="foto.webp" type="image/webp"> <img src="foto.jpg" alt="Opis" width="800" height="600" loading="lazy" decoding="async"> </picture> ```

Ważny szczegół: atrybuty alt, width, height, loading i pozostałe wieszasz właśnie na tagu img wewnątrz picture, a nie na source. Tagi source odpowiadają tylko za wybór pliku, a cała reszta bierze się z końcowego img.

Co realnie dzieje się na stronie katalogu

Żeby korzyść nie została abstrakcją, policzmy na żywym przykładzie. Załóżmy, że strona katalogu pokazuje 30 zdjęć produktów po 1200 pikseli plus baner pierwszego ekranu.

• Było, wszystko w JPG: 30 zdjęć po 350 KB plus baner 500 KB, to około 11 MB samych obrazów. Na internecie mobilnym taka strona otwiera się boleśnie długo, i spora część odwiedzających odchodzi wcześniej.
• Jest, wszystko w AVIF z zapasowym WebP: 30 zdjęć po 140 KB plus baner 200 KB, to około 4,4 MB. Waga spadła ponad dwukrotnie, i to bez najmniejszej utraty jakości obrazu na oko.

Ponad sześć zaoszczędzonych megabajtów na jednej stronie to nie tylko szybkie ładowanie dla odwiedzającego, ale i mniej transferu po stronie serwera, i lepsza ocena w narzędziach sprawdzania szybkości. Jeśli masz tysiące wyświetleń dziennie, oszczędność transferu w skali miesiąca liczy się w dziesiątkach i setkach gigabajtów.

Plan wdrożenia krok po kroku

1. Przygotuj wersje obrazów. Dla każdego obrazu zrób po dwie kopie: AVIF i WebP. Oryginalny JPG lub PNG zostaw jako ostatnie rozwiązanie zapasowe.
2. Wpisz width i height u tagu img. To rezerwuje miejsce pod obraz i nie pozwala stronie skakać przy ładowaniu, co przy okazji poprawia ocenę stabilności układu (metrykę CLS).
3. Dodaj loading lazy dla obrazów poniżej pierwszego ekranu. Będą doładowywane dopiero, gdy odwiedzający do nich doscrolluje, a pierwszy ekran otworzy się jeszcze szybciej.
4. Nie ustawiaj lazy na głównym obrazie pierwszego ekranu. Przeciwnie, warto dodać mu fetchpriority high, żeby przeglądarka załadowała go w pierwszej kolejności i pojawił się jak najwcześniej.
5. Sprawdź w różnych przeglądarkach. Upewnij się, że wszędzie obraz się wyświetla, a przy tym nowoczesne przeglądarki rzeczywiście pobierają lekki AVIF. Łatwo to sprawdzić w zakładce Network w narzędziach deweloperskich: zobacz, jaki konkretnie plik się załadował.

Wpływ na PageSpeed, Core Web Vitals i SEO

Przejście obrazów na nowoczesne formaty bezpośrednio uderza w najważniejsze metryki szybkości, które uwzględnia wyszukiwarka.

• LCP (rysowanie największego elementu). Najczęściej największym elementem na ekranie jest właśnie obraz pierwszego ekranu. Jeśli waży nie 350 KB w JPG, a 140 KB w AVIF, załaduje się zauważalnie szybciej, i LCP się poprawi. To najważniejsza z metryk Core Web Vitals, a obrazy wpływają na nią najmocniej.
• CLS (przeskoki układu). Sama zmiana formatu na CLS nie wpływa, ale przy wdrożeniu picture koniecznie wpisujesz width i height, a to usuwa skoki strony przy ładowaniu. Podwójna korzyść z jednego działania.
• Ogólna waga strony i ocena PageSpeed. Narzędzia sprawdzania szybkości wprost krzyczą na ciężkie obrazy i proponują przejście na nowoczesne formaty. Robiąc to, zamykasz jeden z najczęstszych punktów ich rekomendacji, i ogólny wynik rośnie.
• Czynniki behawioralne i SEO. Szybka strona mniej traci odwiedzających, ma niższy współczynnik odrzuceń i większą głębokość przeglądania. Wyszukiwarka to widzi i podnosi taką stronę. Czyli zysk z lekkich obrazów jest nie tylko techniczny, konwertuje się na pozycje i na sprzedaż.

Częste błędy przy wdrożeniu

• Zapomniano o rozwiązaniu zapasowym. Jeśli wysyłać tylko AVIF bez wariantów zapasowych, u niewielkiego procentu odwiedzających obrazy po prostu się nie załadują. Zawsze zostawiaj przynajmniej WebP albo JPG na końcu łańcucha.
• Ustawiono atrybut type na niewłaściwym źródle. Przeglądarka kieruje się właśnie wartością type u tagu source. Jeśli pomylić typy, może wybrać niewłaściwy format albo pominąć pasujący. Sprawdzaj, że image/avif stoi u pliku AVIF, a image/webp u WebP.
• Zrobiono wersję AVIF zbyt skompresowaną. Gonienie za minimalną wagą aż do utraty jakości jest niepotrzebne. AVIF ma ustawienie jakości, a zbyt agresywne wartości dają rozmycie i utratę szczegółów. Dobieraj balans: zwykle jakość w okolicy średnio-wysokiej daje świetny obraz przy wciąż małej wadze.
• Nie zaktualizowano rozmiarów w układzie. Jeśli jedna wersja obrazu ma jedne proporcje, a druga inne, strona będzie skakać. Wszystkie wersje jednego obrazu muszą mieć tę samą szerokość i wysokość.
• Wstawiono AVIF do pobierania. Pamiętaj, że stare oprogramowanie go nie otwiera. Jeśli masz przycisk pobrania obrazu, wysyłaj przez niego zwykły JPG albo PNG, a AVIF używaj tylko do pokazywania na stronie.

Jeśli nie chce Ci się bawić z podwójną konwersją każdego obrazu, zacznij od małego: przekonwertuj najcięższe obrazy (zdjęcia produktów, duże banery, obraz pierwszego ekranu) do AVIF z zapasowym WebP, a resztę zostaw w WebP. Nawet częściowe wdrożenie daje odczuwalny przyrost szybkości, i od razu zobaczysz różnicę w ocenach wydajności. A gdy oswoisz się z procesem, stopniowo rozszerzysz go na całą stronę.

AVIF zawsze jest lżejszy niż WebP?

Niemal zawsze na zdjęciach, zwykle o 20-30 procent. Ale na bardzo prostej grafice z parą kolorów albo na malutkich ikonach różnica może niemal zniknąć, a czasem WebP bezstratny nawet wygrywa. Zasada jest taka: do zdjęć bierz AVIF, do prostej grafiki sprawdzaj oba warianty i bierz ten, który wyszedł lżejszy.

Czy stracę na jakości, przechodząc na AVIF lub WebP?

Nie, jeśli nie zadzierać kompresji do granic. Przy normalnych ustawieniach jakości nowoczesne formaty dają obraz wizualnie nieodróżnialny od oryginału, ale wielokrotnie lżejszy. Jakość traci się tylko jeśli wykręcić kompresję na maksimum dla minimalnej wagi, czego robić nie warto.

Czy trzeba usuwać stare JPG po konwersji?

Nie, przeciwnie, zostaw je jako ostatnie rozwiązanie zapasowe w łańcuchu picture. Niemal nic nie ważą na dysku i zabezpieczają Cię na wypadek bardzo starej przeglądarki albo zewnętrznego systemu, który rozumie tylko klasykę.

Czy AVIF obsługuje przezroczyste tło?

Tak, AVIF ma pełnoprawny kanał alfa, jak PNG i WebP. Więc może zastąpić ciężkie PNG z przezroczystością i dać plik wielokrotnie lżejszy przy tej samej czystej przezroczystości.

Co wybrać do zdjęć wgrywanych przez użytkowników?

WebP. AVIF koduje się 5-10 razy wolniej, i użytkownik będzie czekał. Szybki WebP pokaże wynik natychmiast, a jeśli bardzo chcesz maksimum kompresji, przerób nazbierane zdjęcia do AVIF potem, procesem w tle nocą.

Czy warto już teraz przechodzić na JPEG XL?

Na razie nie. Format jest świetny technicznie, ale Chrome go nie obsługuje, a to zbyt duży udział odwiedzających. Dla działającej strony w 2026 roku pewniejszy jest duet AVIF plus WebP. Do JPEG XL warto wrócić, gdy obsługa w przeglądarkach urośnie.

Czy format obrazów wpływa na pozycje w wyszukiwarce?

Pośrednio, ale zauważalnie. Sam format to nie czynnik rankingowy, ale poprawia szybkość ładowania i Core Web Vitals, a te już są uwzględniane. Plus szybka strona lepiej zatrzymuje odwiedzających, i sygnały behawioralne też działają na Twoją korzyść.

Zbierzmy wszystko w szybką ściągę, żeby dało się zdecydować w minutę.

• Potrzebny jeden format bez kłopotów? Bierz WebP. Obsługa ponad 97 procent, szybko się koduje, pomylić się nie da.
• Chcesz wycisnąć maksimum szybkości? Bierz AVIF do statycznych obrazów: pliki o 20-30 procent lżejsze niż WebP i około dwa razy lżejsze niż JPG.
• Zdjęcia wgrywają użytkownicy w czasie rzeczywistym? WebP, bo AVIF koduje się 5-10 razy wolniej.
• Logotyp, ikona, zrzut ekranu? PNG lub SVG, albo WebP bezstratny.
• Mail, sieci społecznościowe, podgląd linku? Klasyczny JPG lub PNG, nowe formaty tam nie są obsługiwane.
• Chcesz idealnie? Tag picture z łańcuchem AVIF, potem WebP, potem JPG na końcu jako zabezpieczenie.
• JPEG XL? Obiecująco, ale za wcześnie: Chrome na razie nie obsługuje.

Jeszcze jeden pożyteczny nawyk: po wdrożeniu nowego formatu zmierz wynik. Otwórz narzędzie sprawdzania szybkości strony przed zmianami i po, porównaj wagę strony i ocenę wydajności, a przy okazji spójrz na metrykę LCP. Tak zobaczysz konkretną liczbę zysku i zrozumiesz, czy warto iść dalej i przenosić pozostałe obrazy. Optymalizacja bez pomiarów zamienia się w zgadywanie, a z pomiarami staje się zrozumiałym, kontrolowanym procesem.

Główna myśl: AVIF i WebP nie są konkurentami w walce na wyniszczenie, a partnerami. AVIF daje lepszą kompresję, WebP daje lepszą zgodność i szybkość kodowania, a klasyczne JPG i PNG pozostają zabezpieczeniem i mostkiem do starych systemów. Duet z nich pokrywa wszystkie przypadki. Zacznij od najcięższego obrazu na stronie głównej, zamień go w lekki AVIF w parę kliknięć i od razu zmierz szybkość przed i po, dalej proces pójdzie sam.