Co bezstratny WebP faktycznie oszczędza względem PNG

Wersja skrócona

Bezstratny WebP jest często mniejszy niż PNG przy tych samych pikselach. To praktyczny powód, dla którego ludzie go używają.

Ale słowo „często” ma znaczenie. Bezstratny WebP nie jest magicznym zamiennikiem każdego pliku PNG. Największe oszczędności zwykle daje przy obrazach z przezroczystością, zrzutach ekranu, przechwyconych widokach interfejsu oraz mieszanych treściach graficzno-fotograficznych. Może dać niewielki zysk, a czasem nawet przegrać, przy bardzo małych zasobach, mocno zoptymalizowanych paletowych PNG i prostych ikonach.

Jeśli optymalizujesz prawdziwą stronę internetową, właściwe pytanie nie brzmi: „Czy WebP jest lepszy niż PNG?”. Brzmi ono: „Które z moich plików PNG stają się znacząco mniejsze jako bezstratny WebP, bez tworzenia problemów ze zgodnością lub przepływem pracy?”

To węższe pytanie i znacznie łatwiej na nie odpowiedzieć.

Co tutaj oznacza „bezstratny”

Bezstratny oznacza, że zdekodowane piksele dokładnie odpowiadają pikselom źródłowym. Jeśli PNG zostanie przekonwertowany do bezstratnego WebP i ponownie zdekodowany, piksele obrazu powinny być identyczne.

Nie oznacza to, że plik jest taki sam. Metadane, obsługa profilu kolorów, dodatkowe chunki PNG, informacje o gammie, znaczniki czasu i chunki specyficzne dla narzędzi mogą zostać zmienione, usunięte lub zapisane inaczej, zależnie od użytego procesu konwersji.

To rozróżnienie ma znaczenie, jeśli pracujesz z obrazami archiwalnymi, procesami druku, obrazowaniem naukowym, materiałem dowodowym lub każdą sytuacją, w której kontener pliku przenosi ważne informacje niebędące pikselami. Przy zwykłym dostarczaniu obrazów w internecie większość zespołów dba przede wszystkim o piksele wizualne, przezroczystość, wymiary i spójność kolorów.

Jeśli publikujesz obrazy dostarczane przez użytkowników, metadane są też kwestią prywatności. Omówiliśmy ten szerszy temat w artykule jak usuwać metadane EXIF przed udostępnianiem zdjęć online, ale ta sama zasada obowiązuje tutaj: optymalizacja obrazów powinna jasno określać, co zachowuje, a co usuwa.

Dlaczego PNG dobrze się kompresuje i gdzie ma granice

PNG to bardzo dobry format. Nie bez powodu stał się domyślnym wyborem w internecie:

• Jest bezstratny.
• Obsługuje przezroczystość alfa.
• Jest powszechnie obsługiwany.
• Jest przewidywalny i prosty w pracy.
• Świetnie sprawdza się przy płaskich grafikach, zrzutach ekranu, logotypach i zasobach UI.

Kompresja PNG działa przez filtrowanie wierszy obrazu, a następnie zastosowanie kompresji DEFLATE. To połączenie jest skuteczne, zwłaszcza gdy sąsiednie piksele są do siebie podobne.

Problem nie polega na tym, że PNG jest zły. Problem polega na tym, że PNG jest stary. Jego model kompresji ma mniej dostępnych sztuczek niż nowsze formaty. Nawet po zoptymalizowaniu PNG dobrym enkoderem możesz nadal zostawiać bajty na stole, ponieważ sam format nie potrafi reprezentować niektórych wzorców tak wydajnie, jak potrafi to bezstratny WebP.

W tym miejscu pojawia się bezstratny WebP.

Co bezstratny WebP robi inaczej

Bezstratny WebP używa systemu kompresji zaprojektowanego specjalnie dla obrazów, a nie ogólnej warstwy kompresji dołączonej do filtrowanych wierszy. Pod spodem może wykorzystywać techniki takie jak kodowanie predykcyjne, transformacje kolorów, palety, odwołania wsteczne i kodowanie entropijne, aby zwięźle reprezentować powtarzalne lub przewidywalne wzorce pikseli.

Nie musisz zapamiętywać szczegółów implementacji. Przydatny model myślowy jest taki:

PNG dobrze kompresuje wiersze. Bezstratny WebP ma więcej sposobów opisywania struktury obrazu.

Ta dodatkowa elastyczność sprawia, że bezstratny WebP często potrafi tworzyć mniejsze pliki z tego samego obrazu źródłowego.

Google historycznie opisywało bezstratne obrazy WebP jako średnio około 26% mniejsze niż PNG w swoich własnych badaniach. Traktuj to jako kierunkowy punkt odniesienia, a nie obietnicę. Twoje obrazy nie są średnią. Twój system projektowy, zrzuty ekranu, zdjęcia produktów, ilustracje, eksportowane zasoby i przesyłane pliki z CMS będą zachowywać się po swojemu.

Gdzie bezstratny WebP zwykle oszczędza najwięcej

Obrazy przezroczyste

PNG jest często używany ze względu na przezroczystość alfa. Bezstratny WebP również obsługuje alfę i często kompresuje ją wydajnie.

Jest to przydatne dla:

• Wycięć produktowych
• Naklejek i odznak
• Nakładek interfejsu
• Diagramów z przezroczystym tłem
• Logotypów eksportowanych w większym rozmiarze niż potrzeba

Oszczędności mogą być zauważalne, gdy kanał alfa zawiera duże przewidywalne obszary, miękkie krawędzie lub powtarzające się kształty. Jeśli masz katalog pełen przezroczystych obrazów produktów, warto wcześnie przetestować bezstratny WebP.

Zrzuty ekranu i przechwycone widoki UI

Zrzuty ekranu często zawierają duże płaskie obszary, powtarzające się komponenty interfejsu, tekst, ikony, cienie oraz pewne fragmenty fotograficzne. Taka mieszanka może być niewygodna dla PNG, zwłaszcza przy dużych wymiarach.

Bezstratny WebP często dobrze radzi sobie z takimi obrazami. Pełnostronicowy zrzut ekranu UI, który jako zoptymalizowany PNG ma 900 KB, może stać się plikiem WebP bezstratnym o rozmiarze 500–700 KB. Czasem oszczędność jest większa. Czasem mniejsza. Ale ta kategoria jest obiecująca.

Jeśli takie zrzuty pojawiają się w dokumentacji, na stronach marketingowych, w procesach onboardingowych lub studiach przypadku, łączny efekt może być realny.

Mieszane treści ilustracyjne i obrazowe

Wiele współczesnych grafik internetowych nie jest ani czystymi ilustracjami, ani czystymi zdjęciami. Pomyśl o obrazie hero zawierającym UI produktu, gradienty, małe ikony, etykiety tekstowe i osadzone zdjęcia.

PNG może zachować go idealnie, ale wygenerować duży plik. Stratny WebP lub AVIF może tworzyć artefakty wokół tekstu i krawędzi, jeśli kompresja zostanie ustawiona zbyt agresywnie. Bezstratny WebP może być rozsądnym kompromisem, gdy dokładne krawędzie mają znaczenie.

Szersze drzewo decyzyjne dla formatów obrazów, w tym AVIF i stratnego WebP, znajdziesz w artykule Formaty obrazów w 2026: kiedy AVIF wygrywa z WebP, a kiedy nie.

Gdzie PNG może nadal być lepszy

Maleńkie ikony i proste zasoby

Przy bardzo małych plikach znaczenie ma narzut formatu. Ikona PNG o rozmiarze 650 bajtów nie jest oczywistym kandydatem do konwersji. WebP może oszczędzić 80 bajtów albo może stać się większy.

W tej skali złożoność operacyjna może przewyższyć korzyść. Jeśli plik jest już maleńki, nie blokuje renderowania i jest długo cache’owany, prawdopodobnie masz ważniejsze rzeczy do naprawienia.

Starannie zoptymalizowane paletowe PNG

Niektóre pliki PNG są znacznie mniejsze, niż można się spodziewać, ponieważ używają ograniczonej palety. Dobry PNG z kolorem indeksowanym może być trudny do pobicia przy prostych grafikach.

Dotyczy to szczególnie:

• Małych logotypów
• Pixel artu
• Płaskich ikon
• Prostych diagramów
• Grafik z niewielką liczbą kolorów

Uważaj przy porównywaniu WebP z niedbałymi eksportami PNG. Jeśli PNG pochodzi prosto z narzędzia projektowego, z niepotrzebnymi metadanymi i słabymi ustawieniami kompresji, WebP może wyglądać dramatycznie lepiej. Nie oznacza to, że WebP pokonał dobrze zoptymalizowany PNG z taką samą przewagą.

Uczciwy test porównuje bezstratny WebP ze zoptymalizowanym PNG, a nie z dowolnym plikiem, który akurat został przesłany.

Obrazy, które powinny być stratne

To cichy błąd: zespoły konwertują PNG do bezstratnego WebP, gdy obraz w ogóle nie powinien być PNG.

Najczęstszym przypadkiem są zdjęcia. Pełnokolorowe zdjęcie zapisane jako PNG może być ogromne. Konwersja do bezstratnego WebP może zmniejszyć plik, ale zwykle nadal będzie on znacznie większy niż wysokiej jakości stratny WebP lub AVIF.

Jeśli użytkownik nie jest w stanie zauważyć różnicy, bezstratność często jest złym celem. Fotografia produktowa, obrazy redakcyjne, tła i portrety zwykle powinny być w formacie stratnym z rozsądnymi ustawieniami jakości.

Bezstratność należy zostawić na przypadki, w których dokładne piksele mają znaczenie: zrzuty UI, diagramy, grafiki z dużą ilością tekstu, przezroczystość, generowane wykresy i zasoby, które widocznie degradują się pod wpływem kompresji stratnej.

Co oszczędza poza bajtami

Oczywistą oszczędnością jest rozmiar transferu. Mniejsze pliki obrazów zwykle oznaczają mniejsze zużycie pasma, szybsze pobieranie i lepsze działanie na wolnych połączeniach.

Są jednak także korzyści drugorzędne:

• Mniej danych zużywanych przez odwiedzających na planach z limitem
• Szybsze zapełnianie cache obrazów
• Mniejsze zużycie pasma CDN
• Niższy wolumen przechowywania i kopii zapasowych w dużej skali
• Mniejsza presja na budżety wydajnościowe

Te oszczędności nie rozkładają się równomiernie. Jeden PNG o rozmiarze 2 MB przekonwertowany do WebP o rozmiarze 900 KB ma większe znaczenie niż pięćdziesiąt ikon zmniejszonych po 100 bajtów każda.

Dlatego optymalizacja obrazów powinna być priorytetyzowana według wpływu na stronę, a nie według ideologii formatu. Jeśli Lighthouse zgłasza problemy z dostarczaniem obrazów, traktuj to jako wskazówkę, nie wyrok. Nasz przewodnik jak czytać raport Lighthouse bez paniki wyjaśnia, jak odróżniać istotne problemy wydajnościowe od szumiących diagnostyk.

Kompromis związany z kosztem dekodowania

Mniejsze pliki nie są jedyną zmienną wydajnościową. Przeglądarki muszą też dekodować obrazy przed ich namalowaniem.

Dekodowanie PNG jest dojrzałe i zwykle szybkie. Dekodowanie WebP jest również szeroko obsługiwane i wydajne, ale w niektórych przypadkach może kosztować więcej CPU. Na nowoczesnych urządzeniach rzadko jest to blokada, ale na słabszych telefonach, stronach z wieloma obrazami lub dużych zasobach above-the-fold warto to zmierzyć.

Praktyczna zasada: jeśli bezstratny WebP zmniejsza duży PNG o 30–50%, oszczędność sieciowa zwykle dominuje. Jeśli zmniejsza mały PNG o 3%, kompromis prawdopodobnie nie jest wart uwagi.

Praca nad wydajnością pełna jest takich decyzji progowych. Nie optymalizuj każdego bajtu z tą samą intensywnością.

Prosta metoda testowania

Użyj reprezentatywnej próbki, a nie jednego obrazu.

Utwórz folder z przykładami z Twojej rzeczywistej strony:

• Logotypy i ikony
• Zrzuty ekranu
• Wycięcia produktowe
• Diagramy
• Pliki PNG przesłane przez CMS
• Obrazy podglądu społecznościowego
• Duże grafiki hero

Następnie porównaj trzy rzeczy:

1. Oryginalny PNG w przesłanej postaci
2. Zoptymalizowany PNG
3. Wersję WebP bezstratną

W przepływach pracy z wiersza poleceń zespoły często używają narzędzi takich jak oxipng, pngcrush, zopflipng lub cwebp -lossless. Konkretne narzędzie ma mniejsze znaczenie niż dyscyplina porównywania podobnego z podobnym.

Śledź:

• Rozmiar pliku
• Równość pikseli po dekodowaniu
• Renderowanie wizualne w docelowych przeglądarkach
• Poprawność przezroczystości
• Wygląd kolorów
• Czas budowania
• Tarcia w CMS lub przepływie projektowym

Wystarczy prosty arkusz kalkulacyjny. Dodaj oryginalny rozmiar pliku, rozmiar zoptymalizowanego PNG, rozmiar bezstratnego WebP, procent oszczędności oraz stronę, na której obraz się pojawia.

Następnie posortuj według łącznej liczby zaoszczędzonych bajtów. Ta kolejność zwykle powie Ci, co zrobić.

Dostarczanie: nie psuj lekkomyślnie starszych klientów

Obsługa WebP jest dziś szeroka w nowoczesnych przeglądarkach. Dla większości publicznych stron można go bezpiecznie używać. Mimo to, jeśli w grę wchodzą osadzone webview, klienci poczty, starsze przeglądarki korporacyjne, aplikacje natywne lub nietypowe crawlery, przetestuj to przed całkowitym zastąpieniem PNG.

Konserwatywny wzorzec polega na zachowaniu PNG jako fallbacku i serwowaniu WebP tam, gdzie jest obsługiwany:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

To podejście jest nudne, a nuda jest dobra. Użytkownicy z obsługą WebP dostają mniejszy plik. Wszyscy pozostali dostają PNG.

Jeśli Twój system budowania nadaje zasobom odciski wersji, a CDN poprawnie je cache’uje, nie jest to trudne w utrzymaniu. Jeśli Twój CMS utrudnia obsługę alternatywnych formatów, zacznij od największych i najczęściej powtarzanych obrazów, zamiast próbować przekonwertować całą bibliotekę mediów w jednym sprincie.

Prywatność i przetwarzanie lokalne

Konwersja obrazów często odbywa się w pipeline’ach budowania lub usługach mediowych po stronie serwera. Dla wielu zespołów to w porządku. Ale jeśli obsługujesz wrażliwe zrzuty ekranu, pliki przesyłane przez klientów lub dokumenty wewnętrzne, zwróć uwagę, gdzie pliki są przetwarzane.

Narzędzia obrazowe działające po stronie przeglądarki stały się wystarczająco dobre do wielu prostych konwersji, podglądów i kontroli metadanych. Mają ograniczenia, ale lokalne przetwarzanie może ograniczyć niepotrzebne przesyłanie prywatnych obrazów. Omówiliśmy te kompromisy w artykule dlaczego przetwarzanie obrazów w przeglądarce jest wygraną dla prywatności.

W przypadku zasobów wewnętrznych najważniejsza jest jasność zasad. Wiedz, czy obrazy opuszczają urządzenie, gdzie przechowywane są wersje przekształcone i czy metadane są zachowywane.

Praktyczna reguła

Używaj bezstratnego WebP, gdy wszystkie trzy warunki są spełnione:

• Źródło jest obecnie PNG.
• Dokładne piksele lub czysta przezroczystość mają znaczenie.
• Bezstratny WebP oszczędza znaczącą ilość po porównaniu ze zoptymalizowanym PNG.

Zostań przy PNG, gdy:

• Plik jest maleńki.
• PNG jest już zoptymalizowany paletowo i konkurencyjny.
• Ograniczenia zgodności są nietypowe.
• Złożoność operacyjna nie jest warta zaoszczędzonych bajtów.

Używaj stratnego WebP lub AVIF, gdy:

• Obraz jest fotograficzny.
• Dokładne piksele nie mają znaczenia.
• Ustawienie jakości może dramatycznie zmniejszyć rozmiar bez widocznych szkód.

Najlepsza strategia obrazów rzadko oznacza jeden format wszędzie. To niewielki zestaw reguł stosowanych konsekwentnie.

<!-- tool-cta:start -->

💡 Wypróbuj to: Przepuść ten sam plik PNG przez Image Converter, aby utworzyć bezstratną wersję WebP, i bezpośrednio porównaj rozmiary plików.

<!-- tool-cta:end -->

Co więc bezstratny WebP faktycznie oszczędza?

Oszczędza bajty tam, gdzie PNG wyczerpał swoje sztuczki kompresyjne. Czasem oznacza to skromne 10%. Czasem prawie o połowę mniejszy duży obraz przezroczysty. Na realnej stronie oszczędności zwykle koncentrują się w mniejszości zasobów.

To jest najważniejsze. Bezstratny WebP nie jest moralnym ulepszeniem względem PNG. To praktyczna opcja do konkretnego zadania: mniejsze bezstratne obrazy internetowe z przezroczystością i szeroką obsługą w nowoczesnych przeglądarkach.

Używaj go tam, gdzie uzasadniają to liczby. Zostaw PNG w spokoju tam, gdzie tego nie robią.