Защо PNG файлът е голям и как да го свием

Вашият PNG файл е 8 MB, защото PNG съхранява абсолютно всеки пиксел точно, а екранна снимка на цял екран с ретина резолюция съдържа точно толкова информация. Форматът не премахва нищо, което е основното му предимство и същевременно целият проблем.

Има 3 начина да коригирате това и всеки от тях изисква различен компромис. Намаляването на размерите коства резолюция, която най-вероятно не използвате. Намаляването на дълбочината на цвета коства точност на цветовете при снимките. Смяната на формата коства съвместимост извън браузърите. Изберете според това за какво е предназначено изображението.

Вашите 3 опции

• Намалете размерите. Безплатно е и обикновено носи най-голяма полза. Никой се нуждае от екранна снимка с ширина 5000 пиксела.
• Намалете дълбочината на цвета. Работи добре при графики с плоски цветове, но е лош избор за снимки.
• Променете формата. WebP запазва прозрачността и обикновено е с 25 до 35 процента по-малък.

Защо PNG файловете нарастват толкова бързо

Размерът на PNG файла се увеличава правопропорционално на броя пиксели, защото всеки пиксел трябва да бъде описан точно. Удвояването на ширината и височината четирикратно увеличава броя на пикселите и приблизително четирикратно увеличава размера на файла.

Екранна снимка с резолюция 5120 на 2880 от монитор с висока разделителна способност съдържа 14.7 милиона пиксела. При 3 байта на пиксел преди компресия това са 44 MB сурови данни, а PNG компресията обикновено ги намалява до между 4 MB и 12 MB в зависимост от това колко плътни цветове съдържа изображението. Резултат от 8 MB е нещо нормално, а не грешка.

Корекция 1: намалете размерите

Променете размера на изображението до най-големия размер, в който някога ще се показва, което премахва повечето от обема на файла преди да опитвате каквото и да е друго. Това е корекцията с най-голям ефект и най-ниска цена.

Замерете най-голямата ширина, в която изображението някога ще се изобразява на страницата, удвоете я за екрани с висока плътност и я преоразмерете до този резултат. Екранна снимка, показвана с ширина 800 пиксела, се нуждае от 1600 пиксела и нищо повече.

Корекция 2: намалете дълбочината на цвета

Конвертирането от 24-битов цвят към 8-битова палитра намалява PNG файла с 50 до 70 процента и работи само при изображения с ограничен брой цветове. Екранни снимки на интерфейси, диаграми, лога и графики са идеални кандидати.

Техниката съхранява палитра от до 256 цвята и реферира към нея за всеки пиксел, вместо да пази пълните стойности на цветовете. Екранна снимка на потребителски интерфейс рядко съдържа повече от 256 различни цвята, така че намалението е незабележимо. Една фотография съдържа десетки хиляди цветове, така че същото намаление води до видими ивицави преходи в небето и по кожата.

Корекция 3: променете формата

Конвертирайте към WebP за мрежата, което запазва прозрачността и обикновено води до 25 до 35 процента по-малки файлове от PNG. Конвертирайте към JPG само когато изображението е фотография и няма нужда от прозрачност.

• WebP без загуба за графики и екранни снимки, което запазва всеки пиксел точно и все пак спестява 20 до 30 процента.
• WebP със загуба за фотографични PNG файлове, където спестяването достига 70 процента или повече.
• JPG за снимки без прозрачност, където PNG е бил грешният избор от самото начало.
• AVIF за големи фотографични изображения, който компресира още по-силно при файлове над 100 KB.
• Векторна графика за лога и икони, където SVG файлът може да тежи незначителна част от всеки растерен формат.

Най-честата причина: снимка, запазена като PNG

Фотография, запазена като PNG, е от 3 до 5 пъти по-голяма от същата фотография като JPEG, без видима разлика. Тази единична грешка е причина за повечето прекалено големи PNG файлове.

PNG компресията търси повторения, а снимките почти нямат такива на ниво пиксели, тъй като всеки пиксел леко се различава от съседния. Форматът завършва със съхраняването на милиони почти уникални стойности с пълна точност. Запазвайте снимките си като JPEG или WebP и запазете PNG за изображения, които наистина имат плоски цветове или прозрачност.

Как да намалите PNG без загуба на качество

За да намалите PNG файла, запазвайки го без загуба на качество, следвайте тези 5 стъпки подред.

1. Изрежете неизползваните зони, тъй като празните полета все пак увеличават размера на файла.
2. Преоразмерете до най-големия размер на показване, от който изображението някога ще се нуждае, удвоен за екрани с висока плътност.
3. Проверете дали изображението наистина се нуждае от прозрачност, тъй като изображението без алфа канал се компресира по-добре.
4. Намалете цветовата палитра, ако изображението е графика, а не фотография.
5. Конвертирайте към WebP без загуба, който все още е точен и обикновено е с 20 до 30 процента по-малък.

Стъпки 1 и 2 обикновено решават проблема сами по себе си. Останалите стъпки са от значение, когато дадено изображение трябва да остане много голямо, като например екранна снимка на цяла страница в документация.

Защо екранните снимки са толкова големи на съвременните екрани

Дисплеите с висока плътност заснемат с 2 или 3 пъти по-голяма от логическата резолюция, така че екранна снимка на прозорец с ширина 1200 пиксела се запазва при 2400 или 3600 пиксела. Файлът е много по-голям, отколкото е изглеждал прозорецът.

Тази допълнителна резолюция е полезна, когато екранната снимка ще се разглежда на друг екран с висока плътност, и е излишна в противен случай. За документация и помощни статии преоразмеряването обратно до логическия размер намалява размерите наполовина и съкращава файла с около 75 процента, докато изглежда идентично за повечето читатели.

Кога да запазите PNG файла голям

Запазете PNG файла в пълен размер, когато изображението е мастер файл, ресурс за печат или изходен файл, който ще се редактира по-късно. Решенията за компресия принадлежат на копията за разпространение, а не на оригиналите.

Дизайнерски файлове, оригинали на лога, изображения за печат и сканирани документи оправдават размера си. Съхранявайте ги с пълна резолюция и генерирайте по-малки копия за всяко предназначение. Грешката е да публикувате мастер файла, вместо да го запазите, тъй като той заема място на диска веднъж, докато публикуваният мастер файл използва трафик при всяко посещение.

Прозрачността струва повече, отколкото хората очакват

Каналът за прозрачност добавя четвърта стойност към всеки пиксел, увеличавайки суровите данни с около 33 процента преди компресия. Много PNG файлове съдържат този канал, без да го използват.

Екранните снимки, експортираните диаграми и изображенията, обединени върху бял фон, често запазват алфа канал, който е напълно непрозрачен навсякъде. Премахването му не струва нищо визуално и намалява файла осезаемо. Проверете дали изображението наистина се нуждае от прозрачен фон, преди да се предопределите, че каналът е необходим, тъй като повечето изображения, поставени на бяла страница, нямат такава нужда.

Губи ли се качество при компресиране на PNG

Оптимизацията на PNG без загуба не премахва нищо, докато намаляването на цветовете или размерите променя изображението за постоянно. Трите техники често се описват заедно, но не са еквивалентни.

Оптимизацията без загуба пренарежда начина, по който файлът съхранява данните си, и обикновено спестява от 5 до 20 процента при пикселно идентичен резултат. Намаляването на палитрата и преоразмеряването променят самото изображение, което е приемливо за копия за разпространение и неприемливо за оригинали. Пазете оригинала винаги, когато намалението не е обратимо.

Коригиране на цяла папка с прекалено големи PNG файлове

Обработете папката наведнъж, тъй като прекалено големите PNG файлове обикновено идват на групи от един и същ източник. Комплект документация, библиотека с екранни снимки или експорт от инструмент за дизайн обикновено споделят един и същ проблем.

Пуснете до 500 файла наведнъж или плъзнете ZIP архив директно вътре, и задайте размерите и формата веднъж за целия комплект. Всичко се изпълнява във вашия браузър на вашия собствен процесор, така че вътрешните екранни снимки, продуктовите дизайни и клиентската документация никога не стигат до сървър. Нищо не се качва, така че няма политика за съхранение за четене и нищо не остава след това.

Отстранете източника на проблема, както и самите файлове. Инструмент за заснемане на екрана, настроен да запазва PNG с пълна ретина резолюция, ще продължи да произвежда 8 MB файлове за неограничено време. Повечето инструменти за заснемане позволяват формат по подразбиране и коефициент на мащабиране, и промяната на двете наведнъж премахва необходимостта от повторна обработка на екранни снимки след всяка помощна статия.