WebP tworzy pliki 25 do 35 procent mniejszy niż PNG dla tego samego obrazu i zachowuje przezroczyste tło, z którego słynie PNG. Ten pojedynczy fakt wyjaśnia, dlaczego Google zbudował WebP i dlaczego obsługuje go obecnie większość nowoczesnych witryn internetowych. Kontrargumentem PNG jest zasięg: otwiera się w każdym programie, jaki kiedykolwiek napisano, łącznie z oprogramowaniem, które nigdy nie słyszało o WebP. Zatem wybór nie dotyczy tego, który format jest lepszy pod względem technicznym, ponieważ WebP bez wątpienia taki jest. Chodzi o to, czy optymalizujesz pod kątem nowoczesnej witryny internetowej, czy też gwarantujesz kompatybilność wszędzie. W tym przewodniku szczegółowo porównano oba rozwiązania pod względem kompresji, przezroczystości, trybów jakości, obsługi przeglądarek, animacji i szybkości strony, a następnie przedstawiono jasne zasady wyboru.

Czym jest WebP i dlaczego Google go stworzył

WebP to format obrazu wydany przez firmę Google w 2010 roku, oparty na technologii kompresji z kodeka wideo VP8. Cel był tępy: zmniejszyć obrazy internetowe, aby strony ładowały się szybciej. Google miał dane, aby wiedzieć, że obrazy dominują w wadze strony i że zmniejszenie o jedną trzecią każdego obrazu wymiernie przyspieszyłoby działanie Internetu. WebP został zaprojektowany od początku, aby zastąpić trzy formaty jednocześnie, dopasowując się Przezroczystość PNG, kompresja fotograficzna JPG i animacja GIF w jednym pojemniku. Dzięki tej ambicji może robić rzeczy, których PNG nie może.

Czym jest PNG i dlaczego trwa

PNG pojawił się w 1996 roku jako wolny od patentów zamiennik GIF, wykorzystujący bezstratną kompresję DEFLATE i dodając pełny kanał alfa. Stało się standardem dla logo, ikon, zrzutów ekranu i wszelkich grafik wymagających przezroczystego tła. Prawie trzydzieści lat powszechnego wsparcia to jego fosa. Każda przeglądarka, system operacyjny, klient poczty e-mail, pakiet biurowy i edytor obrazów odczytuje PNG bez konfiguracji. Kiedy obraz koniecznie musi się otworzyć w nieznanym miejscu, format PNG to format, który nigdy nie zawodzi.

Rozmiar pliku: WebP wyraźnie wygrywa

WebP kompresuje lepiej niż PNG w zasadzie w każdym scenariuszu. W przypadku typowego logo lub grafiki interfejsu użytkownika z przezroczystością należy oczekiwać: Redukcja od 25 do 35 procent bezstratne przejście z PNG do WebP. Przejdź w tryb stratny WebP, a oszczędności wzrosną dramatycznie, często od 60 do 70 procent, przy jednoczesnym zachowaniu kanału alfa. PNG nie ma w ogóle opcji stratnej, więc nie może konkurować na najniższym poziomie. W przypadku witryny zawierającej dziesiątki zasobów graficznych różnica ta wynosi setki kilobajtów na wczytanie strony.

Różnica wynika z mądrzejszej kompresji. Algorytm DEFLATE PNG jest metodą ogólnego przeznaczenia zapożyczoną z ZIP, dobrą w znajdowaniu dosłownych powtórzeń. WebP wykorzystuje kodowanie predykcyjne stworzone specjalnie dla obrazów, odgadując każdy blok od sąsiadów i przechowując tylko różnicę. To podejście uwzględniające wizerunek pozwala znaleźć oszczędności, których DEFLATE nie widzi, dlatego format z 2010 roku tak konsekwentnie pokonuje format z 1996 roku.

Przejrzystość: oba to mają, WebP robi więcej

W przeciwieństwie do JPG, oba formaty zawierają pełny kanał alfa, więc logo w każdym z nich pozostaje przezroczyste. Ale WebP dodaje coś, czego PNG nie może dopasować: przezroczystość w trybie stratnym. Przezroczystość PNG występuje tylko przy kompresji bezstratnej, więc półprzezroczysta grafika musi być przechowywana w pełnej bezstratnej wadze. WebP umożliwia jednoczesne uzyskanie przezroczystego tła i agresywnej kompresji, czyli dokładnie tego, czego potrzebuje ciężkie logo PNG. W przypadku elementów interfejsu użytkownika i wycinków produktów, które muszą zachować przejrzystość, a jednocześnie ważyć mniej, ta kombinacja jest najsilniejszym argumentem WebP.

Jakość: tryby bezstratne i stratne

WebP oferuje oba tryby, co czyni go elastycznym w sposób, w jaki PNG nie jest:

Bezstratny WebP dokładnie dopasowuje PNG, piksel po pikselu, tworząc jednocześnie mniejszy plik. Nie ma kompromisu w zakresie jakości, jest tylko zwycięstwo wielkości.
Stratny WebP odrzuca szczegóły tak jak JPG, znacznie zmniejszając pliki i w przeciwieństwie do JPG nadal może zachować przezroczystość.

PNG oferuje tylko format bezstratny, dlatego pozostaje duży. Jeśli potrzebujesz doskonałej kopii, bezstratny WebP zapewni Ci ją mniejszą. Jeśli możesz zaakceptować niewidoczną stratę, stratny WebP zapewnia ułamek rozmiaru. Tak czy inaczej, istnieje ustawienie WebP, które przewyższa PNG.

Obsługa przeglądarek i oprogramowania

To jedyna prawdziwa zaleta PNG, a ona się zawęża. Każda nowoczesna przeglądarka obsługuje WebP, w tym Chrome, Firefox, Safari i Edge, więc w otwartej sieci kwestia kompatybilności jest w zasadzie rozstrzygnięta. Luki występują gdzie indziej: niektóre starsze oprogramowanie komputerowe, niektórzy klienci poczty e-mail, starsze wersje pakietu Office i starsze platformy nadal odrzucają WebP. Formularze przesyłania to kolejna pułapka, ponieważ wiele z nich akceptuje tylko pliki JPG i PNG i od razu odrzuca plik WebP.

Zatem uczciwe podsumowanie jest takie, że WebP jest bezpieczny dla Twojej witryny i ryzykowny dla plików przekazywanych nieznanym systemom. PNG pozostaje uniwersalnym rozwiązaniem w przypadku wszystkiego, co pozostawia twoją kontrolę.

Animacja: WebP zastępuje także GIF

Jedną z możliwości, której PNG po prostu brakuje, jest animacja. Standardowy PNG zawiera pojedynczą klatkę i chociaż istnieje rozszerzenie APNG, obsługa zawsze była niespójna. obsługuje WebP animacja natywnie z pełną alfa, tworząc pliki znacznie mniejsze niż odpowiednik GIF, wyświetlając jednocześnie miliony kolorów zamiast 256 kolorów GIF. Jeśli wybierasz pomiędzy formatami krótkiej, zapętlonej grafiki, WebP zdecydowanie pokonuje PNG i GIF.

Dlaczego WebP przyspiesza strony internetowe

Waga strony jest podawana bezpośrednio Największa treściwa farba, jeden z podstawowych wskaźników internetowych Google i potwierdzony sygnał rankingowy. Obrazy są zwykle najcięższym elementem strony, dlatego skrócenie każdego z nich o jedną trzecią ma wymierny wpływ na czas ładowania, wynik LCP i współczynnik odrzuceń. Szybsze strony są również lepiej konwertowane, dlatego praca nad wydajnością opłaca się podwójnie.

Praktyczny wzorzec stosowany przez większość witryn jest progresywny: udostępniaj WebP przeglądarkom, które go obsługują, a w pozostałej części wracaj do PNG lub JPG. Współczesny HTML obsługuje to automatycznie za pomocą elementu obrazu, a większość systemów zarządzania treścią i usług graficznych robi to za Ciebie. Otrzymujesz zwycięstwo w szybkości bez psucia czegokolwiek dla starszych klientów.

Kiedy używać poszczególnych formatów

Użyj WebP do obrazów stron internetowych, zwłaszcza logo i ikon z przezroczystością, gdzie mniejsze pliki oznaczają szybsze strony.
Użyj WebP gdy potrzebujesz przejrzystości i małych rozmiarów, ponieważ jest to jedyny powszechny format oferujący jedno i drugie.
Użyj PNG kiedy obraz musi zostać otwarty w dowolnym programie, w tym w starym oprogramowaniu i klientach poczty e-mail.
Użyj PNG w przypadku formularzy i systemów przesyłania, które wyraźnie wymieniają akceptowane formaty i pomijają WebP.
Użyj PNG jako mistrz archiwizacji, ponieważ uniwersalna obsługa jest ważniejsza niż rozmiar pliku, który przechowujesz na zawsze.

Jak przekonwertować PNG na WebP

Konwersja nie wymaga instalacji. Otwórz nasze konwerter, dodaj plik PNG i wybierz opcję zachowującą przezroczystość, która eksportuje plik WebP. Przetwarzanie odbywa się lokalnie za pośrednictwem interfejsu API HTML5 Canvas, więc nic nie jest przesyłane, a możesz przesłać wsadowo kilka plików na raz. Przezroczyste tło pozostaje nienaruszone, a plik staje się wyraźnie jaśniejszy. Pełny opis przejścia znajduje się w pliku Przewodnik PNG do WebP.

A co z AVIF-em?

Warto poznać kontekst: AVIF to nowszy format, który kompresuje jeszcze lepiej niż WebP, często jest o kolejne 20 procent mniejszy, a także obsługuje przezroczystość i animację. Obsługa przeglądarek jest obecnie dobra, ale nieco w tyle za WebP, a obsługa oprogramowania jest jeszcze dalej w tyle. Dla większości dzisiejszych witryn WebP jest pragmatycznym wyborem zapewniającym najlepszą równowagę między oszczędnościami i wsparciem, a AVIF warto obserwować w miarę wzrostu adopcji. PNG pozostaje rozwiązaniem awaryjnym w obu przypadkach.

Werdykt

WebP wygrywa pod względem technicznym kompleksowo: mniejsze pliki, przejrzystość zarówno w trybie bezstratnym, jak i stratnym, animacja i pełna obsługa nowoczesnych przeglądarek. PNG wygrywa w jednej rzeczy, która wciąż ma znaczenie, czyli otwieraniu się absolutnie wszędzie i bez wątpienia. Używaj WebP w swojej witrynie i PNG do wszystkiego, co wysyłasz w nieznane, i obsługuj WebP z zastępczym formatem PNG, jeśli chcesz obu. W przypadku obrazu w szerszym formacie, Przewodnik po PNG i JPG okładki, w których mieszczą się zdjęcia.

Przykłady rozmiarów w świecie rzeczywistym

Abstrakcyjne wartości procentowe są mniej pomocne niż rzeczywiste liczby, więc oto jak wygląda różnica w przypadku typowych aktywów:

A Logo o wymiarach 500 na 500 pikseli z przezroczystością: około 45 KB jako PNG-24, około 30 KB jako bezstratny WebP i poniżej 12 KB jako stratny WebP z nienaruszonym kanałem alfa.
A grafika bohatera o pełnej szerokości z miękkimi cieniami: często 400 KB lub więcej jako PNG, około 260 KB jako bezstratny WebP i znacznie poniżej 100 KB jako stratny WebP.
A Zestaw ikon interfejsu użytkownika dwudziestu małych grafik: cały zestaw może bezstratnie spaść z około 200 KB do 130 KB, przed jakimkolwiek stratnym strojeniem.

Pomnóż przykład bohatera przez kilkanaście stron, a oszczędność wyniesie sekundy czasu ładowania przy wolnym łączu, a to jest dokładnie ten rodzaj różnicy, którą mierzy Core Web Vitals.

Konwersja istniejącej biblioteki PNG

Większość witryn nie zaczyna się od czystego; mają już wdrożone setki plików PNG. W zależności od konfiguracji działają trzy podejścia. Jeśli Twoja witryna działa na nowoczesnym frameworku lub systemie CMS, potok obrazów prawdopodobnie automatycznie konwertuje i obsługuje WebP, więc zmieniasz ustawienia, a nie pliki. Jeśli korzystasz z usługi CDN lub obrazu, większość oferuje automatyczna negocjacja formatu, dostarczając WebP do przeglądarek, które go akceptują, oraz PNG do tych, które tego nie robią, z tego samego pliku źródłowego. A jeśli zarządzasz plikami ręcznie, wsadowa konwersja zasobów i aktualizacja referencji działa, chociaż jest to najbardziej pracochłonne.

Niezależnie od tego, którą trasę wybierzesz, zachowaj oryginalne pliki PNG. Są Twoimi mistrzami i możesz ich potrzebować w systemie, który później odrzuci WebP.

Typowe błędy WebP, których należy unikać

Kilka pułapek łapie ludzi przechodzących na WebP:

Konwersja archiwalnych wzorców: konwertuj kopie w celu dostarczenia i zachowaj oryginały w formacie PNG, ponieważ obsługa WebP jest węższa w oprogramowaniu komputerowym.
Używanie stratnego WebP w grafice tekstowej: Kompresja stratna powoduje rozmazywanie ostrych liter, tak jak robi to JPG. Używaj bezstratnego WebP do zrzutów ekranu i obrazów zawierających dużo tekstu.
Pomijanie powrotu: udostępnianie WebP bez alternatywy w formacie PNG lub JPG psuje obraz dla starszych klientów i niektórych kontekstów poczty elektronicznej.
Wysyłanie WebP w celu przesłania formularzy: wiele z nich akceptuje tylko JPG i PNG i całkowicie odrzuca plik.

Żaden z nich nie jest powodem, aby unikać WebP. Są to powody, aby używać go tam, gdzie należy, czyli dostarczać go do nowoczesnych przeglądarek, zachowując jednocześnie format PNG dla mistrzów i do wszystkiego, co pozostawia twoją kontrolę.

Jak przeglądarki faktycznie wybierają format

Obsługa dwóch formatów brzmi skomplikowanie, ale mechanizm jest prosty i automatyczny. Każda przeglądarka wysyła nagłówek Accept z każdym żądaniem obrazu, zawierający listę obsługiwanych formatów. Serwer lub CDN odczytuje ten nagłówek i zwraca WebP do przeglądarki, która reklamuje obsługę, lub PNG do przeglądarki, która tego nie robi, z tego samego adresu URL. W HTML możesz zrobić to samo jawnie z elementem image, wyświetlając najpierw źródło WebP, a następnie zastępcze PNG; przeglądarka wybiera pierwszą, którą może odczytać i ignoruje resztę. Tak czy inaczej, żaden odwiedzający nie zobaczy uszkodzonego obrazu, a nowoczesne przeglądarki po cichu pobierają mniejszy plik, podczas gdy starsze otrzymują zgodny.

Często zadawane pytania

Czy WebP jest lepszy niż PNG?

Technicznie tak. Pliki WebP są od 25 do 35 procent mniejsze, zachowaj przezroczystość i dodaj tryby stratne i animacyjne, których brakuje w PNG. PNG wygrywa tylko dzięki uniwersalnej kompatybilności.

Czy WebP obsługuje przezroczystość taką jak PNG?

Tak i dalej. WebP utrzymuje kanał alfa zarówno w trybie bezstratnym, jak i stratnym, podczas gdy PNG zapewnia przezroczystość jedynie przy kompresji bezstratnej.

O ile mniejszy jest WebP niż PNG?

Typowo 25 do 35 procent mniejszy bezstratniei od 60 do 70 procent mniejszy w trybie stratnym, przy jednoczesnym zachowaniu przezroczystości.

Czy wszystkie przeglądarki obsługują WebP?

Każda nowoczesna przeglądarka obsługuje WebP, w tym Chrome, Firefox, Safari i Edge. Niektóre starsze programy komputerowe i formularze przesyłania nadal je odrzucają.

Które formaty obsługują przezroczystość i animację?

WebP robi jedno i drugie. PNG ma przezroczystość, ale nie ma niezawodnej animacji, a GIF animuje, ale jest ograniczony do 256 kolorów z surową przezroczystością.

Czy dla strony internetowej lepszy jest WebP czy PNG?

WebP, dla szybkości. Mniejsze pliki poprawiają największą zawartość treściową, sygnał rankingowy Core Web Vitals. Udostępnij zastępczą wersję PNG dla starszych klientów.

Czy powinienem używać WebP czy AVIF?

Na razie WebP. AVIF kompresuje około 20 procent lepiej, ale ma węższą obsługę, więc WebP jest dziś pragmatyczną równowagą oszczędności i kompatybilności.

Czy mogę przesłać plik WebP do formularza?

Często nie. Wiele formularzy przesyłania akceptuje wyłącznie pliki JPG i PNG, więc przekonwertuj na jeden z nich, gdy system wyświetli listę akceptowanych formatów i pominie WebP.

Czy powinienem przekonwertować istniejące pliki PNG na WebP?

Konwertuj kopie do dostarczenia, a nie swoje wzorce. Zachowaj oryginalne pliki PNG, ponieważ obsługa WebP jest węższa w przypadku oprogramowania komputerowego i formularzy przesyłania.

Czy stratny WebP jest dobry do zrzutów ekranu z tekstem?

Nie. Kompresja stratna powoduje rozmazywanie ostrych literdokładnie tak, jak robi to JPG. Użyj bezstratnego protokołu WebP w przypadku grafik i zrzutów ekranu zawierających dużo tekstu.

Czy nadal potrzebuję zastępczego formatu PNG w WebP?

Dla maksymalnego bezpieczeństwa tak. Wszystkie nowoczesne przeglądarki czytają WebP, ale starsze oprogramowanie komputerowe, niektóre programy pocztowe i wiele formularzy przesyłania nadal tego nie robią.

Skąd przeglądarka wie, czy załadować WebP, czy PNG?

Przez Zaakceptuj nagłówek wysyłany z każdym żądaniem, który zawiera listę obsługiwanych formatów. Serwery i sieci CDN odczytują go i automatycznie zwracają wersję zastępczą WebP lub PNG.