JPG, PNG и WebP — три ответа на один и тот же вопрос: как хранить эту картинку? Каждый хорош в чем-то своем. Выбор хорошего качества занимает около десяти секунд, если вы знаете, на что смотрите, и обычно это имеет большее значение, чем настройки качества, которые вы выбираете позже.
Краткая версия
| Формат | Лучшее для | Прозрачность | Типичный размер файла |
|---|---|---|---|
| JPEG (.jpg) | Фотографии, изображения с камеры, отсканированные фотографии. | Нет | Маленький для фотографий |
| PNG (.png) | Скриншоты, текст, логотипы, плоская графика | Да | Большой для фотографий, эффективный для графики |
| ВебП (.webp) | Современные веб-изображения, как фотографии, так и графика. | Да | Часто самый маленький в целом |
Если вы помните только одну строку: используйте JPEG или WebP для фотографий, PNG для всего, что имеет четкие края или прозрачный фон.
JPEG: по-прежнему используется для фотографий по умолчанию.
JPEG — формат с потерями. Он рассматривает изображение небольшими блоками и сохраняет приближение, отбрасывая детали, менее заметные для человеческого глаза. Для фотографий, которые имеют плавные градиенты, текстуру и отсутствие идеально прямых краев, этот компромисс превосходен. Большая фотография может превратиться в небольшой файл без явных изменений при обычном размере просмотра.
Формат также чрезвычайно совместим. Любой браузер, телефон, фотопринтер и инструмент для работы с документами могут открыть JPEG. Если файл должен работать везде без каких-либо объяснений, JPEG — безопасный выбор.
Его слабые стороны также хорошо известны. В нем нет прозрачности. Он плох для резких линий и текста, где сжатие может создавать ореолы и блочные пятна. И при каждом сохранении он имеет потери, поэтому многократное редактирование и экспорт одного и того же JPEG постепенно ухудшает его качество. Сохраните оригинал и экспортируйте его один раз.
PNG: чистые края и прозрачность
PNG без потерь. Изображение, которое вы сохраняете, — это изображение, которое вы получаете обратно, пиксель за пикселем. Это делает его правильным выбором для снимков экрана, диаграмм, логотипов, значков и графики интерфейса — контента, для которого важны четкие края и где кодирование с потерями имеет тенденцию оставлять видимые повреждения.
PNG также поддерживает альфа-прозрачность, что делает его полезным для логотипов, размещенных на цветном фоне, и для элементов интерфейса с мягкими тенями. Тот же подход без потерь делает PNG плохо подходящим для фотографий: изображение с камеры, хранящееся в формате PNG, может быть в несколько раз больше, чем эквивалентный JPEG, без видимой выгоды.
Есть распространенное исключение: скриншот, который по большей части представляет собой фотографию. Например, скриншот полноэкранного средства просмотра фотографий может быть более эффективным, чем JPEG. Судите о содержании, а не о том, что оно взято из скриншота.
WebP: гибкая середина
WebP был разработан для Интернета и может работать как в режиме с потерями, так и без потерь, обеспечивая прозрачность в обоих случаях. При сопоставимом качестве файл WebP с потерями часто меньше, чем JPEG, особенно при более низких настройках качества. Он также поддерживает анимацию, хотя это не относится к инструментам создания неподвижных изображений.
Поддержка браузеров теперь широка в Chrome, Firefox, Safari и Edge. Загвоздка заключается в более широком мире программного обеспечения: старые настольные приложения, некоторые почтовые клиенты и некоторые системы управления контентом могут не принимать файлы .webp. Если вы публикуете контент на современном веб-сайте, WebP является надежным выбором по умолчанию. Если вы отправляете изображение человеку, который откроет его в незнакомой программе, JPEG или PNG — менее рискованный выбор.
Новые форматы, такие как AVIF, могут быть еще меньше, но их поддержка менее универсальна, а кодирование происходит медленнее. В повседневной работе разница между хорошим WebP и AVIF редко оправдывает вопросы совместимости.
Ловушка прозрачности
JPEG не может хранить прозрачность. Если вы конвертируете логотип PNG с прозрачным фоном в JPEG, эти области должны стать чем-то. Большинство конвертеров заполняют их белым цветом. На белой странице вы можете этого не заметить; На цветном или фотографическом фоне логотип помещается в очевидную белую коробку.
Решение простое: сохраните PNG или WebP для всего, что требует вырезанного фона. Если для конечного пункта назначения требуется JPEG, сначала поместите логотип на фон точного цвета, а затем экспортируйте. Это дает намеренный результат вместо белого прямоугольника.
Обратное преобразование — JPEG в PNG — не создает прозрачности. Он только оборачивает одни и те же непрозрачные пиксели в контейнер без потерь, что обычно увеличивает размер файла без восстановления каких-либо деталей.
Выбираем, не задумываясь
- Это фотография или скан с непрерывными тонами? Используйте JPEG или WebP, если это современный веб-сайт.
- Нужна ли прозрачность? Используйте PNG или WebP. Никогда не JPEG.
- Содержит ли он текст, острые края или однородные цвета? Используйте PNG или WebP без потерь. В формате JPEG с потерями края будут выглядеть грязными.
- Кто-нибудь откроет его в неизвестном программном обеспечении? Предпочитайте JPEG для фотографий и PNG для графики. Совместимость превосходит выигрыш по незначительному размеру.
- Он уже маленький? Оставьте это в покое. Преобразование графики размером 40 КБ ради экономии в 5 КБ обычно не стоит риска потери качества.
После выбора формата измените размер изображения до размера дисплея и установите разумное качество. Наш гид по сжатие изображений для Интернета ходит по настройкам.
Что преобразование не может исправить
Преобразование изменяет контейнер, а не информацию внутри него. Если JPEG уже потерял детали, сохранение его в формате PNG не вернет эти детали; он просто сохранит поврежденный результат в файле большего размера. Если скриншот PNG полон сглаженного текста, преобразование его в JPEG может уменьшить его, но также приведет к появлению артефактов вокруг букв.
Всегда работайте из лучшего доступного источника. Преобразование между форматами и обратно — распространенный способ ухудшить изображение, при этом полагая, что вы его улучшаете.
The конвертер форматов обрабатывает JPG, PNG и WebP в браузере. Он сохраняет прозрачность, если место назначения поддерживает ее, заполняет фон JPEG белым цветом и позволяет устанавливать качество для форматов с потерями. Вывод PNG осуществляется без потерь. При повторном кодировании также удаляются встроенные метаданные, такие как сведения о камере и местоположение GPS. Если вам нужны эти метаданные, сохраните исходный файл.
Хотите увидеть это в действии? Преобразование изображения локально— нет загрузки, нет аккаунта.