Из PNG на 200 КБ после сжатия получается 350 КБ. Инструмент не виноват: важно, подходит ли метод сжатия к содержимому. Поняв это, вы начнёте управлять размером, а не подбирать параметры наугад.
Два вида сжатия
Сжатие с потерями (JPEG, WebP с потерями) отбрасывает высокочастотные детали, которые глаз почти не замечает, и нередко уменьшает размер в десять раз. Сжатие без потерь (PNG, WebP без потерь) не меняет ни одного пикселя, только переупаковывает данные, поэтому степень сжатия зависит от количества повторяющихся узоров.
Отсюда ключевой вывод: сжатие без потерь отлично работает на однотонных областях и правильных линиях и почти бесполезно для фотографий — шумных, с градиентами и мелкими деталями; там файл может даже вырасти, потому что нужно записать больше индексных данных.
Три типичных случая «стало больше»
1. Фотография сохранена как PNG. Каждый пиксель чуть отличается, PNG не находит повторов и хранит всё честно. Фото 1920×1080 в PNG — часто 3–5 МБ; в JPEG с качеством 80 — около 300 КБ.
2. Скриншот или иконка сохранены как JPEG. Обратная ошибка: края текста и однотонные панели получают «комариный шум», качество приходится поднимать, и файл выходит больше исходного PNG. Скриншотам подходят PNG или WebP без потерь.
3. Повторное сжатие уже сжатого изображения. JPEG из мессенджера или с сайта уже прошёл сжатие с потерями. Ещё один проход только складывает потери: чуть меньше размер, заметно хуже картинка. Нужен исходник.
Выбор по содержимому
- Фотографии, портреты, пейзажи → JPEG (качество 75–85) или WebP с потерями (на 25–35 % меньше при том же качестве)
- Скриншоты, графики, интерфейсы с текстом → PNG или WebP без потерь
- Иконки, логотипы, простые иллюстрации → SVG (вектор, масштабируется без потерь)
- Нужна прозрачность → PNG или WebP (в JPEG нет альфа-канала)
- Анимация → лучше видеоформаты или анимированный WebP; GIF наименее эффективен
Что ещё помогает кроме формата
Максимальная сторона обычно важнее ползунка качества. Изображениям в тексте редко нужно больше 800–1200 пикселей по ширине; уменьшение оригинала с 4000 до 1200 снижает размер на порядок без видимой разницы.
Качество: для JPEG оптимум между 75 и 85. Выше — размер растёт быстро, качество почти нет.
Метаданные: в файлах с камеры есть EXIF (место, устройство, время) — это лишние килобайты и риск для приватности. Перед публикацией их лучше удалить.
Одной фразой
Фото — с потерями, скриншоты — без потерь, сначала уменьшайте размеры, потом трогайте качество.
Одна таблица для выбора формата
Сначала определите тип содержимого, потом формат. Только такой порядок избавляет от бесконечных проб:
| Содержимое | Предпочтительный формат | Параметры | Учесть |
|---|---|---|---|
| Фотографии, портреты, пейзажи | WebP с потерями / JPEG | Качество 75–85 | Без прозрачности |
| Скриншоты интерфейса, изображения с текстом | PNG или WebP без потерь | Качество не нужно | Не переводить в JPEG |
| Иконки, логотипы, простая иллюстрация | SVG | — | Вектор, масштабируется без размытия |
| Нужен прозрачный фон | PNG / WebP | — | В JPEG нет альфа-канала |
| Короткая анимация | Анимированный WebP / MP4 | — | GIF наименее эффективен |
Эту таблицу не заучивают: перед сжатием задайте один вопрос — «это фотография или скриншот?». Ответив верно, параметры почти не придётся подкручивать.
WebP или AVIF
WebP поддерживается всеми основными браузерами, даёт файлы на 25–35% меньше JPEG при том же качестве и умеет прозрачность с анимацией. Это самый надёжный выбор по умолчанию.
AVIF сжимает сильнее — ещё на 20–30% относительно WebP при том же качестве, — но есть две реальные издержки: кодирование заметно медленнее (в пакетной обработке разница может быть в десяток раз), а декодирование на старых устройствах и в старых браузерах всё ещё поддерживается не везде. Для публичного сайта AVIF хорош как прогрессивное улучшение, а не как единственный формат.
Прагматичное сочетание: отдавать WebP как основной вариант и держать JPEG для отката. Вы получаете выигрыш в размере и не показываете пустые места в редких окружениях.
Три способа обойтись с прозрачным фоном
- Сохранить прозрачность (PNG / WebP). Подходит для иконок, стикеров и всего, что ложится на неизвестный фон. Плата — размер: при больших полупрозрачных областях (мягкие тени, свечения, градиенты) степень сжатия PNG заметно падает.
- Залить сплошным цветом (JPEG). Если изображение всегда будет на белом или известном тёмном фоне, залейте фон этим цветом и сохраните в JPEG — файл может уменьшиться втрое. Условие: окружающий цвет больше не изменится.
- Перевести в вектор (SVG). Идеально для одноцветных иконок: несколько килобайт, любое увеличение без размытия, перекраска через CSS. Сложные градиенты и текстуры векторизуются плохо.
Частая ошибка: логотип с прозрачным фоном, сохранённый в JPEG, превращает пустую область в чёрный или белый блок, который сразу бросается в глаза на тёмной странице. Это ограничение формата, а не ошибка программы.
В каком порядке обрабатывать пакет
Неверный порядок отнимает качество без всякой пользы. Четыре шага, последовательность неизменна:
- Сначала обрезать. Уберите лишнее. Обрезка до масштабирования сохраняет больше деталей и требует меньше вычислений, чем наоборот.
- Затем масштабировать. До 1,5–2 размеров итогового отображения, чтобы покрыть экраны высокой плотности. Этот шаг влияет на размер файла сильнее, чем любой параметр качества.
- Потом сжимать. Выберите формат и качество один раз и закончите — не сжимайте повторно, чтобы «посмотреть, как выйдет»: каждый проход с потерями может добавить новый слой повреждений.
- В конце удалить метаданные. Уберите из EXIF место съёмки, модель устройства и время. Файл меньше, и приватные данные не утекут случайно.
Частая инверсия — сжать до уменьшения — выбрасывает детали на том шаге, где потерю потом уже не вернуть.
Как понять, что результат ещё годится
Не судите по миниатюре. Поставьте «до» и «после» рядом в масштабе 100% и посмотрите три места:
- Края текста. Сжатие с потерями сдаётся здесь первым: вокруг букв появляются ореолы и цветной шум.
- Большие градиенты — небо, ровная стена. Пережатие даёт заметные полосы: плавный переход превращается в ступеньки.
- Мелкая текстура — волосы, трава, ткань. Здесь детали сливаются раньше всего.
Если все три места выдержали, при реальном размере показа изображение будет выглядеть нормально — а веб-картинки почти всегда смотрят именно так.