Back to Blog
Tutorials

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

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

AuthorTinyImagePro Team
Published6 нояб. 2025 г.
Read Time18 min read

PNG (Portable Network Graphics) — формат выбора для графики, логотипов, скриншотов и любых изображений, которым нужна прозрачность. В отличие от сжатия с потерями у JPEG, PNG использует сжатие без потерь — то есть при сжатии качество не теряется вообще. В этом подробном руководстве разобрано всё, что нужно знать о сжатии файлов PNG с сохранением идеального качества.

Как устроено сжатие PNG

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

Как работает сжатие PNG:

  1. Фильтрация: к данным пикселей применяются алгоритмы предсказания, чтобы улучшить сжимаемость
  2. Сжатие DEFLATE: используется тот же алгоритм DEFLATE, что и в ZIP-архивах (на основе LZ77 и кодирования Хаффмана)
  3. Система чанков: данные организованы в помеченные блоки (IHDR, PLTE, IDAT, IEND и др.)
  4. Альфа-канал: поддерживает попиксельную прозрачность с 8-битными значениями альфы
  5. Типы цвета: оттенки серого, RGB, палитра, оттенки серого + альфа, RGBA

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

Когда использовать формат PNG

Идеальные случаи для PNG

Логотипы и фирменные элементы:

  • Логотипы компаний (особенно с прозрачностью)
  • Иконки и элементы интерфейса
  • Значки, награды и печати
  • Элементы из брендбука
  • Векторная графика, переведённая в растр

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

  • Скриншоты программ с резким текстом
  • Макеты интерфейсов и вайрфреймы
  • Картинки для туториалов
  • Сообщения об ошибках и уведомления
  • Интерфейсы приложений

Графика с прозрачностью:

  • Логотипы на разноцветных фонах
  • Накладываемая графика и водяные знаки
  • Элементы веб-дизайна (кнопки, разделители)
  • Изображения товаров с удалённым фоном
  • Стикеры и наклейки

Изображения с большим количеством текста:

  • Инфографика с обилием текста
  • Мемы и подписи на картинках
  • Графика с цитатами
  • Учебные схемы
  • Сертификаты и грамоты

Штриховая графика и иллюстрации:

  • Комиксы
  • Технические чертежи
  • Архитектурные планы
  • Карты и схемы
  • Диаграммы и графики с резкими линиями

Когда PNG НЕ подходит

Избегайте PNG в этих случаях:

Фотографии: типичное фото в PNG будет в 5–10 раз больше, чем в JPEG, без видимой разницы в качестве

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

Фото в высоком разрешении: размер файла становится непомерно большим

Когда размер файла критичен: если прозрачность не обязательна, JPEG или WebP сжимают лучше

Простое правило: если это фотография — используйте JPEG. Если это графика, логотип или нужна прозрачность — используйте PNG.

Типы цвета и битности PNG

Понимание типов цвета в PNG — ключ к оптимизации:

Тип цвета Битность Доступно цветов Прозрачность Лучше для
Оттенки серого 1, 2, 4, 8, 16 от 2 до 65 536 оттенков Нет Чёрно-белых изображений
Truecolor (RGB) 8, 16 от 16,7 млн до 281 трлн цветов Нет Полноцветных изображений без прозрачности
Индексированный (палитра) 1, 2, 4, 8 от 2 до 256 цветов Опционально 1 бит Логотипов, простой графики
Оттенки серого + альфа 8, 16 Оттенки + прозрачность Да (8 или 16 бит) Ч/б изображений с прозрачностью
Truecolor + альфа 8, 16 Миллионы + прозрачность Да (8 или 16 бит) Полноцветных изображений с прозрачностью

Возможность для оптимизации: многие «полноцветные» логотипы на деле используют 10–100 различных цветов. Перевод из 32-бит (Truecolor + альфа) в 8-бит (индексированный) может уменьшить размер файла на 50–75% без видимой потери качества.

Как сжать PNG: полный процесс

Шаг 1. Проанализируйте изображение

Определите характеристики:

1. Подсчитайте число различных цветов (инструменты умеют делать это автоматически)
2. Проверьте, действительно ли нужна прозрачность
3. Выясните, хватит ли оттенков серого
4. Отметьте размеры изображения и его назначение

Дерево решений:

  • Меньше 256 цветов → используйте 8-битный индексированный PNG
  • 256–65 536 цветов, без прозрачности → используйте 24-битный PNG
  • Нужна альфа-прозрачность при малом числе цветов → попробуйте 8-битный индексированный PNG с альфой
  • Сложные цвета с прозрачностью → используйте 32-битный PNG

Шаг 2. Выберите подходящую битность

Рекомендации по переводу:

Для простой графики (логотипы, иконки):

  1. Начните с оригинала (часто 32-битный)
  2. Подсчитайте число различных цветов
  3. Если меньше 256 — переведите в 8-битный индексированный
  4. Если 256–65 536 — используйте 24-битный
  5. Добавляйте альфу только при необходимости

Для скриншотов:

  1. Проверьте, есть ли прозрачность
  2. Если прозрачности нет — используйте 24-битный
  3. Подумайте, допустимо ли сжатие с потерями
  4. Оцените число цветов на предмет 8-битного варианта

Для сложных изображений:

  1. Определите, подходит ли вообще PNG
  2. Рассмотрите альтернативы JPEG или WebP
  3. Если PNG нужен — используйте подходящую битность
  4. Не переусердствуйте — балансируйте качество и размер

Шаг 3. Оптимизируйте цветовую палитру (для 8-битного PNG)

Процесс оптимизации палитры:

  1. Уменьшите число цветов: с помощью инструментов найдите минимальное число цветов, при котором качество ещё в порядке
  2. Дизеринг: применяйте при наличии градиентов (рекомендуется алгоритм Флойда — Стейнберга)
  3. Упорядочьте палитру: организуйте цвета для лучшего сжатия
  4. Удалите неиспользуемые: уберите элементы палитры, которых нет в изображении
  5. Индекс прозрачности: при необходимости назначьте один цвет прозрачным

Инструменты для оптимизации палитры:

  • pngquant (отличный инструмент командной строки)
  • ImageAlpha (графический интерфейс для Mac)
  • TinyImagePro (автоматическая оптимизация)

Шаг 4. Примените оптимизацию сжатия

Уровни сжатия PNG:

Файлы PNG уже используют сжатие DEFLATE, но уровень сжатия может различаться:

Уровень Скорость Сжатие Где применять
0 Самая высокая Нет Только временные файлы
1–3 Высокая Низкое Когда нужна быстрая обработка
4–6 Средняя Хорошее Сбалансированный подход
7–9 Низкая Лучшее Финальные веб-ресурсы

Выбор фильтра: PNG использует строчные фильтры (None, Sub, Up, Average, Paeth). Лучшие инструменты перебирают все фильтры и выбирают оптимальный для каждой строки.

Рекомендуемые инструменты:

  • OptiPNG: отличный оптимизатор без потерь
  • pngcrush: перебирает множество стратегий
  • Zopfli PNG: самый медленный, но лучшее сжатие
  • advpng (из AdvanceCOMP): дополнительное сжатие

Шаг 5. Удалите ненужные метаданные

Виды метаданных:

Текстовые чанки:

  • Сведения о программе-редакторе
  • Комментарии автора
  • Уведомления об авторских правах
  • Временные метки

Цветовой профиль (ICC):

  • Часто 3–50 КБ
  • Для веб-графики обычно не нужен
  • При отсутствии предполагается sRGB

Прочие чанки:

  • Физические размеры пикселей (pHYs)
  • Данные гистограммы
  • Время изменения
  • Пользовательские чанки из редакторов

Экономия: удаление всех метаданных обычно экономит 5–50 КБ на изображение.

Шаг 6. Проверьте и протестируйте результат

Чек-лист качества:

  • ✓ Сравните бок о бок с оригиналом при увеличении 100%
  • ✓ Проверьте края прозрачности на артефакты
  • ✓ Убедитесь, что текст остался идеально резким
  • ✓ Подтвердите, что цвета идентичны
  • ✓ Проверьте в предполагаемом размере показа
  • ✓ Посмотрите на разных фонах (если есть прозрачность)

Продвинутые приёмы оптимизации PNG

Приём 1. Сжатие PNG с потерями

Хотя сам PNG без потерь, перед кодированием в PNG можно применить предобработку с потерями:

Методы:

Постеризация: снижает точность цвета

  • Уменьшает 24-битный цвет до 18- или 21-битного
  • Глаз не замечает мелких различий в цвете
  • После этого файл сжимается гораздо лучше

Дизеринг: имитирует удалённые цвета

  • Чаще всего применяется алгоритм Флойда — Стейнберга
  • Упорядоченный дизеринг для предсказуемых узоров
  • Диффузия ошибки для естественного вида

Оптимизация альфа-канала:

  • Уменьшение числа полупрозрачных пикселей
  • Предумножение альфы
  • Квантование альфа-канала

Инструменты: pngquant (отличный), TinyPNG, ImageAlpha

Типичная экономия: уменьшение размера файла на 50–80% при минимальной видимой потере качества

Когда использовать:

  • Когда размер файла критичен
  • Когда изображение показывается в небольшом размере
  • Когда допустим лёгкий компромисс по качеству
  • Для веб-графики и иконок

Приём 2. PNG-8 с альфа-прозрачностью

8-битный PNG с альфа-каналом — отличный компромисс:

Преимущества:

  • Намного меньше, чем 32-битный PNG (часто на 60–70%)
  • Сохраняет прозрачность
  • Хорош для простой графики
  • Быстрее декодируется

Ограничения:

  • Максимум 256 цветов
  • Для градиентов может понадобиться дизеринг
  • Альфа-канал может быть постеризован

Лучше всего для:

  • Простых логотипов с прозрачностью
  • Иконок и элементов интерфейса
  • Веб-графики
  • Изображений с ограниченной палитрой

Как создать:

pngquant --quality=65-80 input.png

Приём 3. Чересстрочный (interlaced) PNG

Что это: прогрессивная отрисовка, похожая на прогрессивный JPEG

Как работает: изображение отображается за 7 проходов, сначала показывая версию в низком разрешении

Преимущества:

  • Лучше воспринимаемая скорость загрузки
  • Комфортнее для пользователя
  • Сразу что-то показывает на медленном соединении

Недостатки:

  • Обычно на 5–15% больше размер файла
  • Требует больше памяти при декодировании
  • Сильнее нагружает процессор

Рекомендация:

  • Используйте для изображений больше 50 КБ
  • Особенно для главных баннеров сайта
  • Не используйте для крошечных иконок (накладные расходы того не стоят)

Приём 4. APNG для анимаций

Что это: анимированный PNG, современная замена GIF

Преимущества перед GIF:

  • 24-битный цвет (GIF ограничен 256)
  • Альфа-прозрачность
  • Лучше сжатие
  • Обратная совместимость (первый кадр показывается как статичный)

Поддержка браузерами: все современные браузеры (по состоянию на 2023 год)

Где применять:

  • Анимированные логотипы
  • Анимации интерфейса
  • Спиннеры загрузки
  • Синемаграфы
  • Простые видеоклипы

Размер файла: обычно на 30–50% меньше эквивалентного GIF

Приём 5. PNGOUT и Zopfli

PNGOUT:

  • Специализированный оптимизатор PNG
  • Часто достигает лучшего сжатия
  • Очень медленная обработка
  • Бесплатен для личного использования

Zopfli PNG:

  • Алгоритм сжатия от Google
  • На 3–8% лучше стандартного DEFLATE
  • Очень медленный (в 100–1000 раз медленнее)
  • Скорость распаковки такая же
  • Бесплатный и с открытым кодом

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

Оптимизация PNG под конкретные задачи

Веб-графика и иконки

Лучшие практики:

Маленькие иконки (от 16×16 до 64×64):

  • По возможности используйте PNG-8
  • Удаляйте все метаданные
  • Без чересстрочности (слишком малы, чтобы это давало эффект)
  • Цель: от 500 байт до 5 КБ

Средняя графика (логотипы, кнопки):

  • PNG-8 или PNG-24 в зависимости от числа цветов
  • Оптимизация через OptiPNG
  • Рассмотрите сжатие с потерями
  • Цель: 5–50 КБ

Крупные изображения (фоны, баннеры):

  • Используйте прогрессивный/чересстрочный режим
  • Рассмотрите альтернативу WebP
  • Агрессивная оптимизация оправдана
  • Цель: до 200 КБ

Ресурсы для Retina/HiDPI:

  • Предоставляйте версии @1x и @2x
  • Версию @2x оптимизируйте агрессивнее
  • Для простой графики подумайте об SVG

Ресурсы приложений

Разработка под iOS:

Нужные размеры иконок:
- 20pt (@1x, @2x, @3x)
- 29pt (@1x, @2x, @3x)
- 40pt (@1x, @2x, @3x)
- 60pt (@2x, @3x)
- 76pt (@1x, @2x)
- 83.5pt (@2x)
- 1024pt (@1x)

Стратегия оптимизации:

  • Каждое разрешение оптимизируется отдельно
  • Удаляйте все метаданные
  • По возможности используйте PNG-8
  • Для простых иконок рассмотрите PDF/вектор

Разработка под Android:

Группы плотности:
- mdpi (1x)
- hdpi (1.5x)
- xhdpi (2x)
- xxhdpi (3x)
- xxxhdpi (4x)

Стратегия оптимизации:

  • Предоставляйте ресурсы нужной плотности
  • Используйте WebP при minSdkVersion ≥ 18
  • PNG для обратной совместимости
  • Векторные drawable (XML) для простой графики

Письма и документы

Подписи в письмах:

  • Держите до 10 КБ
  • Предпочтителен PNG-8
  • По возможности избегайте прозрачности (некоторые почтовые клиенты плохо её отображают)
  • Размеры: максимум 200–600 px в ширину

PowerPoint и документы:

  • Балансируйте качество и размер файла
  • PNG-24 для фотографий
  • PNG-8 для логотипов и схем
  • Учтите, что документ всё равно будет сжат (ZIP)

Соцсети

Фото профиля:

  • Часто хватает PNG-8
  • Facebook/Twitter всё равно пережмут
  • Держите до 100 КБ
  • Предпочтительны квадратные размеры

Графика для публикации:

  • PNG для изображений с большим количеством текста
  • JPEG для фотографий
  • Учитывайте повторное сжатие площадкой
  • Оптимизируйте агрессивно (всё равно пережмут)

Частые проблемы сжатия PNG и их решения

Проблема: файл PNG больше, чем исходное фото

Симптом: перевод фото из JPEG в PNG создаёт огромный файл

Причина: PNG использует сжатие без потерь, не подходящее для сложных фотографий

Решения:

  1. ❌ Не переводите фото в PNG
  2. ✓ Оставляйте фотографии в JPEG
  3. ✓ Используйте PNG только для графики, логотипов, прозрачности
  4. ✓ Если нужна прозрачность, используйте PNG-32, но будьте готовы к большим файлам

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

Симптомы:

  • Жёсткие края вокруг объектов
  • Заметные «ступеньки»
  • Потеря плавного сглаживания

Причины:

  • Перевод в 8-бит с 1-битной альфой
  • Плохой дизеринг при снижении битности
  • В оригинале было слабое сглаживание

Решения:

  1. Используйте 32-битный PNG для плавной прозрачности
  2. Возьмите инструмент получше для 8-битного перевода (pngquant с высокой настройкой качества)
  3. Пересоздайте графику с правильным сглаживанием
  4. Увеличьте уровень дизеринга при конвертации

Проблема: после оптимизации цвета выглядят иначе

Причины:

  • Изменилось цветовое пространство (sRGB вместо Display P3)
  • Удалён ICC-профиль
  • Снижено до 8-бит с плохой постеризацией
  • Различия в калибровке экранов

Решения:

  1. Следите, чтобы цветовое пространство sRGB сохранялось на всех этапах
  2. Сохраняйте ICC-профиль, если критична точность цвета
  3. Увеличьте число цветов при 8-битном переводе
  4. Используйте лучший алгоритм дизеринга
  5. Сравните на нескольких откалиброванных экранах

Проблема: текст становится размытым

Причины:

  • Применено сжатие с потерями
  • Плохо изменён размер изображения
  • Сохранено в неверном разрешении
  • Изменилось сглаживание

Решения:

  1. Используйте только оптимизацию без потерь
  2. Не меняйте размер изображений с текстом
  3. Обеспечьте 72–96 DPI для экранного показа
  4. По возможности пересоздайте в целевом размере
  5. Если уместно, используйте векторный формат (SVG)

Проблема: файл всё ещё слишком большой, несмотря на оптимизацию

Причины:

  • Использование PNG для фотографий
  • Размеры изображения избыточны для задачи
  • 32-бит там, где хватило бы 8-бит
  • Используются не лучшие инструменты

Решения:

  1. Проверьте, не уместнее ли JPEG
  2. Приведите размер изображения к фактическому размеру показа
  3. Переведите в 8-бит, если меньше 256 цветов
  4. Используйте продвинутые инструменты (Zopfli, PNGOUT)
  5. Рассмотрите сжатие PNG с потерями
  6. Попробуйте формат WebP

Сравнение PNG с альтернативными форматами

PNG против JPEG

Параметр PNG JPEG
Сжатие Без потерь С потерями
Лучше для Графики, логотипов, текста Фотографий
Прозрачность Да (альфа-канал) Нет
Размер файла (фото) Очень большой Маленький
Размер файла (графика) От малого до среднего От среднего до большого
Потеря качества Нет Зависит от настроек
Поддержка браузерами Универсальная Универсальная

Правило выбора: фотография? Используйте JPEG. Графика или прозрачность? Используйте PNG.

PNG против WebP

Параметр PNG WebP
Сжатие без потерь Хорошее На 25–35% лучше
Сжатие с потерями Нет Отличное
Прозрачность 8-битная альфа 8-битная альфа
Поддержка браузерами 100% 96%+ (современные браузеры)
Размер файла Больше Меньше при том же качестве
Скорость кодирования Высокая Умеренная
Распространённость Универсальный стандарт Быстро растёт

Рекомендация: для веба используйте WebP с запасным вариантом PNG. PNG отдельно — для максимальной совместимости.

PNG против GIF

Параметр PNG GIF
Цвета 16,7 млн Максимум 256
Прозрачность 8-битная альфа (плавная) 1-битная (жёсткие края)
Анимация APNG (ограниченная поддержка) Да (универсальная)
Сжатие Лучше Хуже
Размер файла Меньше для большинства изображений Больше
Современное применение Предпочтителен для статики Только для анимации

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

PNG против SVG

Параметр PNG SVG
Тип Растр (пиксели) Вектор (математика)
Масштабирование Пикселится при увеличении Масштабируется бесконечно
Размер файла Фиксирован по размерам Зависит от сложности
Редактирование Попиксельное Легко менять формы
Поддержка браузерами Универсальная Очень хорошая (IE9+)
Лучше для Сложных изображений, фото Простой графики, иконок
Анимация Нет (APNG ограничен) Да (CSS, SMIL, JS)

Правило выбора: простая графика/иконки? Используйте SVG. Сложные растровые изображения или фото? Используйте PNG или JPEG.

Инструменты для сжатия PNG

Онлайн-инструменты

TinyImagePro (рекомендуем):

  • Бесплатно, без регистрации
  • Обработка прямо в браузере (конфиденциально)
  • Варианты без потерь и с потерями
  • Поддержка нескольких файлов
  • Сжать изображения PNG

Преимущества:

  • Не нужна установка
  • Работает на любом устройстве
  • Конфиденциальность (обработка прямо в браузере)
  • Мгновенный результат

Инструменты командной строки (для продвинутых)

OptiPNG (без потерь):

optipng -o7 image.png
  • Уровни оптимизации 0–7 (7 — лучший)
  • Перебирает множество стратегий
  • Только без потерь
  • Бесплатный и с открытым кодом

pngquant (с потерями):

pngquant --quality=65-80 --ext .png --force image.png
  • Отличное сжатие с потерями
  • Уменьшение размера файла на 50–80%
  • Сохраняет визуальное качество
  • Выдаёт 8-битный PNG

pngcrush (без потерь):

pngcrush -brute input.png output.png
  • Перебирает все комбинации фильтров и сжатия
  • Самый медленный, но тщательный
  • Оптимизация без потерь
  • Бесплатный

Zopfli (лучшее сжатие без потерь):

zopflipng -m input.png output.png
  • Наилучшее возможное сжатие без потерь
  • Очень медленный (используйте для финальных ресурсов)
  • На 3–8% лучше OptiPNG
  • Алгоритм от Google

advpng (дополнительная оптимизация):

advpng -z -4 image.png
  • Часть инструментов AdvanceCOMP
  • Дополнительное сжатие после OptiPNG
  • Часто даёт дополнительные 1–5% экономии

Десктопные приложения

ImageOptim (Mac, бесплатно):

  • Интерфейс с перетаскиванием
  • Автоматически объединяет несколько инструментов
  • Пакетная обработка
  • Показывает выигрыш от сжатия
  • Удаляет метаданные

FileOptimizer (Windows, бесплатно):

  • Поддерживает 200+ форматов файлов
  • Несколько движков оптимизации
  • Пакетная обработка
  • Очень тщательная оптимизация
  • Есть портативная версия

RIOT (Windows, бесплатно):

  • Предпросмотр в реальном времени
  • Сравнение бок о бок
  • Поддержка пакетной обработки
  • Просмотр и редактирование метаданных
  • Показывает настройки сжатия

Пакетная обработка

Оптимизировать всю папку (Linux/Mac):

# Lossless optimization with OptiPNG
find ./images -name "*.png" -exec optipng -o7 {} \;

# Lossy optimization with pngquant
find ./images -name "*.png" -exec pngquant --ext .png --force --quality 65-80 {} \;

# Maximum compression with zopflipng
find ./images -name "*.png" -exec zopflipng -m {} {} \;

Windows PowerShell:

Get-ChildItem -Path .\images -Filter *.png -Recurse |
ForEach-Object { optipng -o7 $_.FullName }

Рабочий процесс оптимизации PNG

Для веб-разработчиков

Этап разработки:

  1. Используйте качественные исходные ресурсы
  2. Храните оригиналы в формате без потерь
  3. Создавайте веб-версии отдельно
  4. Держите под контролем версий и оригинал, и оптимизированную версию

Конвейер оптимизации:

# 1. Resize if needed
convert input.png -resize 800x600 resized.png

# 2. Convert to 8-bit if suitable
pngquant --quality=65-80 resized.png

# 3. Optimize losslessly
optipng -o7 resized-fs8.png

# 4. Final Zopfli pass (optional, slow)
zopflipng -m resized-fs8.png final.png

Автоматизированная сборка:

  • Интегрируйте в Webpack, Gulp или Grunt
  • Автоматическая оптимизация при сборке
  • Source maps для отладки
  • Разные уровни оптимизации для dev/prod

Для графических дизайнеров

Настройки экспорта:

  1. Выберите подходящий цветовой режим
  2. Удалите ненужные слои
  3. Сведите слои, если прозрачность не нужна
  4. Используйте «Сохранить для Web» в Photoshop
  5. «Экспортировать как» в современных инструментах

Экспорт в Photoshop:

  • Файл > Экспортировать > Сохранить для Web (старая версия)
  • Выберите PNG-8 или PNG-24
  • По возможности уменьшите число цветов
  • Поставьте галочку «Преобразовать в sRGB»
  • Удалите метаданные

Sketch/Figma:

  • Экспортируйте точно в нужных размерах
  • Используйте обозначения @1x, @2x
  • Выбирайте формат PNG
  • Оптимизируйте после экспорта

Для разработчиков мобильных приложений

Процесс работы с ресурсами iOS:

1. Создайте сначала версию @3x (высшее качество)
2. Уменьшите до @2x и @1x
3. Оптимизируйте каждую отдельно
4. Прогоните все ресурсы через ImageOptim
5. Включите в каталог ресурсов

Процесс работы с ресурсами Android:

1. Создайте версию xxxhdpi (4x)
2. Масштабируйте под остальные плотности
3. Рассмотрите WebP для API 18+
4. Оптимизируйте PNG для старых устройств
5. Разложите по соответствующим папкам drawable

Часто задаваемые вопросы

В: Сжатие PNG действительно без потерь? О: Да! Стандартное сжатие PNG на 100% без потерь. Распакованное изображение бит в бит совпадает с оригиналом. А вот «PNG с потерями» — это предобработка (уменьшение числа цветов) перед сжатием PNG без потерь.

В: Почему мой файл PNG намного больше эквивалентного JPEG? О: PNG использует сжатие без потерь, а JPEG — с потерями. Для фотографий со сложными деталями JPEG достигает в 5–10 раз лучшего коэффициента сжатия. PNG создан для графики, а не для фото.

В: Можно ли перевести JPEG в PNG, чтобы улучшить качество? О: Нет! Перевод из формата с потерями в формат без потерь не возвращает утраченное качество. Файл только станет больше. По возможности всегда работайте с оригинальными исходниками.

В: Чем отличаются PNG-8, PNG-24 и PNG-32? О: PNG-8 использует 8-битный цвет (максимум 256 цветов), PNG-24 — 24-битный (16,7 млн), а PNG-32 — это PNG-24 плюс 8-битная альфа-прозрачность (всего 32 бита на пиксель).

В: Стоит ли использовать чересстрочный PNG? О: Используйте чересстрочный для изображений больше 50 КБ на сайтах (лучше воспринимается загрузка). Не используйте для мелких иконок (накладные расходы не оправданы) и когда критичен размер файла (чересстрочный на 5–15% больше).

В: Насколько можно сжать PNG без потери качества? О: С инструментами без потерь (OptiPNG, pngcrush) обычно 10–40% уменьшения без потери качества. С предобработкой с потерями (pngquant) — 50–80% при минимальной видимой потере.

В: Что выбрать для логотипа — PNG или SVG? О: Используйте SVG для простых логотипов (бесконечное масштабирование, меньший размер файла). Используйте PNG для сложных логотипов с градиентами, эффектами или когда целевая платформа не поддерживает SVG.

В: Могут ли файлы PNG содержать вирусы? О: Сам формат PNG безопасен, но любой файл можно переименовать. Всегда проверяйте загрузки антивирусом и открывайте PNG только из надёжных источников.

Заключение

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

Главное, что стоит запомнить:

  • Используйте PNG-8 для графики с менее чем 256 цветами (часто на 50–70% меньше PNG-32)
  • PNG-24 — для полноцветной графики без прозрачности
  • PNG-32 — только когда нужна альфа-прозрачность
  • Удаляйте все ненужные метаданные (экономия 5–50 КБ)
  • Используйте инструменты оптимизации вроде OptiPNG или pngquant
  • Рассмотрите сжатие PNG с потерями для значительного уменьшения размера
  • Всегда сравнивайте с WebP для современных веб-проектов
  • Храните оригинальные несжатые исходники
  • Выбирайте правильный формат: PNG для графики, JPEG для фото

Краткая стратегия оптимизации:

  1. Анализируйте: определите число цветов, потребность в прозрачности, тип изображения
  2. Конвертируйте: выберите подходящую битность (8-бит vs 24-бит vs 32-бит)
  3. Оптимизируйте: примените оптимизацию без потерь (OptiPNG)
  4. Рассмотрите потери: используйте pngquant, если критичен размер файла
  5. Очистите: удалите все метаданные
  6. Проверьте: оцените качество и размер файла
  7. Альтернатива: рассмотрите WebP с запасным вариантом PNG

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

Похожие руководства:

Ready to Compress Your Images?

Try our free online image compression tool. No signup required, 100% secure.

Start Compressing Now
Руководство по сжатию PNG: уменьшаем размер файла, сохраняя прозрачность