Notatki zespołu o rzemiośle, formatach i drobnych decyzjach stojących za dobrym wynikiem.
Dlaczego AVIF tak zdecydowanie bije PNG na rozmiarze pliku
AVIF jest zbudowany na kodeku nowoczesnego formatu, zaprojektowanym pod wydajność percepcyjną, a nie pod wierność bezstratną. PNG używa DEFLATE na surowych danych pikselowych, co jest bezstratne, ale zostawia ogromną redundancję w treści fotograficznej nietkniętą. AVIF wymienia tę redundancję na predykcję blokową zapożyczoną z wideo, odrzucając informację, której ludzki układ wzrokowy nie zauważa. Wynik jest drastyczny. Zdjęcie 116 kilobajtów konwertuje się do jakichś 16 kilobajtów jako AVIF przy jakości 85, a przezroczysty PNG zwykle kurczy się o 30 do 50 procent wobec równoważnego WebP. Różnica rośnie przy fotografiach wysokiej rozdzielczości i maleje przy prostej grafice. Dla każdej witryny serwującej przezroczyste obrazy nowoczesnej widowni oszczędność transferu przekłada się wprost na szybsze ładowanie i niższy koszt ruchu wychodzącego.
Historia kanału alfa w szczegółach
Zarówno PNG, jak i AVIF przechowują przezroczystość w osobnej płaszczyźnie przezroczystość obok danych koloru. Gdy ta para przetwarza twój PNG, odczyt wyciąga piksele koloru i maskę przezroczystość niezależnie od siebie. Strona AVIF zapisuje wtedy nowy plik z własną ścieżką przezroczystość, używając kodowania wewnątrzklatkowego nowoczesnego formatu do skompresowania obu płaszczyzn przy jakości 85. Alfa nie zostaje wtopiona w kolor i nie zostaje zastąpiona wypełnieniem tła. Miękkie cienie, rozmyte krawędzie i częściowo przezroczyste gradienty są oddane wiernie. Jedyna degradacja, którą AVIF dokłada, to stratna kompresja samej płaszczyzny przezroczystość, która potrafi stworzyć ledwie dostrzegalną obwódkę wokół bardzo twardych krawędzi przy skrajnym powiększeniu. Przy normalnych rozmiarach wyświetlania i jakości 85 różnica nie jest widoczna. Dla pracy z ikonami w precyzji pikselowej w maleńkich rozmiarach zachowaj PNG.
Szybkość przetwarzania w praktyce, przeglądarka po przeglądarce
Strona AVIF wczytuje się raz na sesję przeglądarki, około 800 milisekund na pobranie plus 300 na inicjację, więc pierwsza konwersja niesie jakąś sekundę rozgrzania. Rozgrzane konwersje pomijają to w całości. W Chrome na komputerze 0,12 megapiksela zajmuje około 40 milisekund, 1 megapiksel jakieś 250 milisekund, a 8 megapikseli jakieś 2,8 sekundy. Firefox jest wyjątkiem, wykonując tę samą pracę około cztery razy wolniej, więc zdjęcie 4K może zająć tam 30 sekund lub więcej. WebKit w Safari ląduje między nimi, bliżej Chrome. Na średnim sprzęcie mobilnym liczby idą trzy do pięciu razy gorzej niż w Chrome na komputerze. Jeśli konwertujesz duże pliki często, Chrome na komputerze lub laptopie daje najlepszą przepustowość.
Kiedy zachować PNG zamiast konwertować
PNG zostaje słusznym wyborem w kilku przypadkach, nawet gdy rozmiar pliku ma znaczenie. Po pierwsze, grafika z ostrym tekstem w małych rozmiarach, jak etykiety, plakietki czy ikony w skali favikony, może pokazać w AVIF artefakty nie do przyjęcia na typowych odległościach oglądania. Po drugie, pliki źródłowe używane do dalszej edycji powinny zostać PNG, bo każde przejście przez format stratny narasta utratą jakości. Po trzecie, środowiska, które odrzucają AVIF, w tym niektóre edytory dokumentów, starsze narzędzia projektowe i klienty poczty, potrzebują PNG dla zgodności. Wreszcie animacja poza pierwszą klatką nie zostaje zachowana, bo ta para obsługuje jedną klatkę. Wszędzie indziej, dla przezroczystych fotografii i zasobów graficznych idących do nowoczesnej dostawy webowej, PNG na AVIF jest właściwą wymianą.
Core Web Vitals i argument transferu
Largest Contentful Paint, główna metryka ładowania, odpowiada wprost na rozmiar największego obrazu na stronie. Zmniejszenie tego obrazu ze 116 kilobajtów do 16 kilobajtów, jak zmierzono na zdjęciu 4K w developmencie, obcina czas transferu na łączu 10 Mbps z około 93 milisekund do około 13 dla samego tego elementu. Pomnóż to przez siatkę produktów, obracającą się karuzelę albo interfejs napchany przezroczystymi ikonami, a skumulowana oszczędność spycha LCP wyraźnie poniżej progu 2,5 sekundy, który Google traktuje jako dobry. Przyjęcie AVIF przyspieszyło właśnie dlatego, że argument da się postawić w twardych liczbach. Przy pokryciu około 94,3 procent przeglądarek przypadek zejścia jest na tyle mały, że zysk transferu przeważa nad dodatkowym znacznikiem elementu picture.
Czym różni się to od zwykłego konwertera online
Większość konwerterów AVIF online wysyła twój PNG na maszyny, których nie kontrolujesz, przetwarza go tam i przechowuje zgodnie z polityką retencji ustaloną przez tego dostawcę, często niejasną. RoundCut jest bezpośredni co do swojego przebiegu. Ponieważ AVIF jest wymagający, konwersja działa na naszym serwerze dla najlepszego wyniku, a koder w przeglądarce służy jako automatyczna rezerwa, gdy serwer jest niedostępny. Gdy twój plik trafia do nas, jest konwertowany, a potem usuwany w około 2 godziny, bez konta i bez żadnego użycia poza konwersją, o którą poprosiłeś. Nie ma trwałego przechowywania ani udostępniania twojego obrazu. Dla osób pracujących z dokumentami klientów, własną fotografią produktową lub treściami użytkowników uczciwa wersja transakcji jest taka: plik może przejść przez nasz serwer, jest przetwarzany tylko po to, by stworzyć twój AVIF, i tam nie zostaje.
