Przezroczyste obrazy bez ciężaru PNG
Przez lata PNG był jedynym bezpiecznym wyborem dla każdego obrazu w sieci z przezroczystością: wyciętych zdjęć produktów, logo na kolorowych nagłówkach, ilustracji z miękkimi cieniami. JPG w ogóle nie potrafi zapisać przezroczystości, więc projektanci godzili się na duże pliki PNG jako cenę tej funkcji. Wycięte zdjęcie produktu w rozmiarze 1500×1500 px często waży jako PNG od 1,5 do 3 MB.
WebP usuwa ten kompromis. Obsługuje pełny 8-bitowy kanał alfa zarówno w trybie bezstratnym, jak i stratnym, więc fotograficzną część obrazu można skompresować jak JPG, a przezroczystość pozostaje gładka. To samo wycięte zdjęcie produktu zwykle zajmuje od 150 do 400 KB, a ponieważ każda współczesna przeglądarka wyświetla WebP, na większości stron może on bezpośrednio zastąpić PNG.
Które pliki PNG zyskują najwięcej
Oszczędność zależy od tego, co jest w PNG, a nie tylko od rozmiaru pliku.
- Treści fotograficzne z przezroczystością zyskują najwięcej: wycięte produkty, portrety z usuniętym tłem, ilustracje z fakturą. Oszczędności rzędu 70–90 procent są czymś typowym.
- Zrzuty ekranu i makiety interfejsu z gradientami, zdjęciami lub cieniami zwykle zmniejszają się o połowę lub bardziej.
- Płaskie ikony i proste logo z kilkoma jednolitymi kolorami zyskują niewiele. PNG kompresuje je już bardzo dobrze, a kilka małych ikon może nawet wyjść odrobinę większych. W takich przypadkach lepiej często zostać przy PNG albo przepuścić plik przez Kompresję PNG.
- Pliki PNG już zoptymalizowane redukcją palety zyskują mniej niż świeże eksporty z programu graficznego.
Lista plików pokazuje rozmiar oryginalny i nowy dla każdego obrazu, więc łatwo wyłapać te, których nie warto konwertować.
Jak przebiega konwersja
Przeglądarka dekoduje każdy PNG, rysuje go na kanwie w oryginalnym rozmiarze w pikselach i koduje wbudowanym koderem WebP — w wątku roboczym w tle, jeśli przeglądarka go obsługuje. Obraz nigdy nie opuszcza Twojego urządzenia.
Suwak „Jakość”, od 10% do 100% z domyślną wartością 90%, steruje stratną kompresją danych kolorów. Maska przezroczystości jest kompresowana oddzielnie od kolorów i przy typowych koderach przeglądarek suwak nie pogarsza jej w ten sam sposób, więc krawędzie wycięć pozostają czyste nawet przy 75%.
W niektórych zastosowaniach ważny jest pewien szczegół techniczny: kanwa pracuje z premultiplikowaną alfą, więc wartości kolorów w pełni przezroczystych pikseli są odrzucane. W przeglądarce czy dokumencie jest to niewidoczne. Ma znaczenie tylko wtedy, gdy używasz plików PNG jako tekstur w grach lub masek, które polegają na ukrytych danych kolorów pod przezroczystymi obszarami; takie pliki zostaw jako PNG.
Wartości jakości dla grafiki
Domyślne 90% jest wyższe niż dla zdjęć, bo typowa zawartość PNG — elementy interfejsu, tekst i ostre kontury — szybciej niż zdjęcie pokazuje artefakty kompresji.
- 90% dla logo, zrzutów ekranu interfejsu i ilustracji z tekstem. Wizualnie identyczne ze źródłem niemal w każdym przypadku.
- 80% dla wyciętych zdjęć i dużych grafik nagłówkowych, gdy liczy się rozmiar pliku. Różnice widać dopiero po powiększeniu.
- 95–100% dla pixel artu, wykresów z cienkimi liniami i zrzutów ekranu z drobnym tekstem. Tryb stratny WebP zapisuje kolor w połowie rozdzielczości, co może rozmyć kolorowe linie o grubości jednego piksela; na górze zakresu ten efekt jest minimalny.
Jeśli planujesz później zmieniać obraz, zachowaj oryginalny PNG. WebP jest przeznaczony na ostateczną, publikowaną kopię, a konwersja stratnego WebP z powrotem przez WebP na PNG daje duży plik bez odzyskania utraconych szczegółów.
Użycie wyniku na stronie
Podmień plik obrazu i zaktualizuj rozszerzenie w odwołaniu; we współczesnych przeglądarkach żadne inne zmiany w kodzie nie są potrzebne. Kilka praktycznych uwag:
- Przed konwersją dopasuj obraz do rozmiaru wyświetlania. Logo wyświetlane w szerokości 240 px nic nie zyskuje na tym, że ma 2400 px.
- Format WebP ma twardy limit 16383 px na bok, więc bardzo długie zrzuty ekranu lub arkusze sprite'ów przekraczające tę wartość trzeba podzielić.
- Przyjmowane są pliki do 50 MB każdy, a cała partia jest konwertowana z jednym ustawieniem jakości i można ją pobrać jako ZIP.
- Fragmenty tekstowe i inne metadane z PNG nie są kopiowane do WebP.