LeanImg

PNG против JPG: какой из них на самом деле следует сохранить?

Без потерь против с потерями, альфа-канал, которого нет у JPG, и хрома-субдискретизация, которая размывает текст, с измеренными размерами файлов обоих форматов.

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

Каждое число ниже получено из собственных инструментов LeanImg, работающих в вкладке браузера, на двух тестовых файлах: texture.jpg размером 3840x2160 и 538,6 KB, плюс alpha.png размером 900x606 и 942,4 KB с прозрачным фоном. Мы создали эти инструменты без API маршрутов и серверных действий, поэтому файл никогда не покидает ваш компьютер. Большинство сайтов в этой категории загружают ваше изображение на сервер, а затем обещают удалить его через час. Здесь нечего удалять, поэтому наша страница конфиденциальности короткая.

Какой из них мне выбрать, PNG или JPG?

Фотографии идут в JPG. Скриншоты, логотипы, графики, линейные рисунки и все, что требует прозрачности, идут в PNG. Руководство по форматам MDN проводит ту же границу. В умном режиме наш компрессор уменьшил размер texture.jpg с 538,6 KB до 286,1 KB с помощью MozJPEG при качестве 80, что составляет сокращение на 47%. Переместите ползунок на 60, и то же фото будет весить 212,4 KB. При 30 это 131 KB, снижение на 76%.

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

Что на самом деле делает безпотеряющее сжатие с размером файла?

Без потерь означает, что декодированные пиксели возвращаются бит за битом идентичными, что требуется спецификацией PNG. Это не означает, что файл не может уменьшиться. Режим PNG нашего компрессора работает с oxipng на уровне 3, и он уменьшил alpha.png с 942,4 KB до 383,9 KB. Это 59% уменьшения при сохранении каждого значения пикселя.

Опция "меньший размер файла" для PNG — это другое животное. Она использует imagequant, который уменьшает изображение до цветовой палитры перед записью PNG, и alpha.png вышел на 98,3 KB. Это 90% уменьшения. Это результат с потерями, независимо от того, что подразумевает расширение .png, поэтому сохраните оригинал, если это изображение является мастер-копией.

Результат компрессора LeanImg, показывающий alpha.png, уменьшенный с 942,4 KB до 98,3 KB с использованием режима палитры
alpha.png размером 900x606, квантизированный до палитры: 942,4 KB уменьшено до 98,3 KB, сокращение на 90%.

Почему JPG размывает цветной текст и тонкие линии?

Потому что JPG хранит цвет с более низким разрешением, чем яркость. Формат отделяет яркость от двух хрома-каналов, как указано в ITU-T T.81, и кодировщики обычно уменьшают хрома, так что один цветовой образец охватывает блок пикселей 2x2. На фотографии размером 3840x2160, такой как texture.jpg, вы этого не заметите. На одной пиксельной красной линии на белом фоне цвет этой линии усредняется с тремя белыми соседями перед применением любого параметра качества, и никакое положение ползунка не вернет его обратно.

Скриншоты — это то, где это проявляется. Переход на WebP не избегает этого, потому что режим с потерями WebP заблокирован на хрома 4:2:0 и применяет то же усреднение. PNG сохраняет точное значение RGB каждого пикселя, поэтому захваты пользовательского интерфейса, QR-коды и текстовые наложения должны находиться там. Если PNG все еще слишком тяжелый, квантизируйте его и сохраняйте формат.

Что происходит с прозрачностью, когда я сохраняю в JPG?

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

Вы не можете обратить этот круговой путь. Возвращение через JPG в PNG дает вам PNG с белым прямоугольником там, где раньше была прозрачность, плюс любые артефакты JPG, которые были добавлены в первом проходе. Сжатие также удаляет каждую часть метаданных: EXIF, GPS, ICC-профиль и встроенный миниатюра все исчезают, хотя ориентация сохраняется. Сохраните мастер PNG; он вам понадобится. Если вы вырезаете объект из фотографии, наш инструмент для удаления фона всегда сохраняет PNG с альфа-каналом по этой причине, что также объясняет, почему вырезка оказывается тяжелее, чем JPG, который вы вставили, и генератор иконок по умолчанию устанавливает цвет фона на #ffffff, так что прозрачный логотип оказывается на белом квадрате, пока вы не измените это поле.

Почему мой PNG намного больше, чем JPG?

Фотографический шум не дает предсказателю PNG ничего, с чем можно работать. Каждая строка предполагается на основе строки выше, и оставшаяся разница сжимается, что отлично подходит для плоской кнопки и почти бесполезно для зерна. Посмотрите на два тестовых файла. alpha.png имеет размер 900x606 и весит 942,4 KB, в то время как texture.jpg имеет размер 3840x2160, более чем в пятнадцать раз превышая количество пикселей, и весит 538,6 KB. Квантизация палитры — это рычаг, который закрывает этот разрыв, и она уменьшила alpha.png до 98,3 KB.

Стоит ли мне сохранить WebP или AVIF и пропустить вопрос?

Иногда это стоит измерить. Мы пропустили texture.jpg через компрессор при одном и том же положении ползунка 80 для всех трех форматов, а затем снова при 63.

Тот же источник оба раза: texture.jpg, 3840x2160, 538,6 KB.
Формат выводаПолзунок 80Ползунок 63Время кодирования
JPEG (MozJPEG)286,1 KBне измерялосьмгновенно
WebP290,3 KB200,6 KBмгновенно
AVIF312,7 KB186,9 KB10 до 11 секунд

AVIF, производящий самый большой файл при ползунке 80, выглядит странно, и причина кроется в нашем собственном коде. Для источника JPEG компрессор умножает ваш ползунок на качество, которое он считывает из таблиц квантизации источника, поэтому источник, оцененный на 60 с ползунком на 80, на самом деле кодируется на 48. WebP и AVIF принимают 80 за чистую правду. При 63, что является умным режимом по умолчанию для AVIF, порядок меняется: AVIF составляет 186,9 KB, а WebP — 200,6 KB по сравнению с источником 538,6 KB. AVIF также занимает 10 до 11 секунд на каждую кодировку, в то время как JPEG и WebP завершаются мгновенно, и стоит проверить поддержку браузеров перед тем, как вы примете решение. Мы подробно разобрали это сравнение в статье о том, действительно ли WebP превосходит JPG.

Что мне делать с файлом передо мной?

Откройте компрессор. Запустите ваш файл дважды. Если это фотография, сначала выберите умный режим, затем переместите ползунок на 60 и сравните два результата при полном увеличении. Если в нем есть текст или прозрачность, оставайтесь на PNG и попробуйте оба режима PNG: без потерь уменьшил alpha.png до 383,9 KB, а режим палитры — до 98,3 KB. Сначала измените размер, когда изображение предназначено для колонки шириной 800 пикселей, так как изменитель размера записывает PNG без потерь и перекодирует все остальное по умолчанию с качеством 90. И если назначение — это документ, JPG попадает на страницу PDF, перекодированный еще раз с качеством 92, что является еще одним дополнительным поколением, о котором стоит подумать.