shadcn.io— tysiące gotowych bloków shadcn/ui
Przejdź do treści

Dlaczego zamieniam PNG na WebP (i kiedy — za nic w świecie)

Na pulpicie mam folder to-shrink. Przez lata trafiały do niego umierać zrzuty ekranu — dwumegabajtowe PNG z dashboardami i niedokończonymi makietami, które potem rozsyłałem ludziom zupełnie niepotrzebującym dwóch megabajtów mojego ekranu. Pewnego popołudnia w końcu otworzyłem ten folder i policzyłem: ważył więcej niż aplikacja, którą w tym samym tygodniu wypuściłem na produkcję. Na tym polega cicha bolączka PNG. Format jest znakomity, a przy tym marnuje niewyobrażalne ilości miejsca, a my prawie tego nie zauważamy — transfer jest tani, a plik „otwiera się normalnie”.

Pozwól więc, że przytoczę argument, który samemu przydałby mi się dużo wcześniej. Jeśli PNG trafia na stronę — tam, gdzie ludzie będą na niego patrzeć, a nie go edytować — to niemal na pewno jego miejsce jest w WebP.

W czym PNG naprawdę jest dobry

PNG działa bezstratnie. Każdy piksel, który do niego włożysz, wraca dokładnie taki sam, zawsze. I to prawdziwa zaleta — dla pliku wzorcowego. Właśnie dlatego programy graficzne eksportują PNG, dlatego zrzuty ekranu to PNG, dlatego sięga się po niego zawsze, gdy potrzeba ostrych krawędzi i przezroczystości. Bezstratny znaczy, że można otwierać, poprawiać i zapisywać sto razy z rzędu, a nic się nie degraduje.

Haczyk w tym, że „idealne przechowanie każdego piksela” to obietnica, za którą płacisz bajtami. Zapisz zdjęcie w PNG, a on rzetelnie zapisze gradienty, szum matrycy i ledwie zauważalne przejścia kolorów, których utraty oko i tak by nie wychwyciło, gdyby były choć trochę przybliżone. Płacisz pełną cenę cennikową za detale, których nikt nie widzi.

Co WebP potrafi, a PNG nie

WebP był odpowiedzią Google na proste pytanie: a co, gdyby po prostu zrobić lepszy format? Robi dwie rzeczy niedostępne dla PNG. Potrafi kompresować stratnie, gdy trzeba — odrzucając niezauważalne, jak robi to JPEG, tylko sprytniej — a przy tym zachowuje pełny kanał alfa. To ta druga część jest cichym cudem. Latami wybór brzmiał: „przezroczystość albo mały plik, jedno z dwóch”. WebP daje oba naraz.

W praktyce fotograficzny lub zrzutowy PNG przy rozsądnej jakości chudnie o jakieś 60–90%. Nie o 10%. Zrzut ważący 1,8 MB zamienia się w mniej więcej 250 KB, a kładąc je obok siebie, nie odróżnisz jednego od drugiego. Robiłem sobie ten test częściej, niż wypada się przyznać, za każdym razem pewien, że właśnie teraz przyłapię WebP na oszustwie. Ani razu się nie udało.

Porównanie, po którym uwierzyłem

Przybliżone liczby z partii, którą konwertowałem w zeszłym miesiącu:

Oryginalny PNGNa WebP
Zrzut interfejsu — 1.8 MB~240 KB
Zdjęcie na baner — 3.1 MB~380 KB
Płaskie dwukolorowe logo — 42 KB~30 KB

Spójrz na logo. Prawie nie drgnęło — i ten przypis jest tu najważniejszy.

Kiedy nie zawracam sobie głowy konwersją

Prosta grafika — płaskie kolory, kilka barw, ostre krawędzie — to dokładnie to, pod kompresję czego PNG powstał, i radzi sobie nie gorzej niż każdy inny. Dwukolorowa ikona, schemat z linii, kod QR: zostaw je w PNG, a jeszcze lepiej — podawaj jako SVG, jeśli masz wektor. WebP tych plików nie zepsuje, ale i porządnie nie pomoże, a niepotrzebny krok dokładasz sobie na pustym miejscu.

Drugi przypadek, gdy nie konwertuję, to plik wzorcowy. Nigdy nie ruszam jedynej kopii czegokolwiek. Tryb stratny WebP to drzwi w jedną stronę: detali, które odrzuciłeś, już nie odzyskasz. Oto więc moja jedyna nienaruszalna zasada — konwertuj tę kopię, którą publikujesz, a oryginał trzymaj tam, gdzie edytujesz. U mnie na maszynie to dosłownie dwa pliki: PNG zostaje w folderze projektu, WebP idzie na stronę. Tania polisa, i ani razu tego nie pożałowałem.

„A czy to w ogóle wszędzie działa?”

Kiedyś był to prawdziwy zarzut, a teraz — już nie. Wszystkie przeglądarki, z których ludzie realnie korzystają, obsługują WebP mniej więcej od 2020 roku — Chrome, Safari, Firefox, Edge, wszystkie po kolei. Z klientami poczty bywa różnie, a stary firmowy soft potrafi zachować się dziwnie, więc do rozsyłki wciąż wezmę JPEG. Ale do otwartego weba? Podawanie WebP bez wariantu zapasowego przestało być odważnym krokiem już lata temu.

Jak zrobiłbym to naprawdę

Szczerze mówiąc, konwerter PNG na WebP na tej stronie złożyłem, bo zmęczyło mnie ciąganie zrzutów ekranu po przypadkowych narzędziach online, żeby je ścisnąć, nie do końca wiedząc, gdzie moje pliki ostatecznie lądują. Wariant, który polecam, jest więc nudny i prywatny: konwertuj na własnej maszynie, wprost w przeglądarce, gdzie plik w ogóle nie opuszcza urządzenia. Wrzuć PNG, popatrz, jak spada kolumna z rozmiarem, pobierz WebP.

Ale nie chodzi o narzędzie. Chodzi o nawyk. Gdy „PNG do edycji, WebP do publikacji” wejdzie w automatyzm, przestaniesz wysyłać ludziom zrzuty na 2 MB, Twoje strony za darmo staną się szybsze, a ten folder to-shrink na pulpicie w końcu zostanie pusty. U mnie jest pusty — od jakiegoś roku. Mała wygrana, ale i takiej się cieszę.

Powiązane wpisy


Wszystkie wpisy