PNG, JPG или WebP — какой формат изображения выбрать?
Почти каждое изображение в интернете сохранено в одном из трёх форматов, и каждый из них ради этого чем-то жертвует. 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 с потерями) всегда пересжимает изображение, поэтому при каждой конвертации теряется часть качества — храните мастер-копию без потерь, если планируете конвертировать или редактировать изображение более одного раза.