Перейти к содержимому
LocalMedia Tools

PNG, JPG или WebP — какой формат изображения выбрать?

LocalMedia Tools ·

Почти каждое изображение в интернете сохранено в одном из трёх форматов, и каждый из них ради этого чем-то жертвует. JPG агрессивно сжимает фотографии, отбрасывая детали, которые глаз вряд ли заметит, PNG сохраняет каждый пиксель в точности таким, каким он был, и добавляет прозрачность, а WebP — более новый формат от Google, который пытается совместить обе задачи (сжатие с потерями и без, плюс прозрачность) в файле меньшего размера, чем обычно дают оба старых формата. Выбор не того формата редко бывает критичным, но он означает либо раздутое время загрузки страницы, либо заметно размытые, «блочные» изображения. В этом руководстве разбирается, что на самом деле происходит внутри каждого формата, где в этой картине место HEIC (формата, в котором iPhone сохраняет фотографии), и как конвертировать или сжимать любой из них, не загружая файл никуда.

Что такое JPG и когда его использовать?

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

Что такое PNG и когда его использовать?

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

Что такое WebP и чем он отличается от JPG и PNG?

WebP — более новый формат, созданный, чтобы заменить сразу оба старых. Он поддерживает и сжатие с потерями, и без потерь в рамках одного формата файла, плюс полноценный канал прозрачности, как у PNG, — так что один формат способен справиться и со сжатым фото, и со скриншотом без потерь, и с прозрачным логотипом. На практике файлы WebP обычно получаются на 25–35% меньше эквивалентного по качеству JPG, а WebP без потерь обычно меньше того же изображения, сохранённого в PNG. Поддержка в браузерах стала практически повсеместной с начала 2020-х годов (все основные браузеры отрисовывают его нативно), что сняло главное историческое возражение против его использования. Остающаяся проблема — совместимость за пределами браузера: некоторые старые редакторы изображений, устаревшие плагины CMS и рабочие процессы для печати или дизайна по-прежнему не открывают WebP напрямую, так что стоит проверить именно ваш набор инструментов, прежде чем переходить на него повсеместно.

Где место HEIC в этой картине и стоит ли его конвертировать?

HEIC — это формат, который iPhone использует по умолчанию для фотографий начиная с iOS 11: он сжимает эффективнее, чем JPG, при сопоставимом качестве, поэтому занимает меньше места на телефоне. Проблема не в качестве, а в совместимости: множество программ для Windows, старых приложений Android, веб-форм и почтовых клиентов либо вовсе не могут открыть файл .heic, либо обращаются с ним неловко. Если вы делитесь фотографией там, где HEIC может не поддерживаться — загружаете на сайт, отправляете по почте кому-то с неизвестным устройством, публикуете в старом софте, — сначала сконвертируйте его в JPG для максимальной совместимости, или в PNG — только если вам конкретно нужны качество без потерь или прозрачность (что редко требуется для обычного фото с камеры). Конвертер HEIC в JPG LocalMedia выполняет эту конвертацию полностью в браузере, так что фотография считывается с устройства, конвертируется и сохраняется обратно, ни разу никуда не загружаясь.

Какой формат выбрать на практике — по сценариям использования?

Решение обычно сводится к тому, что содержит изображение и куда оно отправляется. Для фотографии или фотореалистичного изображения, предназначенного для веба, используйте WebP, если ваша платформа его принимает, иначе — JPG. Для скриншота, отсканированного документа, диаграммы или чего-либо с текстом используйте PNG (или WebP без потерь), чтобы края оставались чёткими. Для логотипа, иконки или графики, которой нужен прозрачный фон, используйте PNG или WebP — никогда не JPG, поскольку он вообще не умеет передавать прозрачность. Для максимальной совместимости со старым софтом, почтовыми клиентами или процессами печати самым надёжным универсальным выбором остаются JPG и PNG, поскольку поддержка WebP за пределами современных браузеров всё ещё непостоянна.

Почему многократное пересохранение JPG ухудшает изображение?

Поскольку сжатие JPG происходит с потерями, каждый раз, когда вы открываете JPG, редактируете его и снова сохраняете как JPG, формат заново анализирует изображение и заново отбрасывает детали — поверх того, что уже было отброшено в первый раз. После нескольких циклов «отредактировать и пересохранить» накопленные потери становятся заметны в виде мягкого размытия, цветовых полос или «блочных» артефактов вокруг краёв — проблема, которую часто называют потерями от поколения к поколению (generation loss). С PNG такого не происходит, поскольку сжатие без потерь никогда не отбрасывает детали, сколько бы раз вы ни пересохраняли файл. Если фотографию нужно редактировать многократно, держите во время работы мастер-копию в PNG или другом формате без потерь и экспортируйте в JPG только один раз — в конце, для итоговой поставки.

Как конвертировать или сжимать изображения, не загружая их?

Конвертация между JPG, PNG, WebP и HEIC, а также уменьшение слишком большого файла вообще не требует отправки изображения на сервер: браузер способен сам декодировать и перекодировать большинство распространённых форматов изображений. Конвертер форматов изображений LocalMedia переключается между JPG, PNG и WebP прямо во вкладке браузера, а компрессор изображений уменьшает размер файла, регулируя качество или размеры, — и в обоих случаях файл никогда не покидает ваше устройство. Убедиться в этом можно самостоятельно: откройте DevTools в браузере (F12), перейдите на вкладку Network и понаблюдайте, появится ли запрос на загрузку, пока вы конвертируете или сжимаете файл, — по-настоящему локальный инструмент не отправит ничего.

Связанные инструменты

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

Что лучше — PNG или JPG?
Ни один из них не лучше универсально — они созданы для разного контента. Сжатие с потерями делает JPG намного компактнее для фотографий, а сжатие без потерь у PNG сохраняет скриншоты, текст и графику свободными от размытия и добавляет поддержку прозрачности, которой у JPG нет вовсе. Используйте JPG для фото, PNG — для всего с резкими краями, текстом или прозрачным фоном.
WebP лучше, чем JPG?
По размеру файла и качеству — как правило, да: WebP обычно даёт файлы на 25–35% меньше эквивалентного по качеству JPG, а также поддерживает прозрачность и сжатие без потерь, на что JPG вообще не способен. Единственная причина всё же выбрать JPG вместо WebP — совместимость со старым софтом или рабочими процессами, которые не открывают файлы WebP.
Поддерживает ли WebP прозрачность?
Да. У WebP есть полноценный альфа-канал прозрачности как в режиме с потерями, так и без потерь, поэтому он может заменить PNG для прозрачных логотипов и иконок, при этом обычно давая файл меньшего размера.
Стоит ли конвертировать HEIC в JPG или PNG?
Почти во всех случаях конвертируйте в JPG — он компактнее и универсально совместим, что как раз соответствует потребностям обычного фото с камеры. Конвертируйте в PNG только если вам конкретно нужны качество без потерь или прозрачный фон, что для обычной фотографии встречается редко.
Какой формат даёт самый маленький файл?
Для фотографий самым компактным обычно оказывается WebP с потерями, за ним следует JPG, а PNG намного крупнее обоих. Для скриншотов, текста или линейной графики самым компактным обычно оказывается WebP без потерь, за ним следует PNG, поскольку сжатие JPG с потерями плохо подходит для резких краёв независимо от размера файла.
Можно ли конвертировать между PNG, JPG и WebP без потери качества?
Конвертация из формата без потерь (PNG) в другой режим без потерь сохраняет качество в точности. Конвертация в форматы с потерями или между ними (JPG, WebP с потерями) всегда пересжимает изображение, поэтому при каждой конвертации теряется часть качества — храните мастер-копию без потерь, если планируете конвертировать или редактировать изображение более одного раза.