JPG, PNG, WebP и AVIF — это не «старые и новые» форматы, а разные инструменты. Формат выбирают не по дате релиза, а по содержимому картинки: скриншот с текстом и портрет часто требуют противоположных решений. Ниже — короткий разбор и таблица, которую можно просто скопировать.
С потерями или без
Все форматы делятся на две группы:
- С потерями (JPG, lossy WebP, AVIF, HEIC): кодирование выбрасывает незаметные глазу детали. Файл меньше, но каждое новое пересохранение портит картинку чуть сильнее.
- Без потерь (PNG): сохраняет каждый пиксель. Пересохранять можно сколько угодно, но файл тяжелее.
Коротко: сжатие с потерями экономит размер ценой качества, сжатие без потерь платит размером за сохранность.
Кто для чего
| Формат | Сжатие | Прозрачность | Основная задача |
|---|---|---|---|
| JPG / JPEG | С потерями | Нет | Фото, портреты, пейзажи |
| PNG | Без потерь | Да (PNG-24/32) | Иконки, скриншоты, прозрачность, текст |
| WebP | С потерями и без | Да | Веб-картинки; обычно меньше JPG |
| AVIF | С потерями | Да | Веб-картинки с более сильным сжатием |
Что важно запомнить:
- В JPG нет прозрачности. Для логотипа с прозрачным фоном нужен PNG, WebP или AVIF.
- JPG плохо переносит текст, линии и плоские заливки. Артефакты собираются именно на границах, поэтому скриншоты кода или интерфейса в JPG часто «плывут».
- WebP при том же качестве обычно на 25–35% меньше JPG, умеет и прозрачность, и lossless-режим, и стал нормой для веба.
- AVIF жмёт ещё сильнее, но декодируется медленнее и поддерживается хуже. Без запасного JPG или PNG его лучше не ставить.
Сначала смотрим на картинку
Практика часто противоречит интуиции:
- Фотографии с текстурой — портреты, пейзажи, сыпучие детали — отлично сжимают WebP и AVIF. Пример: картинка 1600×1000 уменьшилась с 3,25 МБ в PNG до 318 КБ в WebP.
- Скриншоты, интерфейсы, много текста — не спешите с новым форматом. В одном тесте WebP весил 494 КБ, AVIF — 552 КБ, PNG — 1,28 МБ, JPG — 1,36 МБ. То есть PNG оказался меньше JPG, а AVIF был крупнее WebP.
- Нужна прозрачность — берите PNG. Если в картинке меньше 256 цветов, попробуйте PNG-8.
- Важна совместимость со старыми системами — JPG почти никогда не подведёт.
Рабочее правило: фото — JPG или WebP; текст, скриншоты и прозрачность — PNG; для веба в первую очередь WebP, а AVIF только там, где есть запасной формат.
Какой ставить quality у JPG
Ползунок «quality» — не универсальная шкала: у разных редакторов одни и те же цифры означают разное. Смотрите на результат, а не на число.
| Задача | Разумный диапазон |
|---|---|
| Публикация на сайте | 80–85 |
| Показ деталей, портфолио | 90–95 |
| Ниже 70 | Обычно появляется мыло и полосы |
Разница между 100 и 70 может сократить файл в несколько раз без заметной потери качества. Поэтому удобнее сначала задать целевой размер, а потом плавно снижать качество.
Частые ошибки
- Переименование — это не сжатие. Замена
photo.pngнаphoto.jpgне меняет байты внутри файла. - Пересохранение за пересохранением портит картинку. Каждая цепочка через мессенджер и повторное сохранение добавляет артефакты.
- ZIP не делает картинку меньше. Архив собирает файлы, но не перепаковывает пиксели; сжатие изображения — это перекодирование.
Попробовать
В сжатии фото и конвертере форматов можно быстро перегнать JPG, PNG, WebP и AVIF и сравнить размер. Обработка идёт локально в браузере, файл не загружается на сервер.
FAQ
В: WebP всегда меньше JPG? О: Для фото обычно да. На тексте, интерфейсах и плоских заливках PNG может выиграть. Смотрите на содержимое, а не на название формата.
В: Когда PNG действительно нужен? О: Для прозрачности, скриншотов, текста и правок без потерь. PNG на обычной фотографии почти всегда слишком большой.
В: Можно ли использовать AVIF?
О: Можно, но проверьте поддержку браузеров и держите JPG или PNG в <picture>. AVIF тоже может декодироваться заметно медленнее WebP.