PNG или JPG? Правило из десяти лет, по которому я решаю

PNG и JPG уже больше двадцати лет остаются двумя ответами по умолчанию на «сохранить эту картинку», и большинство выбирает между ними случайно — как диалог экспорта подставил, так и вышло. Работает это ровно до того дня, когда вы отправите кому-то скриншот на 9 МБ или выложите логотип с уродливым серым ореолом по краю, — и вдруг выбор начинает иметь значение.

Вот в чём дело: решение по-настоящему простое. Всё сводится к одному вопросу, который я задаю уже лет десять, и он ни разу меня не подвёл.

Один вопрос

Эта картинка сделана из краёв или из света?

Вот и всё. Текст, логотипы, иконки, скриншоты, схемы, штриховые рисунки, всё с резкими границами и плоскими зонами цвета — это края. Фотографии, градиенты, всё с плавным непрерывным тоном и тысячами едва заметных переходов цвета — это свет.

Края хотят PNG. Свет хочет JPG. Почти всё остальное следует из этого.

Почему края хотят PNG

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

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

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

Почему свет хочет JPG

JPG работает с потерями. Он выбрасывает информацию, которую глаз плохо замечает, — тонкие вариации цвета, высокочастотные детали, — и на фотографиях делает это замечательно. Как раз этого у фото в избытке. В итоге файл в разы меньше, а недостающего вы не видите.

Но наведите JPG на края — и он рассыпается. Он размазывает мутные артефакты вокруг резких границ, особенно вокруг текста, потому что резкие края — это ровно та высокочастотная деталь, которую он и создан отбрасывать. JPG-скриншот кода выглядит слегка грязным вокруг каждой буквы. Это не ваш монитор. Это формат работает как задумано на неподходящем входе.

Таблица размеров, которая всё решает

Одни и те же два исходника, сохранённые обоими способами при разумных настройках:

Читайте её в обе стороны. Фото почти в 5 раз меньше в JPG без видимых потерь. Зато скриншот и логотип в JPG больше — и выглядели бы хуже, с ореолами и мутью. Формат, который меньше, полностью переворачивается в зависимости от того, что на картинке. Вот вам весь урок в трёх строках.

Краевые случаи (стоит знать только два)

Прозрачность вынуждает брать PNG. Если хоть какая-то часть картинки должна просвечивать, JPG отпадает независимо от содержимого, потому что он физически не способен хранить альфа-канал. Даже фото, вырезанное на прозрачном фоне, обязано быть PNG (или WebP).

Текст поверх фото — вопрос суждения. Фотография с впечатанной подписью — отчасти свет, отчасти края. Я беру JPG, если это в основном фото, и мирюсь со слегка мягким текстом, либо PNG, если текст должен остаться чётким и размер я себе позволяю. Чистого победителя нет — вы выбираете, какой изъян вам приятнее.

Когда у вас уже не тот формат

Чаще всего вы выбираете не при экспорте — вы застряли с файлом, который кто-то уже сохранил не так. Фотограф отдал вам PNG на 14 МБ. Дизайнер прислал логотип JPG-ом с ореолом. Это просто конвертация.

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

Задайте один вопрос — края или свет — и будете правы практически всегда. Я до сих пор задаю его при каждом экспорте. Занимает полсекунды и уберёг меня от множества серых ореолов.