Быстрый ответ: фото идут в JPEG, графика с чёткими краями или прозрачностью идёт в PNG. Если вы не запомните ничего другого, это правило верно решает 90% случаев. Остальная часть страницы объясняет почему, чтобы пограничные случаи вы разбирали сами.
Единственное важное различие
JPEG и PNG создавались для разных видов изображений.
- JPEG — это формат с потерями, настроенный под фотографии. Он блистает на плавных градиентах — кожа, небо, размытые фоны — и охотно выбрасывает тонкие детали, которые ваш глаз игнорирует. Так он умещает 12-мегапиксельное фото в 2 МБ.
- PNG — это формат без потерь, созданный для плоского цвета, чётких линий и текста. Он также поддерживает прозрачность, чего JPEG не может вовсе. Логотип, иконка, скриншот интерфейса или диаграмма — место им в PNG.
Используете не тот — почувствуете сразу. Сохраните логотип как JPEG — и чёткие края окаймятся серым «москитным шумом». Сохраните фото как PNG — и файл раздуется в пять-десять раз без видимой пользы.
Быстрый гид по решению
Задайте два вопроса по порядку:
- Нужна ли прозрачность? Если да → PNG (или WebP). У JPEG прозрачности нет, точка.
- Это фотография или похожее на фото изображение с массой градиентов? Если да → JPEG. Если это плоский цвет, чёткий текст или штриховая графика → PNG.
Скриншоты — классическая ловушка. Скриншот страницы, богатой фото, сжимается лучше как JPEG; скриншот кода, таблицы или интерфейса остаётся чётким и маленьким как PNG. В сомнениях попробуйте оба и сравните — что подводит нас к инструментам.
Конвертация между ними
Если у вас не тот формат, переключение тривиально. Конвертер изображений от IMG.DIY перемещается между PNG, JPG, WebP и AVIF прямо в браузере. (Замечание: браузеры не могут кодировать AVIF через canvas, так что вывод AVIF откатывается к WebP — который почти так же мал и поддерживается всюду.) Можно конвертировать целый пакет сразу.
Самый частый выигрыш: дизайнер вручил вам папку PNG-фотографий. Конвертируйте их в JPG и смотрите, как папка сжимается на 80% и больше без видимой потери.
Как правильно сжимать каждый формат
Выбор формата — только половина дела: файл всё ещё хочется маленьким.
- Для JPEG (и WebP): используйте ползунок качества. Диапазон 75–85 визуально без потерь для большинства фото, при этом сильно режет размер.
- Для PNG: ползунка качества нет, потому что он без потерь. Вместо этого уменьшите число цветов. Большинство PNG использует куда меньше цветов, чем им дозволено, так что квантование до палитры в 256 цветов обычно экономит 60–80% без видимого изменения — и сохраняет прозрачность нетронутой.
Сжатие изображений от IMG.DIY применяет правильный метод автоматически в зависимости от формата, который вы ему скармливаете, и никогда не выдаёт файл больше оригинала. Прогоните смешанную папку JPG и PNG пакетом — и каждый получит нужную ему обработку.
А как насчёт WebP?
Стоит упомянуть: WebP делает обе работы. Он сжимает фото как JPEG и поддерживает прозрачность как PNG, обычно в меньших размерах, чем любой из них. Если ваша аудитория на современных браузерах (а это сейчас почти все), конвертация в WebP часто — лучший единственный ход. Держите запасной JPEG или PNG только если обязаны поддерживать очень старый софт.
Итог
Фото → JPEG. Логотипы, иконки, текст, прозрачность → PNG. Нужны и сжатие, и прозрачность, или минимально возможный файл → рассмотрите WebP. Затем сожмите подходящим формату методом. Каждый шаг здесь работает целиком в вашем браузере — ничего не загружается, а после первого визита инструменты работают офлайн.