Почему PNG весит 8 МБ и как это исправить

Ваш PNG весит 8 МБ, потому что этот формат сохраняет каждый пиксель в точности, а полностраничный скриншот на экране Retina действительно содержит огромный объем информации. Формат ничего не отбрасывает — в этом заключается и главное преимущество PNG, и его главная проблема.

Есть 3 способа исправить это, и каждый из них требует определенных компромиссов. Уменьшение разрешения лишает вас пикселей, которые вы, скорее всего, и не использовали. Снижение глубины цвета ухудшает цветопередачу на фотографиях. Смена формата может ограничить совместимость за пределами браузеров. Выбирайте решение исходя из того, для чего нужно изображение.

Ваши 3 варианта

• Уменьшить разрешение. Бесплатный и обычно самый эффективный способ. Никому не нужен скриншот шириной в 5000 пикселей.
• Снизить глубину цвета. Отлично работает для простой графики, но плохо подходит для фотографий.
• Изменить формат. WebP сохраняет прозрачность и обычно весит на 25–35 процентов меньше.

Почему файлы PNG так быстро растут в размере

Размер файла PNG напрямую зависит от количества пикселей, так как каждый пиксель должен быть описан максимально точно. Удвоение ширины и высоты увеличивает количество пикселей в четыре раза и примерно во столько же раз увеличивает размер файла.

Скриншот размером 5120 на 2880 пикселей с монитора высокого разрешения содержит 14,7 миллиона пикселей. При глубине цвета 3 байта на пиксель до сжатия это 44 МБ несжатых данных. Сжатие PNG обычно уменьшает этот объем до 4–12 МБ в зависимости от того, сколько на изображении однотонных областей. Так что размер в 8 МБ — это норма, а не ошибка.

Способ 1: уменьшить разрешение

Измените размер изображения до максимального формата, в котором оно будет отображаться на экране. Это уберет лишний вес еще до применения других методов. Это самый эффективный способ с минимальными потерями.

Определите максимальную ширину, с которой изображение будет отображаться на странице, удвойте это значение для экранов с высокой плотностью пикселей и уменьшите картинку до этого размера. Для скриншота, который показывается с шириной 800 пикселей, нужно максимум 1600 пикселей.

Способ 2: снизить глубину цвета

Преобразование 24-битного цвета в 8-битную палитру уменьшает размер PNG на 50–70 процентов, но подходит только для изображений с ограниченным набором цветов. Скриншоты интерфейсов, диаграммы, логотипы и схемы — идеальные кандидаты.

Этот метод сохраняет палитру, содержащую до 256 цветов, и ссылается на нее для каждого пикселя вместо записи полных значений цвета. Скриншот интерфейса редко содержит более 256 уникальных цветов, поэтому сжатие будет незаметно. Фотография же содержит десятки тысяч оттенков, поэтому такое ограничение приведет к появлению видимых полос на небе или коже.

Способ 3: изменить формат

Конвертируйте в WebP для использования в вебе: этот формат сохраняет прозрачность и обычно весит на 25–35 процентов меньше, чем PNG. Переводите в JPG только в том случае, если это фотография и ей не нужна прозрачность.

• WebP без потерь (lossless) для графики и скриншотов — сохраняет каждый пиксель в точности и при этом экономит 20–30 процентов размера.
• WebP с потерями (lossy) для фотографий в формате 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 в полном разрешении Retina, она будет бесконечно создавать файлы по 8 МБ. Большинство таких программ позволяют настроить формат по умолчанию и масштаб. Изменив эти параметры один раз, вам больше не придется обрабатывать скриншоты для каждой новой статьи.