Как уменьшить размер PNG без потери прозрачности: 10 способов и точная настройка палитры

PNG часто выбирают именно тогда, когда нельзя потерять прозрачность, чёткие контуры, мелкий текст или плоские фирменные цвета. Поэтому уменьшать такой файл нужно не по правилам JPEG. Простое снижение «качества» здесь либо вообще недоступно, либо означает квантизацию цветов, переход к индексированной палитре, удаление служебных блоков и повторное кодирование потока DEFLATE. Результат зависит не только от программы, но и от того, что находится внутри файла: логотип с шестью цветами, интерфейсный скриншот, иллюстрация с градиентами, фотография, прозрачная тень или объект с полупрозрачной окантовкой требуют разных настроек.

Ниже приведены воспроизводимые способы для Windows, macOS и браузера. После них разобрана техническая часть: чем PNG-8 отличается от PNG-24/32, когда lossless-оптимизация уже исчерпана, как уменьшить палитру без рваных краёв, почему вокруг прозрачного объекта появляется белый или тёмный ореол и как проверить файл до публикации. Оригинал лучше сохранять отдельно: часть методов меняет только структуру файла, а часть необратимо сокращает число цветов.

Способ 1. Уменьшение PNG в ФотоМАСТЕРе

ФотоМАСТЕР подходит, когда большой вес связан прежде всего с избыточными пиксельными размерами: например, скриншот 4000×2500 нужно разместить в статье шириной 1200 пикселей, а карточка товара подготовлена вдвое крупнее фактического блока. Этот способ не заменяет специальный PNG-оптимизатор, зато позволяет сразу убрать лишнее разрешение, обрезать пустые поля и сохранить результат в нужном формате. Для логотипа или иконки, уже имеющих правильные размеры, переход сразу к уменьшению ширины не нужен — такой файл лучше сначала прогнать через lossless-оптимизацию.

1. Откройте исходник. Запустите программу и нажмите кнопку «Открыть фото» в центре стартового экрана. Выберите именно PNG, а не его JPEG-копию. После загрузки проверьте, не стал ли прозрачный фон сплошным: если программа показывает прозрачность как однотонный цвет, не делайте вывод по одному лишь виду рабочего поля — окончательно проверять альфа-канал нужно после экспорта в просмотрщике, который умеет показывать шахматную подложку.

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

2. Уберите пустые поля. Если вокруг объекта есть большой прозрачный отступ, обрежьте холст по содержимому. Прозрачные пиксели тоже кодируются: однотонная пустая область сжимается хорошо, но её размеры увеличивают число строк и столбцов, а значит и общий поток данных. Для значка 512×512 с объектом 180×180 корректная обрезка часто даёт больший эффект, чем многократный повторный экспорт.
3. Откройте изменение размера. Перейдите в меню «Файл» и выберите «Изменить размер и сохранить». Укажите ширину и высоту в пикселях. Для веб-страницы ориентируйтесь на фактическую ширину отображения с учётом экранов высокой плотности: изображение, показываемое в блоке 800 пикселей, обычно достаточно подготовить шириной 1600 пикселей для 2×-экрана, а не оставлять исходные 5000–7000 пикселей.

На рабочем экране меню «Файл» содержит команду изменения размера и сохранения. Не путайте уменьшение размеров с DPI. Параметр 72, 96 или 300 DPI сам по себе почти не влияет на вес PNG, если количество пикселей не меняется. Для сайта важны реальные пиксельные размеры; DPI нужен главным образом для расчёта физического размера при печати.

4. Сохраняйте в PNG. В окне экспорта выберите PNG и новый файл, а не перезапись единственного оригинала. Если доступны настройки прозрачности, оставьте её включённой. После сохранения сравните размеры в свойствах файлов.
5. Проверьте края. Откройте результат поочерёдно на белой, серой и тёмной подложке. У объекта с мягкой тенью не должно появиться светлой каймы. У текста и тонких линий проверьте масштаб 100%, 200% и уменьшенное отображение в браузере.

Когда способ подходит. Он эффективен для слишком больших скриншотов, фотографий, иллюстраций и карточек, которые будут выводиться заметно меньше исходного размера. Для уже компактного логотипа 400×150 пикселей лучше не уменьшать геометрию: сначала сохраните исходное разрешение и примените оптимизатор, который перебирает PNG-фильтры и параметры DEFLATE.

Главное ограничение. Изменение размеров удаляет пиксели и потому является необратимой операцией, хотя итоговый PNG продолжает использовать lossless-кодирование. Формулировка «PNG без потерь» относится к способу хранения получившихся пикселей, а не к тому, что уменьшение изображения в два раза каким-то образом сохраняет все исходные детали.

Способ 2. Сжатие PNG в iLoveIMG

iLoveIMG удобен для быстрой браузерной обработки нескольких файлов. В нём следует различать два инструмента. «Сжать изображение» оставляет размеры в пикселях и автоматически подбирает параметры оптимизации, а «Изменить размер» уменьшает ширину и высоту. Если цель — сократить вес без изменения макета, начинайте со сжатия. К изменению размера переходите только после проверки, что файл действительно крупнее области, где будет показан.

На главной странице сервис разделяет операции на отдельные плитки. Для PNG важны как минимум «Compress IMAGE» и «Resize IMAGE». Ошибка распространённая: пользователь выбирает изменение размеров, хотя хотел лишь удалить лишние данные и оптимизировать кодирование.

1. Выберите правильный раздел. Откройте «Сжать изображение» для автоматической оптимизации PNG. Раздел «Изменить размер» используйте отдельно, если известна требуемая ширина в пикселях.

Красная рамка на кадре показывает плитку изменения размера. Для уменьшения веса без изменения геометрии нужна соседняя команда сжатия. Такой выбор особенно важен для иконок интерфейса: изменение размеров может нарушить пиксельную сетку и сделать штрихи неравномерными.

2. Загрузите PNG. Нажмите «Выбрать изображения» или перетащите файлы в окно. Не отправляйте конфиденциальные документы и скриншоты с персональными данными в онлайн-сервис без оценки правил хранения. Для закрытых материалов используйте локальный оптимизатор.

Экран загрузки позволяет выбрать несколько изображений. До начала обработки желательно разделить файлы по типам: логотипы и пиктограммы — в одну группу, полноцветные иллюстрации — в другую. Тогда результат проще оценить и не приходится применять одинаковый порог ко всему набору.

3. Запустите сжатие и скачайте результат. Сервис автоматически выбирает соотношение размера и визуального качества. После обработки сравните исходный и новый вес. Автоматический режим удобен, но не даёт прямого контроля над числом цветов, дизерингом и поведением полупрозрачных пикселей.
4. При необходимости отдельно уменьшите размеры. В режиме Resize укажите ширину и высоту, включите сохранение пропорций и запрет увеличения маленьких файлов. Для серии скриншотов используйте режим «максимальные значения», чтобы вертикальные и горизонтальные изображения не растягивались до одного точного прямоугольника.

Панель Resize options показывает ввод ширины и высоты, флажок сохранения пропорций и запрет увеличивать более маленькие изображения. Такой режим применим, например, когда все иллюстрации статьи должны помещаться в 1600×1200, но не обязаны иметь одинаковое соотношение сторон.

Контроль результата. Просмотрите прозрачные края на двух контрастных фонах, проверьте мелкий текст и диагональные линии. Если автоматическое сжатие дало цветовые ступени в градиенте, используйте Photoshop, pngquant/Squoosh или другой инструмент с настройкой палитры. Если изображение осталось визуально идентичным, но выигрыш составил всего несколько процентов, вероятно, исходник уже был хорошо оптимизирован.

Способ 3. Точная настройка PNG-8 и PNG-24 в Adobe Photoshop

Photoshop полезен, когда нужен визуальный контроль палитры, прозрачности и дизеринга. Здесь можно сравнивать PNG-8 и PNG-24, уменьшать число цветов, видеть предполагаемый вес и сразу замечать полосы в градиентах. Для скриншотов, логотипов и интерфейсной графики это один из наиболее предсказуемых способов, но только при правильном выборе формата.

1. Откройте файл и вызовите экспорт для веба. В современных версиях используйте «Файл» → «Экспортировать» → «Сохранить для Web (старая версия)». Комбинация клавиш зависит от системы и раскладки, поэтому надёжнее ориентироваться на меню. Не выбирайте JPEG, если требуется прозрачность или безупречно чёткие контуры текста.

На кадре показан путь к диалогу «Сохранить для Web». В обычном «Сохранить как» тоже можно получить PNG, но окно веб-экспорта даёт больше контроля над индексированной палитрой и предварительной оценкой размера.

2. Сравните PNG-24 и PNG-8. PNG-24 сохраняет полноцветные RGB-данные; при наличии альфа-канала файл фактически хранит 32 бита на пиксель до сжатия: три цветовых канала и канал прозрачности. PNG-8 использует индексированную палитру до 256 цветов и обычно значительно легче на логотипах, схемах, пиктограммах и простых скриншотах.

Диалог экспорта показывает окно предварительного просмотра, формат, параметры палитры, метаданные и оценочный размер. Если в правой части выбран JPEG, переключите формат на PNG-8 или PNG-24 — JPEG не сохраняет альфа-прозрачность.

3. Для PNG-8 задайте число цветов. Начните с 256, затем последовательно проверьте 128, 64, 32 и 16. Не выбирайте минимальное число автоматически. Логотип с пятью чистыми цветами может выглядеть безупречно при 16–32 цветах, а интерфейсный скриншот с тенями и сглаженным текстом потребует 128–256.
4. Выберите алгоритм палитры. Adaptive или Perceptual обычно лучше сохраняют визуально важные оттенки. Selective может быть полезен для веб-графики с преобладанием системных цветов. Exact доступен только тогда, когда исходное изображение уже содержит не более 256 цветов.
5. Настройте дизеринг. Diffusion распределяет ошибку цвета в виде мелкой зернистости и помогает скрыть полосы в градиентах, но увеличивает энтропию и вес. Pattern создаёт заметный регулярный рисунок. Noise разбивает полосы менее структурированно. Для плоского логотипа дизеринг часто лучше отключить, чтобы края и заливки оставались чистыми.

На кадре виден выбор PNG-8/PNG-24, количество цветов и шахматный фон прозрачности. Для объекта с мягкой тенью PNG-24 безопаснее, потому что полноценно сохраняет полупрозрачные уровни. PNG-8 может быть приемлем, если редактор сохраняет альфа-прозрачность корректно, но старые варианты веб-экспорта иногда ограничивают прозрачность и требуют особенно внимательной проверки краёв.

6. Проверьте Transparency и Matte. Флажок Transparency должен быть включён, если фон обязан оставаться прозрачным. Поле Matte не должно подмешивать белый или другой цвет в полупрозрачные края, если изображение будет использоваться на разных фонах. Матирование допустимо только тогда, когда фон заранее известен и всегда одинаков.
7. Уберите лишние метаданные. В поле Metadata оставьте «None» или только те сведения, которые действительно нужны. Для веб-иконки не требуются EXIF, координаты, комментарии и миниатюры. Цветовой профиль удаляйте осознанно: для обычной веб-графики безопасно привести изображение к sRGB, но в полиграфическом процессе профиль может быть частью контроля цвета.
8. Сравните варианты в режиме 2-Up или 4-Up. Разместите рядом PNG-24, PNG-8 на 256 цветов, PNG-8 на 128 и PNG-8 на 64. Смотрите не только на крупные области, но и на волосы, дым, тени, полупрозрачное свечение, тонкий шрифт и диагональные линии.

Пункт «Изображение» → «Режим» → «Индексированные цвета» даёт ещё один путь к палитре. Он полезен, если нужно заранее управлять таблицей цветов до экспорта. После перехода в индексированный режим сохраните отдельную копию: возврат в RGB не восстановит оттенки, которые были отброшены при квантизации.

Практический порядок. Для логотипа сначала попробуйте PNG-8, 64 цвета, без дизеринга. Если всё чисто — снижайте до 32 или 16. Для скриншота начните с 256 цветов и Diffusion 50–75%, затем сравните 128. Для иллюстрации с плавными градиентами оставьте PNG-24 или используйте современный квантизатор с качественной обработкой альфа-канала. Для фотографии PNG обычно невыгоден; если прозрачности нет и требования допускают другой формат, целесообразнее JPEG, WebP или AVIF, но это уже смена формата, а не оптимизация PNG.

Как распознать чрезмерное уменьшение палитры. На градиентах появляются ступени, вокруг контрастных объектов — цветные точки, тонкие серые линии окрашиваются, текст теряет равномерность, а мягкая тень превращается в несколько жёстких колец. Увеличение числа цветов на один шаг часто исправляет эти дефекты при умеренном росте веса.

Способ 4. Автоматическая квантизация в TinyPNG

TinyPNG выполняет интеллектуальное сжатие с потерями: прежде всего сокращает количество цветов так, чтобы визуальные изменения были минимальными, и сохраняет прозрачность. Он подходит для быстрой подготовки веб-графики, когда не требуется вручную выбирать палитру. Для юридически значимых макетов, исходников дизайна и изображений, где каждый оттенок является данными, сохраняйте несжатую копию.

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

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

2. Дождитесь окончания оптимизации. Сервис показывает исходный размер, новый размер и процент экономии. Большая цифра экономии не гарантирует отсутствие дефектов: на прозрачных объектах обязательно проверяйте края, а на градиентах — равномерность перехода.

Во время обработки строка файла отображает прогресс. Не закрывайте вкладку до появления кнопки загрузки. Для серии файлов удобно записать исходный и конечный вес: так видно, какие типы графики сервис сжимает лучше всего.

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

Финальный экран показывает процент экономии и новый вес. Для контрольной проверки наложите оптимизированный файл поверх исходного в редакторе и переключайте видимость верхнего слоя. При масштабе 100% изменения должны быть незаметны в нормальном сценарии использования. Если разница видна на логотипе, используйте lossless-инструмент или ручной PNG-8 с большей палитрой.

В TinyPNG сильная экономия достигается не только повторным DEFLATE-кодированием, но и сокращением цветовых данных. Поэтому полученный файл нельзя считать побитово эквивалентным исходнику.

Способ 5. Локальная оптимизация и сравнение в RIOT

RIOT показывает исходное и оптимизированное изображение рядом, а также выводит оценку веса. Для PNG переключитесь на вкладку PNG в нижней части окна: параметры JPEG Quality и Chroma subsampling к PNG не относятся. Кадры интерфейса ниже демонстрируют общий порядок открытия, сравнения и сохранения; перед обработкой PNG обязательно выберите соответствующую вкладку.

1. Откройте файл. Нажмите Open или используйте «File» → «Open». Если программа предлагает автоматически выбрать формат, проверьте, что результат остаётся PNG. Не соглашайтесь на JPEG для прозрачной графики.

В стартовом окне видны две панели и вкладки JPEG, WEBP, PNG и GIF. После загрузки PNG активной должна быть вкладка PNG. Слева остаётся исходник, справа — оптимизированный вариант.

2. Настройте PNG-параметры. Если доступно уменьшение количества цветов, начните с максимальной палитры и снижайте её постепенно. Для lossless-режима не включайте цветовую квантизацию. Проверьте параметры удаления метаданных и сохранения прозрачности.
3. Сравните две панели. Смотрите на вес над изображениями и увеличивайте проблемные области. У PNG основными зонами риска будут не «JPEG-блоки», а потеря оттенков, ступени в градиентах, изменение полупрозрачной тени и рваные диагонали после палитризации.

Двухпанельный режим полезен тем, что изменение веса видно сразу. На иллюстративном кадре активна JPEG-вкладка, поэтому ползунок Quality нельзя переносить в инструкцию по PNG. Для PNG оцениваются палитра, прозрачность, метаданные и параметры кодирования, доступные в соответствующей вкладке.

4. Сохраните копию. Нажмите Save As, задайте новое имя и проверьте расширение .png. Не перезаписывайте исходник, пока не проведена проверка на разных фонах.

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

Когда использовать. RIOT удобен на Windows для единичных файлов и визуального сравнения. Для полностью автоматической пакетной lossless-оптимизации большого каталога лучше подходят PNGGauntlet, OxiPNG или OptiPNG, поскольку у них проще обеспечить одинаковые параметры и воспроизводимый журнал обработки.

Способ 6. Ручной баланс размера и качества в ImageCompressor

ImageCompressor, также известный по интерфейсу Optimizilla, позволяет загрузить несколько файлов, сравнить исходник и результат ползунком и вручную изменить уровень качества. Для PNG этот «уровень» обычно управляет силой цветовой оптимизации, а не JPEG-квантованием. Из-за автоматического характера алгоритма точное число цветов может не отображаться, поэтому окончательное решение принимается по визуальному сравнению.

1. Загрузите файлы. Нажмите Upload Files или перетащите PNG. Сервис формирует очередь. Для аккуратной проверки начните с одного эталонного файла каждого типа: логотип, скриншот, иллюстрация, объект с мягкой прозрачностью.

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

2. Откройте увеличенный предпросмотр. Выберите миниатюру и перемещайте ползунок Quality. На разделённом изображении одна сторона показывает исходник, другая — оптимизированный результат. Контролируйте мелкий текст, контур объекта и прозрачную тень.

На кадре видны исходный и сжатый размеры, разделитель сравнения и ползунок. Иллюстрация на скриншоте имеет формат JPEG, но расположение элементов управления совпадает с PNG-режимом. Для PNG не ищите характерные JPEG-квадраты: при чрезмерной оптимизации раньше проявятся потеря оттенков и зернистость дизеринга.

3. Примените значение и скачайте результат. После настройки нажмите Apply, затем Download у файла или Download All для всей очереди. Если разные изображения требуют разных значений, настройте каждое отдельно до общей загрузки.

Кнопка Download All сохраняет обработанную очередь. После распаковки не смешивайте результаты с исходниками: положите их в отдельную папку и сравните контрольные суммы, размеры, габариты и наличие альфа-канала.

Ограничение. Ползунок без явного числа цветов затрудняет воспроизводимость. Для команды дизайнеров лучше зафиксировать инструмент и конкретные параметры: например, PNG-8/128 цветов/без дизеринга или pngquant с диапазоном качества. Тогда два сотрудника получают сопоставимый результат, а не подбирают «примерно одинаковое» положение ползунка.

Способ 7. Уменьшение размеров PNG в Microsoft Paint

Paint не является PNG-оптимизатором. Он полезен только для обрезки и уменьшения числа пикселей, когда файл заведомо больше требуемого. Этот способ нельзя называть lossless по отношению к исходному изображению: при уменьшении размеров детали пересчитываются. Зато он доступен на Windows без установки сложного редактора.

1. Запустите Paint. Откройте приложение через поиск Windows. Пустой холст на стартовом экране не имеет отношения к размеру будущего файла — сначала загрузите исходник.

2. Откройте PNG. Нажмите «Файл» → «Открыть» и выберите изображение. Сразу проверьте его размер в строке состояния. Если объект занимает малую часть холста, сначала выполните обрезку.

3. Нажмите «Изменить размер». В классическом Paint команда находится на ленте. Горячая клавиша может отличаться между версиями, поэтому при сомнении используйте кнопку интерфейса.

4. Укажите пиксели. Переключитесь с процентов на пиксели, включите «Сохранять пропорции» и задайте ширину. Для статьи с блоком 1200 пикселей можно подготовить 1200 пикселей для обычного экрана или 2400 для 2×-вывода. Не уменьшайте иконку 24×24 из исходника 32×32 произвольным масштабированием, если она нарисована по пиксельной сетке: лучше экспортировать её из исходного векторного файла в точном размере.
5. Подтвердите и проверьте края. После пересчёта масштабируйте изображение до 100%. Тонкие линии не должны стать размытыми или неравномерными.

6. Сохраните как PNG. Выберите «Файл» → «Сохранить как» → «Изображение в формате PNG». Задайте новое имя. Если открыть прозрачный PNG в версии Paint, которая не поддерживает нужный вариант альфа-канала, фон может измениться; поэтому перед работой сделайте тест на копии.

Подходящие задачи. Большой непрозрачный скриншот, простая схема, фотография в PNG без необходимости сохранять исходное разрешение. Неподходящие задачи: логотип с мягкой тенью, объект с полупрозрачными волосами, пиксель-арт, уже правильно подготовленная иконка, файл, который нужно уменьшить без изменения геометрии.

Способ 8. Три уровня сжатия в WebsitePlanet

Онлайн-инструмент WebsitePlanet предлагает уровни Low, Medium и High. Это удобно, когда нужен быстрый выбор без ручной работы с палитрой. Средний режим разумно использовать как отправную точку, затем проверить результат и при необходимости перейти к низкому или высокому уровню.

1. Откройте инструмент через меню Tools. Найдите пункт Compress PNG/JPG. Не используйте общий конвертер, если нужно сохранить PNG.

На кадре показан путь через выпадающее меню Tools. Страница компрессора должна явно упоминать PNG и сохранение прозрачности.

2. Перетащите PNG. Область Drag your files here принимает файл или открывает диалог выбора.

Перед загрузкой полезно записать исходный вес и размеры. После обработки эти значения сравниваются с итоговыми; иначе легко перепутать экономию от сжатия с экономией от случайного изменения разрешения.

3. Раскройте Additional settings и выберите режим. Low даёт минимальное вмешательство, Medium — компромисс, High — максимальную экономию с большим риском видимых изменений. Для логотипа начните с Low, для скриншота — с Medium, для полноцветной иллюстрации сравните все три.

Панель режимов располагается под областью загрузки. Во время обработки не переключайте режим: дождитесь результата, скачайте его и только затем повторите тест с другим значением, чтобы сравнение было корректным.

4. Скачайте файл и зафиксируйте экономию. Результат показывает исходный вес, новый вес и процент уменьшения. При серии файлов используйте Download All, но проверяйте каждый тип отдельно.

Финальная строка показывает 49% экономии в демонстрационном примере. Для собственного PNG процент может быть как значительно выше, так и почти нулевым. Малый выигрыш у уже оптимизированного логотипа — нормальный результат и не повод снижать качество до появления дефектов.

Способ 9. Полностью lossless-обработка в PNGGauntlet

PNGGauntlet предназначен для Windows и объединяет несколько оптимизаторов. Он меняет способ хранения пикселей, перебирает варианты кодирования и удаляет допустимый служебный балласт, но не обязан менять сами пиксели. Поэтому это один из лучших первых шагов для логотипа, интерфейсного скриншота или прозрачной графики, качество которой нельзя ухудшать.

1. Создайте отдельную папку для результата. В поле Output Directory укажите каталог, отличный от исходного. Флажок Overwrite Original Files оставляйте выключенным до завершения проверки.
2. Добавьте PNG. Нажмите Add Images или перетащите файлы. Для пакетной работы можно загрузить всю серию, но сначала протестируйте один сложный файл с полупрозрачными краями.
3. Запустите Optimize. Программа последовательно применяет доступные оптимизаторы. Процесс может идти дольше, чем обычное пересохранение, потому что выполняется перебор параметров.

Таблица показывает исходный и новый размер, процент от оригинала и прогресс. Строка с 100% означает, что для конкретного файла улучшение не найдено; это не ошибка. Если файл уже оптимизирован или содержит сложный шум, lossless-метод может почти ничего не выиграть.

Для отдельного разбора интерфейса и установки используйте страницу про сжатие PNG в PNGGauntlet. В рабочем процессе важно после оптимизации выполнить побайтовую проверку декодированных пикселей: размеры, режим RGBA и значения пикселей должны совпасть, если включён только lossless-режим.

Способ 10. ImageOptim на macOS

ImageOptim работает по принципу перетаскивания: файл добавляется в окно, после чего программа автоматически применяет оптимизаторы и показывает экономию. По умолчанию инструмент ориентирован на сжатие без видимой потери качества и удаление раздутых метаданных. Важно понимать, что удаление цветового профиля или другой служебной информации может быть нежелательно в профессиональном цветовом процессе, поэтому настройки следует проверить заранее.

1. Откройте настройки. Для строгого lossless-процесса отключите lossy minification. Проверьте, какие метаданные удаляются. Если файл предназначен только для сайта и уже приведён к sRGB, лишние EXIF и комментарии обычно не нужны.
2. Перетащите PNG в окно. Программа начинает обработку автоматически. Лучше работать с копией: ImageOptim может заменять файл на оптимизированный вариант в том же месте.
3. Оцените столбец Savings. Зелёная отметка означает завершение. Отрицательная или нулевая экономия не требует дополнительных проходов.

Окно показывает список файлов, размер и процент экономии. Официальное описание отдельной утилиты подчёркивает удаление лишних метаданных и lossless-сжатие. Для альтернативных инструментов на Windows можно использовать OptiPNG, OxiPNG или PNGGauntlet.

На сайте доступны отдельные материалы про lossless-оптимизацию в OptiPNG и многопоточную обработку в OxiPNG. Эти утилиты удобны для автоматизации: параметры фиксируются в команде, а результат можно воспроизводить на сервере и в системе сборки.

Как определить, почему конкретный PNG весит много

До выбора программы полезно провести короткую диагностику. Один и тот же размер файла может быть вызван совершенно разными причинами, а значит универсальный совет «снизьте качество до 80%» для PNG не работает.

Проверьте пиксельные размеры

Умножьте ширину на высоту. Изображение 5000×3000 содержит 15 миллионов пикселей. В RGBA-представлении до сжатия это около 60 миллионов байт только на цвет и альфа-канал. DEFLATE уменьшит поток, если соседние пиксели похожи, но фотографический шум и мелкая текстура сжимаются хуже. Если файл выводится на сайте шириной 1000 пикселей, уменьшение геометрии обычно является главным резервом.

Определите цветовой тип

У PNG есть индексированный цвет, градации серого, truecolor RGB и варианты с альфа-каналом. Логотип из десяти цветов, сохранённый как полноцветный RGBA, содержит избыточную глубину. Перевод в индексированную палитру может дать сильную экономию. Но фотография или иллюстрация с тысячами оттенков при переходе к 256 цветам неизбежно потеряет часть цветовой информации.

Проверьте альфа-канал

Иногда файл имеет альфа-канал, хотя все пиксели полностью непрозрачны. Удаление ненужного канала сокращает данные. Обратная ситуация опаснее: редактор видит прозрачность, но экспортирует только бинарную маску — полностью прозрачный или полностью непрозрачный пиксель. Тогда мягкие края становятся зубчатыми.

Посчитайте реальные уникальные цвета

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

Найдите метаданные и дополнительные блоки

PNG может содержать текстовые комментарии, время изменения, профиль ICC, гамму, сведения о физическом размере пикселя и другие ancillary chunks. Некоторые блоки важны для цвета или рабочего процесса, другие можно удалить. Утилита TweakPNG для просмотра структуры PNG помогает увидеть состав файла, но удалять блоки вручную следует только при понимании их назначения.

Оцените визуальную энтропию

Однотонная заливка, повторяющиеся линии и большие прозрачные области хорошо сжимаются. Шум, зерно, дым, листва, волосы и случайная текстура — плохо. Два PNG одинакового размера в пикселях и с одинаковой глубиной цвета могут отличаться по весу в несколько раз только из-за структуры изображения.

Что именно делает lossless-оптимизация PNG

Lossless-оптимизатор не обязан менять цвет или прозрачность пикселей. Он ищет более компактное представление тех же данных. Чтобы понимать предел метода, полезно разобрать путь кодирования.

Фильтрация строк

Перед DEFLATE каждая строка PNG может быть преобразована одним из пяти базовых фильтров: None, Sub, Up, Average или Paeth. Фильтр не размывает изображение и не удаляет детали. Он заменяет исходные значения на разности относительно соседних пикселей или предыдущей строки, чтобы в потоке появилось больше повторяющихся и малых чисел. Декодер выполняет обратное преобразование и восстанавливает исходные байты.

Оптимизаторы перебирают стратегии выбора фильтра для каждой строки. На горизонтальных градиентах хорошо работает один вариант, на вертикальных — другой, на плоской графике — третий. Поэтому повторное сохранение тем же редактором может дать почти тот же вес, а специализированный оптимизатор — выиграть дополнительные проценты.

DEFLATE и уровень поиска

Стандартный PNG использует DEFLATE — комбинацию поиска повторов и кодирования Хаффмана. Более высокий уровень сжатия обычно означает больше вычислений при создании файла, а не ухудшение картинки. Декодирование в браузере остаётся совместимым. Утилиты могут пробовать разные размеры блоков, стратегии и параметры, выбирая самый маленький результат.

Удаление необязательных данных

EXIF, текстовые комментарии, миниатюры и сведения о программе-авторе могут занимать от сотен байт до десятков килобайт. Для маленькой иконки это заметная доля. Однако профиль ICC, гамма и сведения о цвете влияют на отображение. Если удалить их из файла с нестандартным цветовым пространством, разные устройства могут показать иной цвет. Безопасный веб-процесс обычно включает предварительное преобразование в sRGB, а затем удаление лишних блоков.

Оптимизация прозрачных пикселей

У полностью прозрачного пикселя видимый цвет не отображается, но RGB-значения всё равно могут храниться. Некоторые оптимизаторы нормализуют цвет невидимых пикселей, улучшая сжатие. Это не меняет обычное отображение, однако может повлиять на последующую обработку, если файл используется как промежуточный исходник и программа учитывает скрытые RGB-данные. Поэтому рабочий мастер храните отдельно, а оптимизированную версию считайте публикационной.

Главный вывод: lossless-проход имеет естественный предел. Если после него файл всё ещё слишком тяжёлый, придётся уменьшить размеры, число цветов, глубину канала или сменить формат. Бесконечные повторные запуски разных DEFLATE-оптимизаторов не превратят фотографический PNG в файл размером с JPEG без изменения данных.

Палитра PNG-8 и допустимая квантизация

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

Как выбрать количество цветов

• 8–16 цветов: монохромные пиктограммы, простые схемы, логотипы без теней и градиентов.
• 32–64 цвета: логотипы со сглаживанием, простая инфографика, интерфейсные элементы с небольшим количеством оттенков.
• 128–256 цветов: скриншоты, сложная плоская иллюстрация, графика с небольшими градиентами.
• Truecolor: фотографии, дым, волосы, световые эффекты, широкие плавные градиенты и полупрозрачные тени.

Эти значения не являются жёсткими правилами. На файл влияют размер, контраст, цветовое распределение и способ просмотра. Правильный порог — минимальная палитра, при которой дефекты не видны в реальном масштабе и на целевых фонах.

Зачем нужен дизеринг

Когда двух соседних оттенков нет в палитре, алгоритм может чередовать доступные цвета, создавая визуальное среднее. Это скрывает полосы, но добавляет мелкий шум. DEFLATE хуже сжимает случайный рисунок, поэтому сильный дизеринг иногда заметно увеличивает файл. Для логотипов и текста чаще лучше увеличить палитру и уменьшить дизеринг; для большого плавного градиента — наоборот, умеренный диффузионный дизеринг может выглядеть лучше.

Почему современные квантизаторы лучше простого «256 цветов»

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

Для ручного сравнения удобно использовать Squoosh CLI для пакетного сжатия: он позволяет сопоставлять исходник и результат, изменять параметры и видеть вес. При работе с прозрачностью проверяйте не только центральные заливки, но и пиксели с альфой от 1 до 254.

Как проверить квантизацию численно

В редакторе или скрипте посчитайте число уникальных цветов до и после. Затем сравните изображения по пикселям. Для lossless-результата различий быть не должно. Для lossy-квантизации важнее карта ошибки: если изменения сосредоточены в плавных областях и не создают контуров, результат может быть приемлем. Изменение фирменного цвета логотипа даже на несколько единиц иногда недопустимо, особенно если цвет задан брендбуком.

Как сохранить прозрачность без белых ореолов и рваных краёв

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

Прямой и предварительно умноженный альфа-канал

В прямом альфа-представлении RGB хранится независимо от прозрачности. В premultiplied alpha цвет уже умножен на значение альфы. Если программа неверно интерпретирует один вариант как другой, полупрозрачные края темнеют или светлеют. При обмене между редакторами используйте стандартный PNG-экспорт и проверяйте результат в браузере, а не только в одном приложении.

Матирование под фиксированный фон

Matte смешивает края с выбранным цветом. Это допустимо для изображения, которое всегда будет на одном известном фоне. Если фон может быть белым, тёмным, цветным или градиентным, матирование создаст кайму. В Photoshop для универсального прозрачного PNG оставляйте Transparency включённым и не подмешивайте белый фон.

Бинарная прозрачность против полупрозрачности

Полностью прозрачный/непрозрачный край подходит для пиксель-арта и некоторых простых значков. Для волос, меха, дыма, мягкой тени, свечения и сглаженных диагоналей нужны промежуточные значения альфы. Если при переходе к PNG-8 инструмент сохраняет только один прозрачный индекс, край станет зубчатым. В таком случае используйте PNG-24 с альфа-каналом или квантизатор, который поддерживает полноценную альфа-палитру.

Цвет невидимых пикселей

Пиксель с альфой 0 не виден, но его RGB может участвовать в ресэмплинге при масштабировании. Если вокруг красного объекта полностью прозрачные пиксели белые, при уменьшении некоторые программы смешивают красный, белый и альфу, создавая светлый ореол. Решение — расширить цвет объекта в прозрачную область или использовать корректный alpha-aware ресэмплинг.

Проверка на трёх подложках

1. Откройте PNG на белом фоне и проверьте тёмные контуры.
2. Переключите фон на почти чёрный и найдите светлую кайму.
3. Используйте насыщенный цвет, например синий или красный: на нём заметны полупрозрачные загрязнения.
4. Увеличьте до 400% и посмотрите на один-пять пикселей вокруг края.
5. Вернитесь к 100%: дефект, видимый только при экстремальном увеличении, может не иметь практического значения, но для иконок интерфейса даже один пиксель важен.

Как исправить уже появившийся ореол

Вернитесь к исходнику с корректной прозрачностью. Не пытайтесь стирать кайму ластиком после квантизации: это часто создаёт новый рваный край. В редакторе удалите матирование, восстановите цветовой слой под маской, выполните Defringe/Remove White Matte только при понимании результата и экспортируйте заново. Для логотипов лучше повторно получить PNG из векторного файла, чем ремонтировать повреждённую растровую копию.

Оптимальный порядок для разных типов PNG

Логотип с плоскими цветами

1. Экспортируйте из векторного исходника в точном размере или 2×-размере.
2. Обрежьте лишний прозрачный холст.
3. Посчитайте цвета и попробуйте PNG-8 без дизеринга.
4. Начните с 64 цветов, затем проверьте 32 и 16.
5. Сохраните прозрачность и сравните фирменные цвета по числовым значениям.
6. Прогоните результат через lossless-оптимизатор.

Для логотипа важно не максимальное процентное уменьшение, а точность контура и цвета. Иногда PNG-24 после OxiPNG весит немного больше PNG-8, но является безопаснее для градиентной версии знака.

Скриншот интерфейса

1. Обрежьте пустые панели и личные данные.
2. Уменьшите ширину до фактического размера публикации с запасом для 2×.
3. Попробуйте PNG-8 на 256 цветов.
4. Проверьте серый текст, тонкие разделители, тени окон и цветные индикаторы.
5. Если появились ступени, верните 256 цветов или используйте truecolor.
6. Выполните lossless-проход.

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

Иллюстрация

1. Определите, есть ли большие плоские области или преобладают градиенты.
2. Для плоского рисунка протестируйте 128–256 цветов с умеренным дизерингом.
3. Для сложного света и текстуры оставьте truecolor.
4. Проверьте контуры на тёмном и светлом фоне.
5. Удалите ненужные метаданные и оптимизируйте DEFLATE.

Иллюстрации сильно различаются. Комикс с чёткими заливками может стать очень лёгким в PNG-8, а цифровая живопись с текстурными кистями будет вести себя почти как фотография.

Фотография, сохранённая в PNG

1. Уточните, действительно ли нужен PNG. Если прозрачности нет, другой формат почти всегда эффективнее.
2. Если PNG обязателен, сначала уменьшите размеры до требуемых.
3. Не переходите автоматически к 256 цветам: кожа, небо и тени быстро получают полосы.
4. Удалите метаданные, если они не нужны.
5. Примените lossless-оптимизацию и примите ограниченный выигрыш.

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

Объект с мягкой тенью или полупрозрачными краями

1. Оставьте полноценный альфа-канал.
2. Не используйте матирование под белый фон.
3. Сначала примените lossless-оптимизацию.
4. Если нужна квантизация, используйте алгоритм, учитывающий альфу.
5. Проверьте края на белом, чёрном и насыщенном фоне.
6. При появлении каймы вернитесь к truecolor RGBA.

Экономия на альфа-канале не должна разрушать главный смысл PNG. Для товарного объекта с мягкой тенью лучше сохранить на несколько десятков килобайт больше, чем получить заметный прямоугольный или белёсый контур.

Как попасть в ограничение 100, 300 или 500 КБ

Когда сайт требует точный предел, действуйте последовательно. Попытка сразу выставить минимальное качество затрудняет понимание, какой шаг испортил изображение.

1. Lossless-проход. Примените PNGGauntlet, ImageOptim, OptiPNG или OxiPNG. Если файл уже меньше лимита, остановитесь.
2. Обрезка. Удалите пустой прозрачный холст и ненужные поля.
3. Размеры. Снизьте ширину до фактически необходимой. Делайте это одним пересчётом из оригинала, а не несколькими последовательными уменьшениями.
4. Палитра. Для графики попробуйте PNG-8: 256, 128, 64 цвета. После каждого шага проверяйте дефекты.
5. Дизеринг. Уменьшайте его, если файл всё ещё слишком большой и плоские области начинают зерниться.
6. Альфа. Если прозрачность не используется, удалите канал. Если используется только один прозрачный цвет и края жёсткие, индексированный вариант может быть достаточен.
7. Смена формата. Для фотографии без прозрачности рассмотрите JPEG/WebP/AVIF. Это крайний шаг, потому что итог перестаёт быть PNG.

Для лимита в килобайтах полезно вести таблицу: имя версии, размеры, число цветов, режим прозрачности, вес и замеченные дефекты. Например: 1600 px/truecolor/820 КБ; 1200 px/truecolor/510 КБ; 1200 px/256 цветов/280 КБ. Такая запись показывает, что ограничение достигнуто палитрой, а не случайным повторным сохранением.

Не пытайтесь «дожать» последние 5–10 КБ ценой заметной каймы. Иногда безопаснее немного уменьшить геометрию — например, с 1200 до 1160 пикселей — чем резко сокращать палитру с 128 до 64 цветов.

Пакетная обработка PNG для сайта

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

Разделите коллекцию на классы

• логотипы и пиктограммы;
• скриншоты;
• иллюстрации;
• фотографии;
• PNG с мягкой прозрачностью;
• APNG-анимации.

Для каждого класса назначьте свою политику. Например: иконки — точный размер и PNG-8 без дизеринга; скриншоты — максимум 2000 пикселей и до 256 цветов; прозрачные товары — truecolor RGBA плюс lossless; фотографии — проверка целесообразности PNG.

Сохраняйте исходники вне папки публикации

Структура может быть такой: originals, working, optimized, rejected. Оптимизатор получает копии из working, пишет в optimized, а файлы с визуальными дефектами перемещаются в rejected. Это предотвращает необратимую потерю мастеров.

Фиксируйте версии инструментов и параметры

Команда OxiPNG, параметры pngquant, размер и алгоритм ресэмплинга должны быть записаны в скрипте или документации. После обновления инструмента прогоните контрольный набор и сравните результат. Автоматическая оптимизация не должна неожиданно изменить цвет, прозрачность или анимацию.

Не обрабатывайте файл многократно

Lossless-повтор обычно лишь тратит время, а повторная lossy-квантизация ухудшает палитру. Каждая публикационная версия должна строиться из оригинала по одному и тому же конвейеру. Если нужен другой размер, снова возьмите мастер, а не уменьшайте уже уменьшенный файл.

Проверяйте экономию на уровне страницы

Иногда уменьшение каждой иконки на 2 КБ почти не влияет на скорость, а один полноэкранный PNG весом 4 МБ остаётся главным узким местом. Сортируйте файлы по весу и сначала обрабатывайте крупнейшие. Для сайта также учитывайте кеширование, lazy loading, размеры в разметке и современные альтернативные форматы.

Как устроен PNG и откуда берётся лишний вес

PNG — не просто массив пикселей с расширением .png. Файл состоит из сигнатуры и последовательности блоков, которые в спецификации называются chunks. Каждый блок содержит тип, длину, данные и контрольную сумму CRC. Такая структура позволяет хранить изображение, палитру, прозрачность, цветовые параметры, текстовые комментарии и служебную информацию независимо друг от друга. Понимание блоков помогает отличать безопасную оптимизацию от удаления данных, которые нужны конкретному проекту.

Обязательные блоки

IHDR идёт первым и задаёт ширину, высоту, разрядность, цветовой тип, методы сжатия и фильтрации, а также признак чересстрочной развёртки. Изменение размеров, разрядности или цветового типа меняет именно смысл данных, описанных в IHDR. Поэтому оптимизатор не может без потерь превратить полноцветное изображение в индексированное: для этого потребуется пересчитать пиксели и палитру.

IDAT содержит сжатый поток пиксельных данных. Блоков IDAT может быть несколько, но при декодировании они воспринимаются как единый непрерывный поток. Основной выигрыш lossless-оптимизаторов возникает здесь: программа по-другому выбирает построчные фильтры и параметры DEFLATE, не меняя результат после декодирования.

IEND завершает PNG. В нём нет пикселей или настроек, однако его наличие обязательно. Повреждённый или обрезанный файл может открываться в одном просмотрщике и отказываться открываться в другом, поэтому после агрессивной обработки полезно проверять файл независимым декодером.

Палитра и прозрачность

PLTE хранит таблицу цветов индексированного PNG. Пиксель в таком файле содержит не полный набор RGB-компонентов, а номер записи палитры. При 256 цветах индекс укладывается в 8 бит; при 16 цветах возможна 4-битная глубина; при двух цветах — 1 бит. Это одна из причин, по которой простой логотип или схема могут уменьшиться в несколько раз после корректного перехода в PNG-8.

tRNS задаёт прозрачность без полноценного альфа-канала. В индексированном PNG он может хранить значение альфы для отдельных записей палитры. Это важное уточнение: PNG-8 не ограничен только «прозрачно или непрозрачно», он способен иметь несколько уровней прозрачности через палитру. Но число сочетаний цвета и альфы ограничено размером палитры, поэтому мягкие тени и полупрозрачные градиенты быстро расходуют доступные записи и могут получить полосы или рваный край.

Цветовые и служебные блоки

Блоки sRGB, iCCP, gAMA и cHRM связаны с интерпретацией цвета. Их нельзя бездумно считать мусором. Для обычной веб-графики, уже приведённой к sRGB, часть данных может быть избыточна. Но если исходник находится в другом цветовом пространстве, удаление профиля без предварительного преобразования способно изменить видимые цвета на другом устройстве или в другом приложении.

Текстовые блоки tEXt, zTXt и iTXt могут содержать комментарии, описание, авторство или данные приложения. Блоки eXIf, tIME и другие ancillary chunks также увеличивают файл. Для публикационной копии их часто удаляют, но полный мастер лучше хранить отдельно. Оптимизация должна отвечать на вопрос «нужны ли эти данные в конечном файле», а не автоматически уничтожать всё, что не является пикселями.

Почему одинаковые пиксели дают разный вес

Два PNG могут декодироваться в абсолютно одинаковый массив RGBA и при этом заметно отличаться по размеру. Причины: разные фильтры строк, уровень и стратегия DEFLATE, порядок и набор необязательных блоков, наличие interlace, разбиение потока на IDAT и неэффективная палитра. Поэтому повторное сохранение в обычном редакторе иногда увеличивает файл, а специализированный оптимизатор — уменьшает без единого изменённого пикселя.

Для строгой проверки lossless недостаточно сравнить файлы побайтно: они почти наверняка будут разными. Нужно декодировать оба изображения и сравнить ширину, высоту, цветовые значения и альфу каждого пикселя. При необходимости отдельно сравнивают важные метаданные, потому что «пиксели не изменились» и «файл полностью эквивалентен по назначению» — не одно и то же.

Цветовые типы и разрядность PNG

Размер PNG зависит не только от числа видимых цветов, но и от способа их представления. Формат поддерживает grayscale, truecolor, indexed-color, grayscale с альфой и truecolor с альфой. Для некоторых типов доступны глубины 1, 2, 4, 8 или 16 бит на канал. Ошибка в выборе типа способна сделать простой чёрно-белый рисунок тяжелее, чем полноцветная фотография того же размера, если редактор без необходимости сохранит его как RGBA 16 бит.

Grayscale

Если изображение действительно состоит только из оттенков серого, режим grayscale хранит один канал яркости вместо трёх каналов RGB. Для масок, технических карт, чёрно-белых схем и некоторых сканов это может быть выгодно. Однако визуально серое изображение не всегда технически grayscale: в тенях могут присутствовать цветные оттенки. Перед преобразованием убедитесь, что цвет не несёт информации.

Truecolor RGB и RGBA

RGB хранит три цветовых канала. RGBA добавляет альфу, то есть прозрачность. Даже если все пиксели непрозрачны, редактор может оставить альфа-канал. Удаление полностью неиспользуемой альфы — допустимая оптимизация, если изображение нигде не должно становиться прозрачным. Для иконок, вырезанных объектов и элементов интерфейса альфа, напротив, принципиальна.

Indexed-color

Индексированный режим создаёт палитру и записывает для каждого пикселя номер цвета. Он особенно эффективен для логотипов, схем, скриншотов с небольшим числом оттенков, пиксельной графики и плоских иллюстраций. Если палитра составлена неудачно, два почти одинаковых оттенка могут занять отдельные записи, а важный фирменный цвет — сместиться. Поэтому палитру оценивают не только по числу цветов, но и по приоритету визуально значимых областей.

8 и 16 бит на канал

16-битный PNG полезен как промежуточный мастер для глубокой цветокоррекции, научных данных, карт высот и градиентов с большим запасом точности. Для большинства веб-скриншотов, логотипов и интерфейсных элементов 16 бит на канал избыточны. Переход к 8 бит уменьшает объём исходных данных до сжатия и часто значительно снижает итоговый вес, но это уже преобразование данных. Перед ним проверяйте плавные градиенты и сохраняйте 16-битный оригинал.

Низкая разрядность индексированных и серых PNG

Файл с двумя цветами может использовать 1 бит на пиксель, с четырьмя — 2 бита, с шестнадцатью — 4 бита. Не каждый редактор выбирает минимальную глубину автоматически. Специализированный оптимизатор способен безопасно уменьшить глубину, если фактические значения укладываются в более узкий диапазон и декодированные пиксели остаются прежними.

Практическая последовательность выбора

1. Проверьте, нужна ли прозрачность.
2. Определите, содержит ли изображение реальные цветовые переходы или только ограниченный набор оттенков.
3. Для плоской графики протестируйте indexed-color с 256 цветами.
4. Снижайте палитру до 128, 64, 32 или 16 только после визуального сравнения.
5. Для полноцветной графики оставьте RGB или RGBA и примените lossless-оптимизацию.
6. 16 бит сохраняйте только при наличии реальной задачи, а не потому, что редактор выбрал этот режим по умолчанию.

Фильтры строк, DEFLATE и чересстрочная развёртка

PNG не сжимает исходные байты пикселей напрямую. Перед DEFLATE каждая строка проходит один из пяти фильтров: None, Sub, Up, Average или Paeth. Фильтр не изменяет изображение; он преобразует значения так, чтобы в потоке появилось больше повторяющихся и близких байтов. При декодировании операция полностью обращается.

Что делают фильтры

None оставляет строку без предсказания. Sub кодирует разницу с пикселем слева. Up — разницу с пикселем выше. Average использует среднее левого и верхнего соседей. Paeth выбирает один из соседних прогнозов по специальной функции. На изображении с вертикальными полосами может выиграть один фильтр, на градиенте — другой, а на шумной фотографии разница будет небольшой.

Редактор обычно выбирает фильтр эвристически. Оптимизатор может перебрать больше вариантов для каждой строки или для всего изображения. Это требует времени, но позволяет получить меньший IDAT без изменения пикселей. Именно поэтому режим «максимальная оптимизация» часто работает в разы дольше, хотя визуально результат идентичен.

DEFLATE

После фильтрации данные сжимаются DEFLATE, который сочетает поиск повторяющихся последовательностей и энтропийное кодирование. Уровень сжатия влияет прежде всего на время поиска и размер результата, но не на качество изображения. Значение 9 не делает картинку хуже значения 6; оно лишь может дольше искать немного более компактное представление.

Adam7 interlace

Чересстрочный PNG использует схему Adam7: изображение передаётся семью проходами и может постепенно уточняться при загрузке. Это не аналог прогрессивного JPEG по внутреннему устройству, но пользовательский эффект похож — сначала появляется грубый вариант, затем детали. Interlace часто немного увеличивает вес и усложняет поток, поэтому для небольших современных веб-изображений его обычно отключают. Однако окончательное решение принимают сравнением, а не правилом: отдельный файл может сжаться иначе.

При отключении interlace пиксели не меняются, если программа лишь перестраивает порядок хранения. Тем не менее проверяйте совместимость, если PNG используется в устаревшем оборудовании, специализированном ПО или производственном процессе.

Как правильно уменьшать размеры PNG

Сокращение ширины и высоты обычно даёт более сильный эффект, чем любой lossless-оптимизатор, потому что уменьшает число пикселей. Но это необратимое преобразование. Качество зависит от алгоритма ресэмплинга, масштаба, типа изображения и обработки альфы.

Обычные фотографии и мягкие иллюстрации

Для плавных изображений подходят качественные фильтры уменьшения: bicubic, Lanczos или аналогичный «для уменьшения» в конкретной программе. После сильного даунскейла иногда требуется лёгкая резкость, но её применяют на итоговом размере. Чрезмерный шарп создаёт ореолы и высокочастотные детали, которые не только ухудшают картинку, но и мешают PNG-сжатию.

Скриншоты интерфейса

Скриншот лучше снимать сразу в целевом масштабе или уменьшать кратно коэффициенту плотности экрана. Произвольный масштаб превращает однопиксельные линии и текст в множество промежуточных оттенков. В результате надписи становятся мягче, а PNG — тяжелее. Для документации часто выгодно хранить изображение 2× и показывать его через CSS в половинном размере, но это решение должно быть оправдано требованиями к Retina-экранам.

Пиксельная графика

Для пиксель-арта используют nearest neighbor без сглаживания, особенно при целочисленном масштабе. Bicubic или Lanczos создадут новые цвета на границах каждого пикселя и разрушат стилистику. После nearest-neighbor палитра остаётся компактной, а повторяющиеся области хорошо сжимаются.

Прозрачные края

Ресэмплинг RGBA должен учитывать альфу. Если программа усредняет скрытый RGB прозрачных пикселей как обычный цвет, вокруг объекта появится белая или тёмная кайма. Надёжная проверка — положить результат на белый, чёрный и насыщенный фон, затем посмотреть край при 100% и 400%.

Обрезка прозрачных полей

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

Контрольная формула

Если ширину и высоту уменьшить в два раза, число пикселей сократится в четыре раза. Итоговый PNG не обязан стать ровно в четыре раза меньше: на результат влияют структура изображения, палитра и служебные данные. Но порядок выигрыша обычно значительно выше, чем от одного повторного DEFLATE.

Командная строка: воспроизводимая оптимизация PNG

Графические программы удобны для ручной работы, но при сотнях файлов полезны инструменты командной строки. Их главное преимущество — воспроизводимость: параметры можно записать в скрипт, применить к новой партии и проверить результат автоматически. Перед запуском на каталоге создайте резервную копию или пишите результат в отдельную папку.

OxiPNG

OxiPNG выполняет многопоточную lossless-оптимизацию PNG и APNG. Типовой безопасный запуск для одного файла выглядит так:

oxipng -o 4 --strip safe input.png

Параметр -o 4 задаёт уровень поиска, а --strip safe удаляет только блоки, которые инструмент считает безопасными для обычного отображения. Для максимального контроля сначала запустите без --strip, сравните размер, затем отдельно решите судьбу метаданных. Обработка каталога выполняется маской или скриптом оболочки, но оригиналы лучше не перезаписывать до проверки.

OptiPNG

OptiPNG перебирает варианты фильтров и параметров сжатия. Пример базовой оптимизации:

optipng -o5 -out output.png input.png

Более высокий уровень увеличивает время, а выигрыш после среднего уровня часто становится небольшим. Флаг вывода в новый файл удобнее, чем оптимизация на месте: можно сравнить декодированные пиксели и сохранить журнал размера.

pngquant

pngquant выполняет квантизацию, то есть уменьшает палитру с допустимыми потерями. Это не lossless-инструмент. Пример контролируемого запуска:

pngquant --quality=70-90 --speed 1 --output output.png -- input.png

Диапазон качества задаёт нижнюю и верхнюю границы. Если минимально приемлемое качество недостижимо, инструмент может отказаться создавать результат — это лучше, чем незаметно выдать повреждённую графику. Для логотипов дополнительно проверяйте точные фирменные цвета, а для полупрозрачных объектов — край на разных фонах.

Последовательный конвейер

Сильный практический вариант: сначала изменить геометрию в редакторе, затем при необходимости выполнить квантизацию, после неё — lossless-оптимизацию уже полученного PNG. Порядок важен. Если сначала долго оптимизировать полноцветный файл, а потом изменить палитру, предыдущий результат будет пересобран и время потратится зря.

# 1. Квантизация копии
pngquant --quality=75-95 --output stage1.png -- source.png

# 2. Lossless-оптимизация результата
oxipng -o 4 stage1.png

Автоматическая проверка партии

Для каждого файла сохраняйте исходный и итоговый вес, ширину, высоту, цветовой тип и наличие альфы. Для lossless-ветки добавьте сравнение декодированных пикселей. Для lossy-ветки автоматическая метрика не заменяет визуальную проверку, но помогает обнаружить резкий провал: например, неожиданный переход с 256 цветов на 8 или исчезновение альфа-канала.

Матрица решений для разных PNG

Тип изображения	Первый шаг	Допустимая оптимизация	Главный риск
Логотип без градиентов	Обрезать холст и проверить размеры	PNG-8, 16–64 цвета, lossless после палитры	Сдвиг фирменного цвета и рваные диагонали
Логотип с мягкой тенью	Проверить альфу на трёх фонах	PNG-8 с достаточной палитрой или RGBA lossless	Ореол и ступени прозрачности
Скриншот интерфейса	Снять в целевом масштабе	Палитра 128–256 цветов, lossless	Размытый текст, полосы в тенях
Плоская иллюстрация	Посчитать реальные цвета	Постепенное сокращение палитры	Бандинг в градиентах
Фотография без прозрачности	Проверить необходимость PNG	Уменьшение размеров или смена формата	Огромный вес при незначимой пользе
Фото с прозрачным вырезанным объектом	Проверить край и тень	RGBA lossless, умеренное уменьшение размеров	Белая кайма, потеря волос и полутонов
Пиксель-арт	Использовать целочисленный масштаб	Точная палитра, nearest neighbor, lossless	Сглаживание и новые цвета
Маска или карта высот	Определить требуемую точность	Grayscale, 8 или 16 бит по задаче	Потеря данных, незаметная визуально
APNG	Проверить кадры и тайминги	Только APNG-совместимый оптимизатор	Сохранение одного кадра вместо анимации

Критерии приёмки

Для каждого типа заранее задайте критерий. Логотип должен сохранить точные ключевые цвета и чистую геометрию. Скриншот — читаемый текст при реальном размере. Прозрачный объект — отсутствие ореола на светлом и тёмном фоне. Маска — числовую точность, а не только внешний вид. APNG — количество кадров, порядок, длительность и повтор.

Такая матрица предотвращает ошибку «самый маленький файл автоматически лучший». Оптимальный PNG — минимальный файл, который проходит конкретные критерии использования.

Как готовить PNG для WordPress и сайта

После локальной оптимизации файл может измениться ещё раз на стороне CMS, темы, CDN или плагина. Поэтому проверять нужно не только загруженный оригинал, но и фактически отдаваемую браузеру версию.

Загружайте файл правильного размера

Если изображение показывается шириной 800 пикселей, загрузка версии 4000 пикселей создаёт лишний вес даже при хорошем сжатии. WordPress обычно генерирует несколько размеров, но тема может выбрать оригинал или слишком крупную копию. Проверьте атрибуты src, srcset и фактический ресурс в инструментах разработчика.

Не путайте размер файла и размер отображения

CSS width: 800px не уменьшает скачиваемый PNG. Браузер всё равно получает полный файл и масштабирует его на устройстве. Геометрию нужно оптимизировать до загрузки или настроить корректную выдачу адаптивных копий.

Проверяйте повторную обработку

Некоторые плагины удаляют метаданные, создают WebP/AVIF, меняют палитру или повторно прогоняют PNG через оптимизатор. Это может быть полезно, но двойная lossy-квантизация опасна. Оставляйте один ответственный этап за потерю цветов, а остальные делайте lossless.

Retina и плотность пикселей

Для чётких интерфейсных элементов иногда нужна версия 2×: файл 1600 пикселей показывается шириной 800 CSS-пикселей. Это повышает резкость на экранах высокой плотности, но увеличивает вес. Сравните 1× и 2×, используйте адаптивную выдачу и не применяйте правило Retina ко всем изображениям автоматически.

Кэш и имя файла

После замены PNG браузер или CDN может показывать старую копию. Используйте версионирование URL, новое имя или очистку кэша. Иначе легко решить, что оптимизация не сработала, хотя проверяется прежний файл.

Проверка фактической передачи

В панели Network смотрите не только размер файла на диске, но и transferred size, код ответа, тип содержимого и адрес ресурса. HTTP-сжатие почти не помогает уже сжатому IDAT, поэтому основной выигрыш должен быть достигнут внутри изображения. Если сервер отдаёт HTML ошибки с расширением PNG, визуальная проверка и MIME-тип сразу обнаружат проблему.

Как попасть в жёсткий лимит без разрушения качества

Ограничение «не больше 200 КБ» требует управляемого процесса. Один ползунок редко даёт лучший результат, потому что разные изображения имеют разную структуру. Работайте от наиболее безопасных действий к наиболее разрушительным.

1. Сделайте копию мастера и зафиксируйте исходные параметры.
2. Удалите только ненужные метаданные и выполните lossless-оптимизацию.
3. Обрежьте лишние прозрачные поля.
4. Уменьшите ширину и высоту до реально требуемых.
5. Для плоской графики попробуйте 256 цветов, затем 128, 64 и 32.
6. Настройте дизеринг: он скрывает полосы, но может увеличить вес и добавить шум.
7. После каждого шага проверяйте критические зоны и записывайте вес.
8. Остановитесь на первом варианте, который проходит лимит и критерии качества.

Почему дизеринг иногда мешает

Дизеринг имитирует отсутствующие оттенки чередованием доступных цветов. Визуально градиент становится плавнее, но пиксельный шум ухудшает повторяемость данных и может увеличить PNG. Для иконки с плоскими цветами дизеринг часто не нужен; для мягкого градиента он может быть единственным способом сохранить приемлемый вид при ограниченной палитре.

Ведите таблицу вариантов

Вариант	Размеры	Режим	Цвета	Вес	Результат проверки
Исходник	2400×1600	RGBA	Truecolor	2,8 МБ	Мастер
Lossless	2400×1600	RGBA	Truecolor	2,1 МБ	Пиксели идентичны
Целевой размер	1200×800	RGBA	Truecolor	720 КБ	Край чистый
Палитра	1200×800	Indexed	128	230 КБ	Небольшой бандинг
Финал	1200×800	Indexed	192	198 КБ	Лимит пройден, дефектов нет

Цифры в таблице — пример логики, а не универсальная норма. Главное — видеть, какое действие дало выигрыш и какой дефект появился. Без журнала легко многократно менять параметры и в итоге сохранить не лучший вариант.

Финальная проверка оптимизированного PNG

Технические параметры

• расширение и MIME-тип соответствуют PNG;
• ширина и высота равны ожидаемым;
• режим — RGB, RGBA, индексированный или grayscale согласно задаче;
• альфа-канал присутствует, если требуется;
• анимация APNG не исчезла;
• цветовой профиль и гамма обработаны осознанно;
• файл открывается минимум в двух независимых приложениях.

Визуальные зоны риска

Проверяйте не случайный центр, а конкретные области: границы прозрачного объекта, тонкий текст, диагонали, градиенты, тени, волосы, дым, однотонные фирменные заливки. Увеличение 400% помогает увидеть пиксельную структуру, но окончательное решение принимайте и при масштабе 100%.

Сравнение декодированных пикселей

Для lossless-обработки можно декодировать исходный и итоговый PNG в одинаковый массив RGBA и сравнить значения. Если отличаются размеры или хотя бы один видимый пиксель, процесс не является строго lossless. Различия в невидимых RGB-каналах при альфе 0 не видны на экране, но их тоже стоит учитывать, если файл будет повторно масштабироваться или использоваться для дальнейшей обработки.

Проверка в браузере

Разместите изображение в тестовом HTML на нескольких фонах. Задайте реальный CSS-размер и проверьте обычный экран и 2×-масштаб. Браузерный ресэмплинг может выявить ореол, который не был заметен в редакторе.

Проверка веса без самообмана

Сравнивайте файлы с одинаковыми размерами и назначением. Нельзя утверждать, что один оптимизатор «сжал лучше», если один результат стал 1200 пикселей, а другой остался 2400. Записывайте абсолютный вес и процент экономии, но не гонитесь за процентом в ущерб качеству.

Типичные ошибки при уменьшении веса PNG

Считать любое уменьшение «без потерь»

PNG-кодирование без потерь не делает lossless операцию изменения размеров или палитры. Если удалены пиксели или оттенки, данные уже изменились.

Менять только DPI

DPI описывает физический размер при печати. Если ширина и высота в пикселях не изменились, вес обычно останется почти тем же.

Сохранять фотографию в PNG по привычке

Для фотографии без прозрачности PNG часто неоправданно тяжёл. Выбор формата должен зависеть от изображения и требований, а не от убеждения, что PNG всегда «качественнее».

Переходить к 16 цветам без проверки

Маленькая палитра может быть идеальна для простого знака и разрушительна для сглаженного текста. Снижайте число цветов ступенчато.

Игнорировать альфа-канал

Белая кайма, тёмный контур и рваные края часто возникают именно из-за неправильной прозрачности, а не из-за самого сжатия.

Оценивать только на белом фоне

Светлый ореол почти незаметен на белом, но сразу проявляется на чёрном. Минимум три подложки обязательны для прозрачных объектов.

Повторно квантизировать уже сжатый файл

Каждый новый lossy-проход работает с уже сокращённой палитрой и может накапливать дефекты. Всегда начинайте с мастера.

Удалять цветовой профиль без преобразования

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

Перезаписывать единственный оригинал

Особенно опасно в программах, которые оптимизируют файл на месте. Храните мастер отдельно и используйте новые имена.

Использовать кадр JPEG как руководство по PNG

Ползунок JPEG Quality, прогрессивный режим и chroma subsampling не применяются к PNG. В многоформатном оптимизаторе всегда переключайтесь на вкладку PNG.

Частые вопросы

Можно ли уменьшить PNG вообще без изменения картинки?

Да. Lossless-оптимизаторы перебирают фильтры и DEFLATE-параметры, удаляют допустимые лишние блоки и сохраняют пиксели. Выигрыш зависит от исходника: иногда это десятки процентов, иногда почти ноль.

Что меньше: PNG-8 или PNG-24?

Обычно PNG-8 меньше, потому что хранит индексы палитры. Но если изображение содержит много цветов, градиентов и прозрачных оттенков, PNG-8 может выглядеть хуже. Размер нельзя оценивать отдельно от качества.

PNG-24 поддерживает прозрачность?

В практических интерфейсах обозначение PNG-24 часто используется для полноцветного PNG; при включённой прозрачности добавляется альфа-канал, и несжатое представление соответствует RGBA. Названия в конкретной программе могут отличаться, поэтому ориентируйтесь на наличие шахматной подложки и параметра Transparency.

Почему после сжатия PNG стал тяжелее?

Инструмент мог выбрать менее удачные фильтры, добавить метаданные, изменить палитру или сохранить профиль. Ещё одна причина — повторное масштабирование с интерполяцией, которое создало больше уникальных оттенков. Сравните структуру файлов и используйте специализированный оптимизатор.

Сколько цветов оставить для логотипа?

Начните с 64 и снижайте до 32 или 16, если внешний вид и фирменные цвета остаются точными. Логотип с градиентом может потребовать 128–256 или truecolor.

Нужно ли включать interlaced PNG?

Чересстрочная развёртка позволяет показывать изображение постепенно, но может увеличить файл. Для большинства современных веб-сценариев важнее итоговый вес и корректные размеры; сравните оба варианта, если программа предлагает выбор.

Удалять ли метаданные?

Для веб-иконок и обычных иллюстраций — обычно да, если они не нужны. Для мастер-копий фотографий, доказательных материалов, профессионального цвета и производственного процесса метаданные могут быть важны. Храните полный мастер и отдельную публикационную копию.

Почему прозрачный край стал белым?

Скорее всего, применено матирование под белый фон или RGB прозрачных пикселей смешался при масштабировании. Экспортируйте без Matte, используйте корректный альфа-канал и проверьте ресэмплинг.

Можно ли сжать PNG до конкретного числа килобайт одним ползунком?

Иногда сервисы пытаются попасть в лимит автоматически, но предсказуемее менять параметры по порядку: lossless, обрезка, размеры, палитра, дизеринг. Точный вес зависит от содержимого, поэтому одинаковое значение не даёт одинаковый результат на разных файлах.

Что делать с APNG?

Используйте инструмент, который явно поддерживает APNG. Обычный редактор может сохранить только первый кадр. После оптимизации проверьте число кадров, длительности и цикличность.

Какой способ выбрать первым?

Если размеры слишком большие — уменьшите их в редакторе. Если размеры правильные и качество нельзя менять — lossless-оптимизатор. Если графика простая и нужен сильный выигрыш — PNG-8 с контролируемой палитрой. Если это фотография без прозрачности — оцените другой формат.