Dlaczego Twoje zrzuty ekranu ważą 2 MB i jak zbić je o 60–90%
Dov Azencot
@DovAzencotPoliczyłem kiedyś zrzuty ekranu w jednym mailowym wątku z przeglądu projektu. Jedenaście sztuk, PNG, średnio tuż poniżej 2 MB każdy. Dwadzieścia parę megabajtów w większości białych dashboardów, latających tam i z powrotem między sześcioma osobami, które wszystkie miały tę samą aplikację otwartą w sąsiedniej karcie. Nikt nie pomyślał, bo „działało”. To pułapka. Zrzuty ekranu są po cichu ogromne, a powód jest wpieczony w to, jak komputer je robi.
Dlaczego zrzut to plik na 2 MB
Gdy naciskasz skrót do zrzutu ekranu, system operacyjny zapisuje PNG. To rozsądny domyślny wybór — PNG jest bezstratny, więc przechwyt jest wierny co do piksela, a dla zrzutu pełnego ostrego tekstu to naprawdę słuszny odruch. Problem tkwi w tym, co PNG robi z rozmiarem.
PNG zapisuje każdy piksel dokładnie. Nowoczesny ekran jest gęsty — przechwyt całego okna na wyświetlaczu Retina lub 4K potrafi mieć 2000+ pikseli szerokości, a PNG wiernie odnotowuje każdy z tych milionów pikseli z pełną wiernością. Nie obchodzi go, że 60% kadru to ten sam odcień niemal-bieli. Niczego nie wyrzuca, bo wyrzucanie nie jest tym, co robi. Zrzut niemal pustej strony ustawień — wizualnie prawie nic — wciąż waży 1,5 do 2,5 MB, bo płótno jest ogromne, nawet gdy treści jest jak na lekarstwo.
Ruch: konwersja na WebP
WebP potrafi coś, czego PNG nie — kompresować stratnie, zachowując przy tym ostre krawędzie i przezroczystość. Na zrzutach ekranu w szczególności to połączenie bliskie jest magii, bo zrzut to głównie płaskie obszary (tanie w kompresji) z odrobiną tekstu (który WebP trzyma ostro). Przebieg stratny odrzuca niedostrzegalny szum; oko nie składa żadnej reklamacji.
Prawdziwe liczby ze zrzutów na moim własnym dysku:
| Zrzut ekranu | Jako PNG | Jako WebP |
|---|---|---|
| Strona ustawień, w większości biała | 1.6 MB | ~180 KB |
| Pełny dashboard analityczny | 2.4 MB | ~310 KB |
| Edytor kodu w trybie ciemnym | 1.9 MB | ~240 KB |
To mniej więcej 85–90% zbicia, a położone obok siebie nie odróżnię, które jest które. Tekst pozostaje czytelny co do piksela. To konwersja o najwyższym zwrocie, jaką robię, właśnie dlatego, że zrzuty ekranu są od początku tak szalenie przeciążone — jest ogromna ilość niczego do wyciśnięcia.
„A czy tekst się nie rozmyje?”
To ta obawa, i słuszna, bo pewnie widziałeś zrzut w JPG z rozmytym, obwódkowym tekstem i założyłeś, że wszystkie formaty stratne tak robią. WebP radzi sobie z krawędziami lepiej niż JPG — wyraźnie lepiej. Przy rozsądnym ustawieniu jakości tekst na zrzucie WebP zostaje ostry. Powiększałem do 400%, polując na artefakty wokół liter, i na normalnych przechwytach interfejsu wracałem z niczym.
Uczciwy wyjątek: jeśli mocno skręcisz jakość w dół, goniąc za maleńkim plikiem, to w końcu zobaczysz, jak tekst mięknie. Lekarstwo brzmi: nie rób tego. Średnie ustawienie jakości daje Ci już wygraną 60–90% z tekstem w komplecie. Nie ma powodu wchodzić w zakres, w którym się psuje.
Kiedy odchudzanie nie pomaga
Dwa przypadki, w których zostawiam PNG w spokoju.
Jeśli zrzut wraca do narzędzia projektowego, żeby go opisać, oznaczyć albo złożyć z czymś, trzymam go bezstratnym. Przebieg stratny WebP to drzwi w jedną stronę, a nie chcę wpiekać kompresji w coś, co za chwilę będę edytować i ponownie eksportować. Wyślij WebP, zatrzymaj wzorzec PNG — ta sama zasada co zawsze.
A jeśli zrzut jest już mały — drobny wycinek, pojedynczy przycisk, coś już poniżej mniej więcej 100 KB — konwersja ledwie drgnie. Wygrana 60–90% bierze się z plików, które są ogromne, bo ogromne jest płótno. Mały wycinek już rozwiązał ten problem. Nie dokładaj kroku na pustym miejscu.
Jak robię to naprawdę
Zrzuty ekranu puszczam przez konwerter PNG na WebP na tej stronie, zanim w ogóle zbliżą się do maila czy dokumentu. Dzieje się to w Twojej przeglądarce, więc przechwyt — który, bądźmy szczerzy, często pokazuje pół ekranu i cokolwiek było w tle — nie opuszcza urządzenia. Wrzuć PNG, popatrz, jak kolumna z rozmiarem się zapada, pobierz WebP, dołącz to zamiast tamtego.
Ważniejsza rzecz to nie narzędzie, tylko odruch. Gdy „zrzut, potem odchudź” wejdzie w automatyzm, przestaniesz strzelać obrazami na 2 MB do ludzi, którzy już mają otwartą aplikację, Twoje maile wysyłają się szybciej, a wątki przestają puchnąć do dziesiątek megabajtów. Tamten mail z jedenastoma zrzutami ważyłby około 2 MB w sumie zamiast dwudziestu paru. Te same obrazy. Wszystko to samo. Tylko bez martwego balastu.
Powiązane wpisy
Dlaczego zamieniam PNG na WebP (i kiedy — za nic w świecie)
PNG jest świetny, gdy w nim pracujesz, i rozrzutny, gdy go publikujesz. Rozłóżmy na czynniki, co WebP realnie oszczędza, gdzie jest bezużyteczny, i jedną zasadę, której nie łamię.
AVIF kontra WebP — mniejszy plik nie zawsze jest tym właściwym
AVIF zwykle bije WebP na rozmiarze, czasem o 20% i więcej. Wyjaśniam, ile ta dodatkowa kompresja kosztuje w czasie kodowania i przypadkach brzegowych, i kiedy nadal wybieram WebP.
SVG na PNG — kiedy naprawdę potrzebujesz pikseli (i kiedy nie)
SVG skaluje się w nieskończoność i zostaje maleńki, więc rasteryzacja wygląda na krok wstecz. Czasem jest. Wyjaśniam, kiedy naprawdę potrzebujesz pikseli PNG z wektora, a kiedy zostawić SVG.
Wszystkie wpisy