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

Выбор формата изображения обычно сводится к двум вопросам. Нужны ли изображению прозрачные области? И будет ли заметна небольшая потеря качества? Ответьте на них, и формат почти выбирается сам. Третий вопрос, куда пойдёт файл, решает, можно ли вообще использовать новые форматы, потому что маркетплейсы и многие приложения по-прежнему принимают только JPEG и PNG.

В этом руководстве сравниваются четыре формата, которые чаще всего встречаются для фото и графики в вебе: JPEG, PNG, WebP и AVIF. В конце есть быстрый выбор для типичных задач: логотипы, фото товаров, обычные фото и вырезки с прозрачным фоном.

Таблица сравнения

Подробности о форматах взяты из руководства MDN по типам файлов изображений. Строка о поддержке для браузеров уже не так важна, как раньше: все актуальные основные браузеры показывают WebP, а AVIF поддерживается в свежих версиях каждого из них. Важна она везде, кроме браузеров: в формах загрузки, на маркетплейсах, в почтовых клиентах и старых настольных программах.

С потерями и без потерь простыми словами

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

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

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

• Каждое сохранение с потерями теряет ещё немного. Держите мастер-файл без потерь (оригинал с камеры, PNG или собственный файл редактора) и экспортируйте из него копии с потерями, а не редактируйте и пересохраняйте один и тот же JPEG.
• Хуже всего сжатие с потерями справляется с резкими краями. Логотип, сохранённый в JPEG, обрастает грязным «москитным шумом» вокруг букв, а на скриншоте расплывается текст.

Прозрачность: решающий фактор для вырезок

В JPEG нет альфа-канала. В JPEG никак не записать «этот пиксель прозрачный», поэтому если удалить фон и сохранить в JPEG, пустая область заполнится сплошным цветом, обычно белым или чёрным. Если вырезка должна лежать поверх другого контента, нужен PNG, WebP или AVIF.

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

WebP поддерживает прозрачность и в режиме без потерь, и в режиме с потерями. В документации Google по WebP сказано, что WebP без потерь добавляет прозрачность примерно за 22% лишних байтов, а WebP с потерями и прозрачностью обычно примерно в 3 раза меньше аналогичного PNG. Поэтому WebP с потерями остаётся самым эффективным способом показать прозрачное фото товара на своём сайте.

Размер файла

Для одного и того же изображения примерный порядок от большего к меньшему: PNG, JPEG, WebP, AVIF, с важной оговоркой: PNG «большой» только для фото. Для плоской графики с небольшим числом цветов PNG часто меньше JPEG и всегда чётче.

Опубликованные Google цифры по WebP служат полезным ориентиром:

• Файлы WebP без потерь на 26% меньше PNG.
• Файлы WebP с потерями на 25-34% меньше сопоставимых JPEG при одинаковом показателе качества SSIM.

MDN советует для растровых изображений в вебе предпочитать WebP или AVIF, которые обычно сжимают лучше, чем PNG, JPEG и GIF. AVIF к тому же поддерживает 10- и 12-битный цвет, что помогает с плавными градиентами. Его слабое место в поддержке за пределами браузеров: многие приложения и формы загрузки до сих пор его отклоняют.

Размер файла важнее всего, когда вы отдаёте много изображений многим посетителям. Для одной загрузки на маркетплейс, который всё равно пережимает всё подряд, формат, который он принимает, важнее сэкономленных байтов.

Где какой формат принимают

С браузерами всё просто. Форматы отклоняют маркетплейсы и приложения. Ниже принимаемые форматы по собственной документации каждой платформы, проверено в октябре 2026 года:

Выделяются две вещи. Во-первых, WebP и AVIF не принимают Amazon, Walmart и каталоги Meta, поэтому для загрузки на маркетплейсы держите JPEG или PNG. Во-вторых, Etsy говорит, что прозрачные PNG не поддерживаются и прозрачные области могут стать чёрными, поэтому перед загрузкой туда сводите вырезки на цвет. Точные размеры в пикселях для каждой платформы смотрите в справочнике по размерам фото товаров.

Какой формат выбрать для типичных задач

Логотипы

Используйте SVG, если есть векторный оригинал; MDN рекомендует его для логотипов и иконок. Если нужен растровый файл, берите PNG с прозрачным фоном или WebP без потерь на своём сайте. Никогда не JPEG: он размывает края и не может быть прозрачным.

Фото товаров

Для главных фото на маркетплейсах используйте JPEG на чисто белом фоне. Блог Amazon для продавцов называет JPEG предпочтительным форматом, и его принимает каждый маркетплейс из таблицы выше. Экспортируйте с высоким качеством (около 85-92 в большинстве программ) из мастер-файла без потерь.

В своём магазине загружайте качественный JPEG или PNG и дайте платформе выполнить конвертацию. Shopify, например, говорит, что его сервис изображений автоматически отдаёт каждому посетителю лучший формат, который поддерживает его браузер.

Обычные фото

JPEG служит надёжным выбором по умолчанию для отправки и загрузки. На сайте, которым вы управляете, WebP или AVIF с запасным JPEG даёт тот же вид за меньшее число байтов. Если телефон сохраняет файлы HEIC, конвертируйте их в JPEG перед загрузкой туда, где HEIC не указан.

Вырезки и прозрачные изображения

Используйте PNG, когда файл должен работать везде: в слайдах, документах, графических редакторах и большинстве форм загрузки. Используйте WebP, когда ставите изображение на свою веб-страницу и хотите, чтобы оно было лёгким. JPEG берите только если вы сознательно залили фон сплошным цветом, например белым для маркетплейса.

Скриншоты и схемы

PNG или WebP без потерь. Форматы с потерями размывают текст.

Современные форматы с запасным вариантом

Если у вас свой сайт, выбирать один формат не обязательно. HTML-элемент picture позволяет браузеру взять первый формат, который он понимает:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

Браузеры с поддержкой AVIF берут первый источник, остальные переходят на WebP, а всё более старое использует PNG. Многие хостинги и CDN для изображений делают такую конвертацию сами по заголовку Accept браузера, и это часто проще, чем генерировать каждый формат самостоятельно.

Конвертация между форматами без сюрпризов

• PNG или WebP в JPEG: прозрачные области сводятся. Выберите цвет заливки сами (обычно белый), а не доверяйте программе, потому что некоторые по умолчанию берут чёрный.
• JPEG в PNG: файл становится больше, но не лучше. Качество, потерянное в JPEG, не возвращается.
• Любой формат в WebP или AVIF: проверьте, что прозрачность сохранилась и цвета выглядят правильно; если изображение будут смотреть в вебе, сначала переведите его в цветовой профиль sRGB.
• Пересохранение JPEG: каждое сохранение с более низким качеством накапливает потери. Экспортируйте один раз из мастер-файла.

Более быстрый вариант для вырезок

Если вы удаляете фон массово, removebackground.dev экспортирует вырезку как прозрачный PNG или WebP либо как JPG на любом сплошном цвете, так что из одной загрузки можно получить JPEG на белом для маркетплейса и прозрачный PNG для своего сайта.