Короткий ответ: JPG — формат с потерями, созданный для фотографий, а PNG — формат без потерь, созданный для графики. Фото, сохранённое в PNG, тратит мегабайты без видимой выгоды. Скриншот, сохранённый в JPG, получает размазанный текст и мыльные края. Всё остальное в этом споре — размер файла, прозрачность, поведение при редактировании — следует из того, как каждый формат сжимает. Так что давайте туда и посмотрим.
Как сжимает JPG: выбросить то, чего вы не заметите
JPEG существует с 1992 года (история JPG рассказывает, откуда он взялся), и его трюк всё тот же. Кодировщик делит изображение на блоки 8×8 пикселей и прогоняет каждый через дискретное косинусное преобразование, превращая значения пикселей в частоты. Плавные градиенты становятся несколькими сильными низкочастотными коэффициентами. Мелкие детали — слабыми высокочастотными. И именно их квантователь отбрасывает.
Ещё два решения следуют из устройства глаз. Разрешение цвета уменьшается вдвое (субдискретизация цветности), потому что человек гораздо чувствительнее к деталям яркости, чем цвета. А ползунок качества — это просто агрессивность того же квантователя: 90 сохраняет почти всё видимое, 60 начинает выбрасывать то, что вы заметите.
Два жёстких ограничения, которые стоит помнить: у JPG 8 бит на канал и нет альфа-канала. Прозрачность не переживает сохранение в JPG.
Второе следствие: каждое сохранение заново запускает квантование. Открыли JPG, отредактировали, сохранили — и ещё один ломтик деталей исчез. Повторите десять раз, и картинка заметно гниёт: квадратики в небе, ореолы по краям. Это потери поколений, и именно поэтому JPG — формат раздачи, а не рабочий формат.
Как сжимает PNG: хранить каждый пиксель любой ценой
PNG появился в середине 1990-х как свободная от патентов замена GIF (о рождении PNG — эта история), и его философия противоположна JPEG: ни один пиксель не должен измениться.
Конвейер состоит из двух стадий. Сначала каждая строка пикселей проходит через фильтр предсказания — Sub, Up, Average или Paeth, — выбранный построчно так, чтобы данные стали максимально повторяющимися. Затем отфильтрованные байты идут в DEFLATE, ту же семью сжатия LZ77 плюс Хаффман, что работает в ZIP-архивах. Ничего не аппроксимируется. Декомпрессия воспроизводит исходные байты в точности.
Это покупает три вещи. Полную альфа-прозрачность (8 бит против бинарной «вкл/выкл» у GIF). Опциональную 16-битную глубину цвета. И иммунитет к потерям поколений: сохраните PNG сто раз — пиксели останутся идентичны бит в бит. Цена обнаруживается, стоит скормить ему фотографию. Фотопиксели зашумлены: каждый чуть отличается от соседей, а шум — единственное, что DEFLATE сжать не может.
Реальность размеров
Те же исходные изображения, два формата:
| Изображение | JPG (q90) | PNG |
|---|---|---|
| Фото 12 Мп | ~3,4 МБ | ~20 МБ |
| Скриншот интерфейса 1920×1080 | ~600 КБ | ~250 КБ |
| Логотип с прозрачным фоном | невозможно | ~40 КБ |
Прочитайте таблицу дважды, потому что важны оба направления. Фото в PNG примерно в шесть раз больше — без видимого улучшения. Скриншот в PNG меньше и резче, потому что плоские цвета и резкие края — именно то, чем питаются фильтры предсказания DEFLATE, и именно то, что квантователь JPEG калечит. Форматы не лучше и не хуже. Они оптимизированы под противоположные типы данных.
Три ошибки, которые все продолжают совершать
Сохранять скриншоты и интерфейсы в JPG. Текст и резкие края — высокочастотный контент, первое, что выбрасывает квантователь. Результат — «москитный шум»: грязный ореол вокруг каждой буквы. Если картинка пришла с экрана, её место в PNG.
Сохранять фото в PNG «ради качества». PNG действительно сохраняет больше, но для фото при обычном размере просмотра разница невидима, а платите вы шестикратным размером. Если фото едет на сайт или в письмо, PNG — дорогой путь к той же картинке.
Редактировать в JPG. Каждое промежуточное сохранение стоит деталей. Решение: держать рабочий файл в PNG и экспортировать JPG один раз, в конце. Конвертация готового JPG в PNG потом ничего не восстановит — она лишь заморозит ущерб. Механику всего этого разбирает наша статья о сжатии с потерями и без.
Какой формат для какой задачи
| Задача | Формат | Почему |
|---|---|---|
| Фото в вебе | JPG | честный минимальный размер для фото |
| Скриншоты, макеты интерфейсов, текст | PNG | резкие края остаются резкими, файл меньше |
| Логотипы, иконки, всё с прозрачностью | PNG | у JPG нет альфа-канала |
| Редактирование и промежуточные сохранения | PNG | нет потерь поколений |
| Вложения в почту, сдача в печать | JPG | читается везде, достаточно мал |
| Веб-графика с плоскими цветами | PNG | здесь сжимает лучше JPG |
Если вы выбираете формат для сайта, оба варианта могут оказаться неправильным ответом: WebP обычно обыгрывает каждого в его же игре. Прямые сравнения — в статьях WebP против JPG и WebP против PNG.
Когда нужно конвертировать
Конвертация чинит только в одну сторону. PNG в JPG ужимает фото до доли размера и «приклеивает» прозрачность к белому фону — правильный шаг перед загрузкой в старую форму или отправкой пачки файлов по почте. JPG в PNG замораживает текущие пиксели в контейнере без потерь, чтобы дальнейшее редактирование остановило гниение; вернуть детали, которые JPG уже выбросил, он не может. А если нужна прозрачность, статья о конвертации JPG в PNG с прозрачностью объясняет, что реально возможно.
Оба конвертера работают локально в вашем браузере: перетащили файлы, скачали результат, ничего никуда не уходит. Таблица выше подскажет, в какую сторону должен отправиться ваш файл.
