Чем отличается PNG от JPG (и что выбрать)

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

Это одно правило покрывает большинство повседневных случаев. В разделах ниже объясняется, почему оно работает, какой формат дает более высокое качество, какой отправлять в печать и как переключаться между ними, когда форма принимает только один.

Чем отличаются PNG и JPG?

Оба формата растровые. Изображение хранится как сетка пикселей, а размер файла зависит от того, насколько хитро эта сетка упакована.

JPG (также пишется JPEG, это тот же формат) сжимает с потерями. Он отбрасывает детали, которые глаз обычно не замечает, например крошечные переходы цвета на небе или щеке. Насколько много уходит, определяет настройка качества. При значениях около 80–90 большинство людей не отличат результат от оригинала. Если опуститься ниже, появятся квадраты и размытые ореолы вокруг краев. Название происходит от Joint Photographic Experts Group, а короткое расширение .jpg появилось во времена старых систем Windows и DOS, где допускались только три буквы. Эту историю рассказывает наша статья JPG или JPEG.

PNG (Portable Network Graphics) сжимает без потерь. Он плотно упаковывает данные алгоритмом DEFLATE и ничего не отбрасывает, поэтому открытый файл пиксель в пиксель совпадает с сохраненным. PNG был создан в середине 1990-х как свободная от патентов замена GIF и в 1996 году стал рекомендацией W3C. Подробнее читайте в статье что такое файл PNG.

Отсюда два практических отличия:

• Размер. Фото с телефона в PNG часто в несколько раз больше хорошего JPG того же снимка.
• Прозрачность. У PNG есть альфа-канал, поэтому части изображения могут быть полностью или частично прозрачными. В JPG прозрачности нет вообще. При сохранении в JPG прозрачные области заливаются сплошным цветом, обычно белым или черным.

PNG или JPG: что выбрать?

Выбирайте по тому, что на картинке и куда она пойдет.

• Фото с телефона или камеры: JPG. Плавные градиенты и естественная текстура очень хорошо сжимаются методами с потерями.
• Скриншоты, графики, схемы и все с мелким текстом: PNG. JPG размывает четкие края и оставляет крапинки вокруг букв.
• Логотипы и значки на цветном фоне: PNG с прозрачностью или SVG, если есть векторный файл.
• Изображения, которые вы будете редактировать снова и снова: храните мастер-копию в PNG (или в исходном файле). При каждом пересохранении JPG теряет еще немного.
• Загрузка в формы с лимитом в КБ: JPG, потому что качество можно снижать, пока файл не уложится.

Быстрая проверка: увеличьте края. В основном резкие линии и плоские цвета значит PNG. В основном мягкие плавные тона значит JPG.

PNG или JPG для почты и отправки?

Фото отправляйте в JPG. Он меньше, открывается на любом устройстве и не так быстро выводит письмо за лимит вложений. Для скриншота сообщения об ошибке или документа PNG сохранит читаемость текста. Если скриншот в PNG слишком большой, прежде чем менять формат, сожмите его как PNG с помощью сжатия PNG.

Что качественнее, PNG или JPG?

Формально PNG качественнее, потому что ничего не теряется. На практике JPG, сохраненный с высоким качеством, для большинства фото выглядит так же, как PNG, при гораздо меньшем размере. Качество JPG становится заметной проблемой, только когда настройка низкая или файл много раз редактировали и пересохраняли.

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

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

Что лучше для печати, JPG или PNG?

Для печати фото практичнее всего обычно JPG высокого качества. Фотолаборатории и сервисы печати, как правило, принимают JPG, и при высоком качестве отпечаток выглядит так же, как из PNG. Для печатной графики с текстом, логотипами или плоскими цветами PNG сохраняет края чище.

Формат важен меньше, чем количество пикселей. Отпечаток выглядит четким, когда у изображения достаточно пикселей для его размера. Обычный стандарт для фотоотпечатков, которые рассматривают вблизи, 300 DPI, поэтому для отпечатка 4 x 6 дюймов нужно около 1200 x 1800 пикселей. Разделите ширину в пикселях на 300, чтобы узнать, сколько дюймов она четко покроет. В статье о 300 DPI разобраны расчеты и способ проверить изображение.

Два совета для печати:

1. Если файл пойдет в печать, экспортируйте с максимальным качеством JPG, которое предлагает редактор. Экономить место здесь незачем.
2. Уточните, нужен ли типографии цветовой профиль или определенный формат. Для профессиональной печати некоторые просят PDF или TIFF, поэтому сначала прочитайте их требования к файлам.

Как конвертировать PNG в JPG и обратно

Встроенные приложения хорошо справляются с отдельными файлами.

• Windows: откройте изображение в Paint, выберите "Файл", затем "Сохранить как" и укажите "Изображение в формате JPEG" или "Изображение в формате PNG". В приложении "Фотографии" тоже есть пункт "Сохранить как" в меню с тремя точками со списком типов файлов.
• Mac: откройте изображение в Preview, выберите "Файл", затем "Экспортировать" и укажите JPEG или PNG в меню "Формат". Для нескольких файлов выделите их в Finder, щелкните правой кнопкой и выберите "Быстрые действия", затем "Конвертировать изображение".

Для пачки файлов, телефона или общего компьютера быстрее инструмент в браузере. Конвертер PNG в JPG работает в браузере, поэтому файлы остаются на вашем устройстве. После любой конвертации проверьте три вещи:

1. Области, которые были прозрачными. В JPG они станут сплошным фоном, так что выберите белый или цвет, подходящий к месту, где будет изображение.
2. Размер файла. Фото в JPG должно стать намного меньше. Если скриншот стал больше или размытее, PNG был лучшим выбором.
3. Новый файл правильно открывается в другом приложении, прежде чем вы удалите оригинал.

В инструкции PNG в JPG есть пошаговые шаги для каждого устройства.

Где место WebP, HEIC и SVG?

WebP это формат изображений от Google. У него есть режим с потерями, как у JPG, и режим без потерь, как у PNG, а также поддержка прозрачности и анимации. По данным самой Google, WebP без потерь примерно на 26% меньше PNG, а WebP с потерями на 25–34% меньше сопоставимых JPG. Все современные популярные браузеры его отображают, но некоторые старые приложения и формы загрузки до сих пор его не принимают. Используйте его на своем сайте, а JPG или PNG отправляйте, когда не знаете, чем будут открывать файл.

HEIC это формат, который iPhone использует по умолчанию. Он часто хранит фото в гораздо меньшем объеме, чем JPG похожего качества, но многие компьютеры с Windows и порталы загрузки его не принимают. Переключить iPhone на JPG можно в "Настройки > Камера > Форматы > Наиболее совместимый".

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

Для фото обычный порядок от самого маленького файла к самому большому: HEIC или WebP с потерями, затем JPG, затем PNG. Но фото шириной 4000 пикселей тяжелое в любом формате. Уменьшение до ширины, в которой оно будет показано, часто экономит больше, чем смена формата.

Частые вопросы