AVIF na PNG: dla przezroczystości i dla obrazów, które będziesz jeszcze edytować
AVIF obsługuje przezroczystość, a większość konwerterów po prostu ją wyrzuca. Przepuść logo z czystymi narożnikami przez niedbałe narzędzie, a dostaniesz za nim biały prostokąt albo czarny. To główny powód, żeby wybrać tutaj PNG zamiast JPG: PNG ma prawdziwy kanał alfa, więc wycięty element trafia do ciebie gotowy do położenia na slajdzie, w makiecie albo na karcie produktu.
Drugi powód to edycja. Kompresja PNG jest bezstratna: zapisuje dokładnie te piksele, które dostała, i nie wyrzuca nic ponadto. Przy konwersji na JPG jest odwrotnie, bo każdy kolejny zapis dokłada nowe artefakty na te, które już tam były. Jeśli obraz trafia do programu graficznego albo będziesz go jeszcze kilka razy kadrować i eksportować od nowa, PNG nic cię przy każdym takim obiegu nie kosztuje.
Test przezroczystości, piksel po pikselu
Zbudowaliśmy plik AVIF z trzema pionowymi pasami: jeden w pełni przezroczysty, jeden dokładnie w połowie przezroczysty i jeden w pełni nieprzezroczysty. Następnie przekonwertowaliśmy go w każdym dostępnym ustawieniu na naszym własnym serwerze i sprawdziliśmy każdy z wyników piksel po pikselu, zamiast poprzestać na tym, jak obraz wygląda na ekranie.
| Ustawienie | Obszar przezroczysty | Obszar półprzezroczysty | Obszar nieprzezroczysty |
|---|---|---|---|
| Recommended | pozostał przezroczysty | pozostał dokładnie w połowie | pozostał nieprzezroczysty |
| Smallest, 64 kolory | pozostał przezroczysty | pozostał dokładnie w połowie | pozostał nieprzezroczysty |
| Palette compression wyłączone | pozostał przezroczysty | pozostał dokładnie w połowie | pozostał nieprzezroczysty |
Częściowa nieprzezroczystość przetrwała nawet przy 64 kolorach. To właśnie przypadek, na którym wykłada się większość konwerterów, bo paleta nie ma dla niej oczywistego miejsca, a typowym skutkiem jest miękki cień zamieniony w twardą krawędź. Tutaj przy żadnym ustawieniu nic nie jest podkładane na kolor tła. Ten sam plik przepuszczony przez AVIF na JPG wrócił z przezroczystym pasem wypełnionym jednolitym kolorem, bo JPEG w ogóle nie potrafi zapisać przezroczystości.
Dlaczego nie obiecamy ci żadnego procentu
Palette compression jest domyślnie włączone, bo pełnokolorowy PNG z fotografii jest ogromny, a zwykły zlib ledwo go rusza. To, ile zaoszczędzi, zależy wyłącznie od obrazu. Oto ten sam AVIF 1200 na 900, 21 KB na dysku, przekonwertowany w każdym ustawieniu:
| Ustawienie | Paleta | PNG na wyjściu | Co się stało |
|---|---|---|---|
| Fast | 256 kolorów | 281 KB | zachowany pełnokolorowy PNG, wersja z paletą wyszła większa |
| Recommended | 128 kolorów | 223 KB | użyto palety |
| Smallest | 64 kolory | 197 KB | użyto palety |
| Palette compression wyłączone | brak | 227 KB | ściśle bezstratnie, pełny kolor |
Na tym konkretnym obrazie paleta nie dała prawie nic, a przy 256 kolorach plik byłby większy, więc narzędzie ją odrzuciło i zostawiło wersję pełnokolorową. Na płaskim logo albo na zrzucie ekranu to samo ustawienie potrafi zmniejszyć plik o ponad połowę. Dlatego nigdzie na tej stronie nie ma żadnego jednego procentu. Jedyna obietnica warta złożenia to ta, której dotrzymamy: zawsze dostajesz mniejszą z dwóch wersji, a wynik mówi ci, którą to jest.
Licz się z tym, że PNG będzie kilka razy większy od AVIF
AVIF to nowoczesny kodek stratny, któremu wolno odrzucić te szczegóły, za którymi twoje oko i tak nie zatęskni. PNG nie ma takiej swobody i musi zapisać każdy piksel, jaki dostał. Fotografia, która jako AVIF mieści się w kilkuset kilobajtach, jako pełnokolorowy PNG rośnie do kilku megabajtów, i to jest cena bezstratności, a nie usterka konwersji ani błąd po twojej stronie. Jeśli mimo wszystko PNG jest dla ciebie za ciężki, obraz jest najpewniej fotografią, a lepszą odpowiedzią będzie dla niego AVIF na JPG.
Zrzuty ekranu i tekst zostają ostre
Twarde krawędzie, tekst interfejsu i płaskie plamy koloru to dokładnie to, z czym JPEG radzi sobie najgorzej. Pracuje on małymi kwadratowymi blokami i zostawia widoczne poświaty wokół każdej pojedynczej litery. PNG zapisuje te krawędzie dokładnie, więc zrzut ekranu konwertuje się z tekstem tak ostrym, jak miał go AVIF. Płaska grafika jest też miejscem, gdzie Palette compression opłaca się najbardziej, bo zrzut ekranu czy logo naprawdę zawierają niewiele różnych kolorów. Przy zrzucie z gradientami, gdy zależy ci na pewności, a nie na oszczędności, wyłącz Palette compression i zachowaj wszystkie kolory.
Ustaw paletę samodzielnie
Pod ustawieniem kompresji znajduje się pole Colours, czyli liczba kolorów. Zostaw je w spokoju, a każde ustawienie użyje swojej własnej wartości domyślnej. Wpisz dowolną liczbę od 2 do 256, a dokładnie taką paletę dostaniesz. Przydaje się to wtedy, gdy dopasowujesz obraz kolorystycznie do istniejącej grafiki albo wyciskasz ikonę do samych granic. Całkowite wyłączenie Palette compression daje z kolei ściśle pikselowo wierny, pełnokolorowy PNG.
Orientacja, kolor i wymiary
Znacznik orientacji ze zdjęcia z telefonu jest stosowany, zanim cokolwiek zostanie zapisane, i następnie usuwany z pliku wynikowego, więc obraz trafia do ciebie ustawiony prawidłowo i żadna przeglądarka nie obróci go drugi raz. Szerokogamutowy profil Display P3 jest osadzany w PNG zamiast porzucany, co stanowi różnicę między wiernym kolorem a niebem wracającym w neonie, a ustawienie Colour profile, czyli profil kolorów, poprawnie konwertuje do sRGB, gdy miejsce docelowe ignoruje profile. Wymiary w pikselach nigdy się nie zmieniają. To konwersja formatu, nie rozmiaru.
Pliki ze zmienioną nazwą i pliki animowane
Format jest odczytywany z samych bajtów pliku, a nie z rozszerzenia w nazwie, więc AVIF, który ktoś zapisał pod nazwą kończącą się na .jpg, i tak przekonwertuje się poprawnie. Animowany AVIF daje pierwszą klatkę jako pojedynczy nieruchomy obraz, a wynik wprost o tym informuje. Animowany PNG nie jest w ogóle tworzony, bo rozwijanie animacji na setki niemal identycznych klatek nie jest tym, o co prosi ktoś konwertujący jeden plik.
Co otrzymujesz
- Przezroczyste tło w całości, razem z częściową nieprzezroczystością i miękkimi cieniami
- Bezstratną kompresję, więc późniejsze kadrowanie i ponowny eksport nic już nie kosztują
- Mniejszą z dwóch wersji, z paletą albo pełnokolorową, rozstrzyganą osobno dla każdego pliku
- Własny rozmiar palety, kiedy go chcesz, w zakresie od 2 do 256 kolorów
- Zdjęcia ustawione prawidłowo, szeroki gamut zachowany albo przeliczony na sRGB na życzenie
- Dokładnie te same wymiary w pikselach, od których zacząłeś, i tak za każdym razem
Co dalej?
Obraz to zwykła fotografia bez przezroczystości? AVIF na JPG da ci dużo mniejszy plik dla tego samego zdjęcia.
PNG wyszedł cięższy, niż się spodziewałeś? Kompresja PNG zmniejszy go dalej bez ruszania wymiarów.
Wrzucasz obraz z powrotem na stronę internetową? PNG na WebP zachowuje przezroczystość, a przy tym wyraźnie odchudza plik dla przeglądarki.