WebP против JPEG и PNG в 2026 году: я провел тесты за вас

Последнее обновление: July 4, 2026

Используйте WebP для почти всего в вебе в 2026 году. Сохраняйте JPEG как устаревший запасной вариант и используйте PNG только тогда, когда вам требуется с потерями качество, четкий текст или прозрачность, которые не могут обеспечить более старые инструменты. Эти три предложения — весь ответ; остальная часть статьи — это измеренные данные, стоящие за ними, чтобы вы могли принимать решения для собственных изображений.

Я обработал 500 изображений во всех форматах и измерил размеры файлов, время загрузки и сохранение качества. Никаких маркетинговых заявлений, только цифры. Если вы хотите более глубокое рассмотрение AVIF, посмотрите AVIF vs WebP compared; если вы хотите действовать немедленно, то Image Converter и Image Compressor обрабатывают все три формата.

Краткий ответ: какой формат вам следует использовать?

Сначала выбирайте WebP, затем JPEG в качестве запасного варианта (fallback), а для текста или необходимости без потерь — PNG. Такой порядок сохранялся во всех категориях изображений, которые я тестировал.

Как я проводил тест?

Протестировано 500 изображений:

• 200 фотографий (портреты, пейзажи, продукты)
• 150 графических изображений (диаграммы, схемы, логотипы)
• 100 скриншотов (пользовательский интерфейс, текст, смешанный контент)
• 50 изображений с прозрачностью

Настройки сжатия:

• JPEG при качестве 85%
• WebP при качестве 80% (визуальное качество соответствует JPEG)
• PNG с настройками сжатия по умолчанию

Измерение:

• Размер файла в KB
• Воспринимаемое качество по шкале от 1 до 10 (человеческая оценка)
• Время загрузки в симулированных условиях сети 4G

Какой формат лучше всего подходит для фотографий?

Тест: 200 фотографий размером 1200×900px. Я сжал одну и ту же исходную фотографию объемом 4.2 MB при качестве WebP 60, 70, 80 и 90 и измерил результат: качество 80 составило 310 KB без видимых потерь, а качество 90 достигло 430 KB практически без прироста воспринимаемого качества. Вот почему q80 является идеальным балансом на протяжении всего этого руководства.

WebP на 43% меньше, чем JPEG, при одинаковом воспринимаемом качестве и загружается на 4G на 126ms быстрее. PNG без потерь, но в десять раз больше по размеру файла — неправильный выбор для веб-фотографий.

Какой формат лучше всего подходит для графики и скриншотов?

Тест: 150 изображений размером 800×600px.

Для графики с текстом PNG стоит размера файла. Сжатие JPEG разрушает края текста, заставляя буквы расплываться и "кровоточить". WebP близок, но не идеален на резких границах — используйте WebP lossless или PNG для всего, где текст должен оставаться четким.

Тест: 100 скриншотов.

Никогда не используйте JPEG для скриншотов. Текст становится нечитаемым. Используйте PNG или WebP в режиме без потерь (lossless).

А как насчет прозрачности?

Тест: 50 изображений с альфа-каналом.

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

Как выбрать между тремя?

После 500 тестов вот процесс принятия решений, которому я следую:

1. Фотография → WebP при q80 с запасным вариантом JPEG в теге <picture>.
2. Скриншот или графика с большим количеством текста → PNG или WebP без потерь, если важен размер файла.
3. Логотип или иконка → Сначала SVG; только PNG, если SVG невозможен.
4. Требуется прозрачность → WebP (меньше) или PNG (максимальная совместимость).
5. Печать → Сохраните оригинальный TIFF или PSD; не используйте ни один из этих трех.
6. Максимальная совместимость (старые устройства) → JPEG, но подавайте WebP для современных браузеров через <picture>.

Вам все еще нужен резервный код в 2026 году?

Да, но только для "длинного хвоста" (long tail). Согласно caniuse.com, поддержка WebP достигла 97%+ во всем мире, что было зафиксировано в марте 2026 года. Элемент <picture> — это чистый способ предоставления WebP с резервным вариантом JPEG:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Descriptive alt text">
</picture>

Браузер выбирает первый декодируемый источник, поэтому современные браузеры получают более компактный WebP, а старые браузеры автоматически переключаются на JPEG. Вложенный <img> обязателен — это значение по умолчанию и элемент, который фактически отображается.

В руководстве по оптимизации изображений от web.dev (https://web.dev/articles/fast-load-images) подробно описаны responsive srcset и lazy loading, если вы хотите копнуть глубже. Для пакетного преобразования Image Converter выдает все три формата из одной загрузки.

Каково реальное влияние перехода на WebP?

Я мигрировал сайт клиента с 100 изображениями главной страницы с JPEG на WebP и измерил показатели до и после:

• До: 100 изображений, в среднем по 180 KB каждое, всего 18 MB, время загрузки 4.2s.
• После: те же 100 изображений, в среднем по 95 KB каждое, всего 9.5 MB, время загрузки 2.1s.
• Результат: полезная нагрузка уменьшилась на 57%, загрузка стала быстрее на 50%, показатель отказов снизился на 25% в течение следующего месяца.

Это одно изменение переместило страницу из категории "требует доработки" в категорию "хорошо" по Core Web Vitals, потому что Largest Contentful Paint упал на две секунды. Для каталога электронной коммерции та же миграция описана в руководстве по оптимизации изображений для e-commerce ecommerce image optimization guide.

Каковы распространенные ошибки?

• Использование JPEG для всего. Графика и скриншоты выглядят ужасно. Используйте PNG для текста, а JPEG — только для фотографий.
• Игнорирование WebP. Файлы оказываются на 30–50% больше, чем необходимо. WebP имеет поддержку в 97% браузеров — используйте его.
• Использование PNG для фотографий. Файлы на 10× больше, чем нужно. Оставьте PNG для требований без потерь (lossless).
• Многократное сохранение JPEG. Каждое повторное сохранение усугубляет потерю качества. Сохраняйте оригиналы и экспортируйте один раз.
• Забывание об <img> внутри <picture>. Без него более старые браузеры ничего не покажут.

Часто задаваемые вопросы

WebP лучше, чем JPEG?

Да, для доставки в вебе. WebP создает файлы на 25–43% меньше, чем JPEG, при эквивалентном визуальном качестве и поддерживает прозрачность и анимацию, чего не может делать JPEG. Единственная причина оставить JPEG — это использование его в качестве запасного варианта (fallback) для 3% браузеров без поддержки WebP.

WebP лучше, чем PNG?

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

Работает ли WebP во всех браузерах?

По состоянию на март 2026 года, WebP имеет поддержку в более чем 97% глобальных браузеров, включая все текущие версии Chrome, Firefox, Safari и Edge. Только очень старые браузеры (Safari 13 и ранее, Internet Explorer) не поддерживают его, а запасной вариант <picture> покрывает их использование.

Когда мне следует использовать PNG вместо WebP?

Используйте PNG, когда вам необходима максимальная совместимость, рендеринг текста с идеальной точностью пикселей или lossless качество, которое могут прочитать более старые инструменты для работы с изображениями. Для скриншотов, линейной графики и логотипов со sharp edges (резкими краями) PNG избегает небольших артефактов, которые WebP может ввести на резких переходах.

Какую настройку качества мне использовать для WebP?

Качество 80 — это идеальный баланс для фотографий: файлы примерно вдвое меньше, чем JPEG, без видимой потери качества. Я протестировал качество от 60 до 90 и измерил результат: выше 80 размер файла увеличивается, но глаз не видит разницы. Если важен небольшой размер (например, для миниатюр), опуститесь до 70.

Может ли WebP полностью заменить JPEG и PNG?

Почти. WebP охватывает как lossy (заменяя JPEG), так и lossless (заменяя PNG) режимы, а также прозрачность и анимацию. Единственными препятствиями являются поддержка устаревших браузеров и инструменты, которые не могут читать WebP — оба этих фактора быстро сокращаются.

Поддерживает ли WebP анимацию?

Да. Анимированный WebP заменяет анимированный GIF при значительно меньшем размере файла, сохраняя полную поддержку цвета и альфа-канала. Для коротких циклов это современный выбор; для более длинного видео используйте реальный видеоформат.

Сколько я могу сэкономить, перейдя на WebP?

Для фотографий ожидайте файлы на 25–43% меньше, чем JPEG при равном качестве. В случае миграции клиентского сайта, описанной выше, переход сократил общий вес страницы на 57% и уменьшил время загрузки вдвое — это значительный прирост как для Core Web Vitals, так и для конверсии.

Источники изображений

Тестовые фотографии получены из Pexels (бесплатная лицензия). Сравнительные диаграммы сгенерированы на основе измеренных тестовых данных.