Dlaczego plik PNG ma 8 MB i jak to naprawić
Format PNG jest bezstratny, co jest powodem, dla którego pliki są ogromne. Trzy rozwiązania i co każde z nich Cię kosztuje.
Twój plik PNG ma 8 MB, ponieważ PNG zapisuje dokładnie każdy piksel, a zrzut ekranu całej strony w rozdzielczości retina naprawdę zawiera tak wiele informacji. Format ten niczego nie odrzuca, co jest główną zaletą PNG, a zarazem głównym problemem.
Istnieją 3 sposoby na rozwiązanie tego problemu, a każdy z nich wiąże się z innym kosztem. Zmniejszenie wymiarów kosztuje utratę rozdzielczości, której prawdopodobnie i tak nie używałeś. Zmniejszenie głębi kolorów kosztuje dokładność odwzorowania barw na zdjęciach. Zmiana formatu kosztuje kompatybilność poza przeglądarkami. Wybierz rozwiązanie w zależności od przeznaczenia obrazu.
Twoje 3 opcje
- Zmniejsz wymiary. Darmowe i zazwyczaj dające największy zysk. Nikt nie potrzebuje zrzutu ekranu o szerokości 5000 pikseli.
- Zmniejsz głębię kolorów. Działa dobrze na prostej grafice, źle na zdjęciach.
- Zmień format. WebP zachowuje przezroczystość i zazwyczaj jest o 25 do 35 procent mniejszy.
Dlaczego pliki PNG tak szybko rosną
Rozmiar pliku PNG skaluje się bezpośrednio wraz z liczbą pikseli, ponieważ każdy piksel musi być dokładnie opisany. Podwojenie szerokości i wysokości czterokrotnie zwiększa liczbę pikseli i w przybliżeniu czterokrotnie zwiększa rozmiar pliku.
Zrzut ekranu o rozdzielczości 5120 na 2880 z monitora o wysokiej rozdzielczości zawiera 14,7 miliona pikseli. Przy 3 bajtach na piksel przed kompresją daje to 44 MB surowych danych, a kompresja PNG zazwyczaj zmniejsza tę wartość do poziomu między 4 MB a 12 MB, w zależności od tego, jak dużo jednolitych kolorów zawiera obraz. Wynik na poziomie 8 MB jest normą, a nie błędem.
Rozwiązanie 1: zmniejsz wymiary
Zmień rozmiar obrazu do największego rozmiaru, w jakim kiedykolwiek będzie wyświetlany, co usunie większość wagi pliku przed wypróbowaniem czegokolwiek innego. To rozwiązanie o największej skuteczności i najniższym koszcie.
| Oryginalny rozmiar | Zmieniono na | Usunięte piksele | Typowy plik |
|---|---|---|---|
| 5120 x 2880 | 2560 x 1440 | 75 procent | 8 MB do 2 MB |
| 3840 x 2160 | 1920 x 1080 | 75 percent | 5 MB do 1.3 MB |
| 2560 x 1440 | 1280 x 720 | 75 percent | 2 MB do 500 KB |
| Zdjęcie 4000 x 3000 | 1600 x 1200 | 84 procent | 18 MB do 2.9 MB |
Zmierz maksymalną szerokość, w jakiej obraz będzie renderowany na stronie, podwój ją dla ekranów o wysokiej gęstości pikseli i zmień rozmiar do tej wartości. Zrzut ekranu wyświetlany w szerokości 800 pikseli potrzebuje 1600 pikseli i nic więcej.
Rozwiązanie 2: zmniejsz głębię kolorów
Konwersja z 24-bitowego koloru na 8-bitową paletę zmniejsza plik PNG o 50 do 70 procent i działa tylko na obrazach o ograniczonej liczbie kolorów. Zrzuty ekranu interfejsów, diagramy, logo i wykresy są idealnymi kandydatami.
Technika ta przechowuje paletę do 256 kolorów i odwołuje się do niej dla każdego piksela, zamiast zapisywać pełne wartości kolorów. Zrzut ekranu interfejsu użytkownika rzadko zawiera więcej niż 256 unikalnych kolorów, więc redukcja jest niewidoczna. Zdjęcie zawiera dziesiątki tysięcy barw, więc ta sama redukcja spowoduje widoczne pasy (banding) na niebie i skórze.
Rozwiązanie 3: zmień format
Konwertuj do WebP na potrzeby stron internetowych, co pozwala zachować przezroczystość i zazwyczaj daje pliki o 25 do 35 procent mniejsze niż PNG. Konwertuj do JPG tylko wtedy, gdy obraz jest zdjęciem i nie wymaga przezroczystości.
- Bezstratny WebP dla grafik i zrzutów ekranu, który zachowuje dokładność każdego piksela, a mimo to pozwala zaoszczędzić 20 do 30 procent.
- Stratny WebP dla fotograficznych plików PNG, gdzie oszczędność sięga 70 procent lub więcej.
- JPG dla zdjęć bez przezroczystości, gdzie PNG od samego początku był niewłaściwym wyborem.
- AVIF dla dużych obrazów fotograficznych, który kompresuje jeszcze mocniej pliki powyżej 100 KB.
- Grafika wektorowa dla logo i ikon, gdzie plik SVG może ważyć ułamek tego, co jakikolwiek format rastrowy.
Najczęstsza przyczyna: zdjęcie zapisane jako PNG
Zdjęcie zapisane jako PNG jest od 3 do 5 razy większe niż to samo zdjęcie w formacie JPEG, bez żadnej widocznej różnicy. Ten jeden błąd odpowiada za większość zbyt dużych plików PNG.
Kompresja PNG szuka powtarzalności, a zdjęcia nie zawierają jej prawie wcale na poziomie pikseli, ponieważ każdy piksel różni się nieznacznie od sąsiedniego. Format ten kończy na dokładnym zapisywaniu milionów niemal unikalnych wartości. Zapisuj zdjęcia jako JPEG lub WebP, a PNG rezerwuj dla obrazów, które naprawdę mają jednolite kolory lub przezroczystość.
Jak zmniejszyć plik PNG bez utraty jakości
Aby zmniejszyć plik PNG przy zachowaniu bezstratności, wykonaj kolejno te 5 kroków.
- Przytnij nieużywane obszary, ponieważ puste marginesy nadal wpływają na rozmiar pliku.
- Zmień rozmiar do największego rozmiaru wyświetlania, jakiego obraz będzie kiedykolwiek potrzebował, podwojonego dla ekranów o wysokiej gęstości.
- Sprawdź, czy obraz rzeczywiście potrzebuje przezroczystości, ponieważ spłaszczony obraz kompresuje się lepiej.
- Zmniejsz paletę kolorów, jeśli obraz jest grafiką, a nie zdjęciem.
- Konwertuj do bezstratnego WebP, który nadal jest dokładny, a zazwyczaj o 20 do 30 procent mniejszy.
Kroki 1 i 2 zazwyczaj same rozwiązują problem. Pozostałe kroki mają znaczenie, gdy obraz musi pozostać bardzo duży, jak na przykład zrzut ekranu całej strony w dokumentacji.
Dlaczego zrzuty ekranu są tak duże na nowoczesnych ekranach
Ekrany o wysokiej gęstości rejestrują obraz w 2- lub 3-krotnie większej rozdzielczości logicznej, więc zrzut ekranu okna o szerokości 1200 pikseli jest zapisywany w rozmiarze 2400 lub 3600 pikseli. Plik jest znacznie większy, niż okno wydawało się na ekranie.
Ta dodatkowa rozdzielczość jest przydatna, gdy zrzut ekranu będzie oglądany na innym ekranie o wysokiej gęstości, w przeciwnym razie jest marnowana. W przypadku dokumentacji i artykułów pomocy technicznej, zmiana rozmiaru z powrotem do rozmiaru logicznego zmniejsza wymiary o połowę i redukuje plik o około 75 procent, wyglądając identycznie dla większości czytelników.
Kiedy zachować duży plik PNG
Zachowaj pełnowymiarowy plik PNG, gdy obraz jest plikiem głównym (master), materiałem do druku lub źródłem, które będzie później edytowane. Decyzje o kompresji dotyczą kopii roboczych, a nie oryginałów.
Pliki projektowe, wzorce logo, grafiki do druku i zeskanowane dokumenty uzasadniają swój rozmiar. Przechowuj je w pełnej rozdzielczości i generuj mniejsze kopie dla każdego przeznaczenia. Błędem jest publikowanie pliku głównego zamiast jego zachowania, ponieważ plik główny kosztuje miejsce na dysku raz, podczas gdy opublikowany plik główny kosztuje transfer przy każdej wizycie.
Przezroczystość kosztuje więcej, niż ludzie się spodziewają
Kanał przezroczystości dodaje czwartą wartość do każdego piksela, zwiększając surowe dane o około 33 procent przed kompresją. Wiele plików PNG zawiera ten kanał, mimo że z niego nie korzysta.
Zrzuty ekranu, wyeksportowane wykresy i obrazy spłaszczone na białym tle często zachowują kanał alfa, który jest w pełni nieprzezroczysty w każdym miejscu. Usunięcie go nic nie kosztuje wizualnie, a mierzalnie zmniejsza plik. Sprawdź, czy obraz naprawdę potrzebuje przezroczystego tła, zanim uznasz, że ten kanał jest wymagany, ponieważ większość obrazów umieszczanych na białej stronie go nie potrzebuje.
Czy kompresja PNG powoduje utratę jakości
Bezstratna optymalizacja PNG nic nie traci, podczas gdy zmniejszanie liczby kolorów lub wymiarów zmienia obraz na stałe. Te 3 techniki są często opisywane razem, a nie są równoważne.
Bezstratna optymalizacja reorganizuje sposób przechowywania danych w pliku i zazwyczaj pozwala zaoszczędzić od 5 do 20 procent przy identycznym obrazie na poziomie pikseli. Redukcja palety i zmiana rozmiaru modyfikują sam obraz, co jest dopuszczalne w przypadku kopii docelowych, ale niedopuszczalne dla plików źródłowych. Zachowaj oryginał zawsze, gdy redukcja nie jest odwracalna.
Naprawa całego folderu zbyt dużych plików PNG
Przetwarzaj folder partiami, ponieważ zbyt duże pliki PNG zazwyczaj pojawiają się w grupach z tego samego źródła. Zestaw dokumentacji, biblioteka zrzutów ekranu lub eksport z narzędzia projektowego zazwyczaj dzielą ten sam problem.
Wrzuć do 500 plików naraz lub przeciągnij bezpośrednio archiwum ZIP i ustaw wymiary oraz format raz dla całego zestawu. Wszystko działa w Twojej przeglądarce na Twoim własnym procesorze, więc wewnętrzne zrzuty ekranu, projekty produktów i dokumentacja klienta nigdy nie trafiają na serwer. Nic nie jest przesyłane, więc nie ma polityki przechowywania danych do czytania i nic po sobie nie zostawiasz.
Napraw źródło problemu, a nie tylko same pliki. Narzędzie do zrzutów ekranu ustawione na zapisywanie PNG w pełnej rozdzielczości retina będzie w nieskończoność generować pliki o rozmiarze 8 MB. Większość narzędzi do przechwytywania pozwala na ustawienie domyślnego formatu i współczynnika skalowania, a jednorazowa zmiana obu tych parametrów eliminuje potrzebę ponownego przetwarzania zrzutów ekranu po każdym artykule pomocy.