Что WebP lossless на самом деле экономит по сравнению с PNG

Короткая версия

WebP lossless часто меньше PNG при тех же пикселях. Это практическая причина, по которой его используют.

Но слово "часто" важно. WebP lossless — не волшебная замена для любого PNG. Больше всего он обычно экономит на изображениях с прозрачностью, скриншотах, снимках интерфейса и смешанном графическом/фотографическом контенте. Экономия может быть небольшой, а иногда результат может даже проиграть, на очень маленьких ассетах, сильно оптимизированных палитровых PNG и простых иконках.

Если вы оптимизируете реальный сайт, правильный вопрос не в том: "WebP лучше PNG?" А в том: "Какие из моих PNG становятся заметно меньше в WebP lossless без проблем совместимости и рабочего процесса?"

Это более узкий вопрос, и ответить на него гораздо проще.

Что здесь означает "lossless"

Lossless означает, что декодированные пиксели точно совпадают с исходными пикселями. Если PNG преобразовать в WebP lossless и снова декодировать, пиксели изображения должны быть идентичными.

Это не означает, что файл остается тем же. Метаданные, обработка цветового профиля, вспомогательные PNG-чанки, информация о гамме, временные метки и чанки, специфичные для инструментов, могут быть изменены, удалены или представлены иначе в зависимости от вашего конвейера конвертации.

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

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

Почему PNG хорошо сжимает и где он упирается в предел

PNG — очень хороший формат. Он стал веб-стандартом по веским причинам:

• Он lossless.
• Он поддерживает альфа-прозрачность.
• Он широко поддерживается.
• Он предсказуем и прост в работе.
• Он отлично подходит для плоской графики, скриншотов, логотипов и UI-ассетов.

Сжатие PNG работает за счет фильтрации строк изображения и последующего применения DEFLATE-сжатия. Эта комбинация эффективна, особенно когда соседние пиксели похожи.

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

Именно здесь появляется WebP lossless.

Что WebP lossless делает иначе

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

Вам не нужно запоминать детали реализации. Полезная ментальная модель такова:

PNG хорошо сжимает строки. У WebP lossless больше способов описывать структуру изображения.

Именно эта дополнительная гибкость позволяет WebP lossless часто создавать меньшие файлы из одного и того же исходного изображения.

Google исторически описывала изображения WebP lossless как примерно на 26% меньшие, чем PNG, в среднем по собственным исследованиям. Воспринимайте это как ориентир, а не как обещание. Ваши изображения — не среднее значение. Ваша дизайн-система, скриншоты, продуктовые фотографии, иллюстрации, экспортированные ассеты и загрузки в CMS будут вести себя по-своему.

Где WebP lossless обычно экономит больше всего

Прозрачные изображения

PNG часто используется из-за альфа-прозрачности. WebP lossless тоже поддерживает альфа-канал и часто эффективно его сжимает.

Это полезно для:

• Вырезанных изображений товаров
• Стикеров и бейджей
• Интерфейсных оверлеев
• Диаграмм с прозрачным фоном
• Логотипов, экспортированных крупнее, чем нужно

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

Скриншоты и снимки UI

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

WebP lossless часто хорошо справляется с такими изображениями. Полностраничный UI-скриншот размером 900 KB в виде оптимизированного PNG может стать 500–700 KB в виде lossless WebP. Иногда экономия больше. Иногда меньше. Но категория перспективная.

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

Смешанный иллюстративный и фотографический контент

Многие современные веб-графические материалы не являются ни чистыми иллюстрациями, ни чистыми фотографиями. Представьте hero-изображение с продуктовым UI, градиентами, маленькими иконками, текстовыми подписями и встроенными фотографиями.

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

Более широкое дерево решений по форматам изображений, включая AVIF и lossy WebP, см. в статье Форматы изображений в 2026 году: когда AVIF выигрывает у WebP и когда нет.

Где PNG все еще может быть лучше

Крошечные иконки и простые ассеты

Для очень маленьких файлов важен накладной вес формата. PNG-иконка размером 650 байт — не очевидный кандидат на конвертацию. WebP может сэкономить 80 байт, а может стать больше.

В таком масштабе операционная сложность может перевесить выгоду. Если файл уже крошечный, не блокирует рендеринг и долго кэшируется, вероятно, у вас есть более важные задачи.

Тщательно оптимизированные палитровые PNG

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

Это особенно верно для:

• Небольших логотипов
• Pixel art
• Плоских иконок
• Простых диаграмм
• Графики с небольшим количеством цветов

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

Честный тест сравнивает WebP lossless с оптимизированным PNG, а не с любым файлом, который случайно загрузили.

Изображения, которые должны быть lossy

Это тихая ошибка: команды конвертируют PNG в WebP lossless, хотя изображение вообще не должно было быть PNG.

Фотографии — обычный случай. Полноцветная фотография, сохраненная как PNG, может быть огромной. Конвертация в WebP lossless может уменьшить файл, но обычно он все равно будет намного больше, чем качественный lossy WebP или AVIF.

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

Lossless стоит оставлять для случаев, где важны точные пиксели: UI-скриншоты, диаграммы, графика с большим количеством текста, прозрачность, сгенерированные графики и ассеты, которые заметно деградируют при lossy-сжатии.

Что он экономит, кроме байтов

Очевидная экономия — размер передачи. Меньшие файлы изображений обычно означают меньше трафика, более быстрые загрузки и лучшее поведение на медленных соединениях.

Но есть и вторичные преимущества:

• Меньше данных для посетителей с тарифами с ограничением трафика
• Более быстрое заполнение кэша изображений
• Снижение CDN-трафика
• Меньший объем хранения и резервных копий в масштабе
• Меньше давления на бюджеты производительности

Эти выгоды распределены неравномерно. Один PNG размером 2 MB, преобразованный в WebP на 900 KB, важнее, чем пятьдесят иконок, уменьшенных на 100 байт каждая.

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

Компромисс со стоимостью декодирования

Меньшие файлы — не единственная переменная производительности. Браузерам также нужно декодировать изображения перед тем, как их отрисовать.

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

Практическое правило: если WebP lossless уменьшает большой PNG на 30–50%, сетевая экономия обычно доминирует. Если он уменьшает маленький PNG на 3%, компромисс, вероятно, не стоит внимания.

Работа над производительностью полна таких пороговых решений. Не оптимизируйте каждый байт с одинаковой интенсивностью.

Простой метод тестирования

Используйте репрезентативную выборку, а не одно изображение.

Создайте папку с примерами с вашего реального сайта:

• Логотипы и иконки
• Скриншоты
• Вырезанные изображения товаров
• Диаграммы
• PNG, загруженные через CMS
• Изображения для предпросмотра в соцсетях
• Крупная hero-графика

Затем сравните три вещи:

1. Исходный PNG в том виде, в каком он был загружен
2. Оптимизированный PNG
3. Версию WebP lossless

Для командных рабочих процессов команды часто используют инструменты вроде oxipng, pngcrush, zopflipng или cwebp -lossless. Конкретный инструмент менее важен, чем дисциплина сравнения подобного с подобным.

Отслеживайте:

• Размер файла
• Равенство пикселей после декодирования
• Визуальный рендеринг в целевых браузерах
• Корректность прозрачности
• Внешний вид цвета
• Время сборки
• Трение в CMS или дизайн-процессе

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

Затем отсортируйте по общему количеству сэкономленных байтов. Такой порядок сортировки обычно подскажет, что делать.

Доставка: не ломайте старые клиенты без необходимости

Поддержка WebP сейчас широка в современных браузерах. Для большинства публичных сайтов его использовать безопасно. Тем не менее, если у вас есть встроенные webview, email-клиенты, устаревшие корпоративные браузеры, нативные приложения или необычные краулеры, протестируйте перед полной заменой PNG.

Консервативный шаблон — оставить PNG как fallback и отдавать WebP там, где он поддерживается:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Этот подход скучный, а скучное — хорошо. Пользователи с поддержкой WebP получают меньший файл. Все остальные получают PNG.

Если ваша система сборки добавляет отпечатки к ассетам, а CDN корректно их кэширует, это несложно поддерживать. Если ваша CMS делает альтернативные форматы болезненными, начните с самых крупных и наиболее часто повторяющихся изображений, а не пытайтесь конвертировать всю медиатеку за один спринт.

Приватность и локальная обработка

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

Браузерные инструменты для изображений стали достаточно хорошими для многих простых конвертаций, предпросмотров и проверок метаданных. Ограничения есть, но локальная обработка может снизить ненужную загрузку приватных изображений. Мы рассматривали эти компромиссы в статье почему обработка изображений в браузере — выигрыш для приватности.

Для внутренних ассетов главное — ясность политики. Знайте, покидают ли изображения устройство, где хранятся преобразованные версии и сохраняются ли метаданные.

Практическое правило

Используйте WebP lossless, когда верны все три условия:

• Исходник сейчас в PNG.
• Важны точные пиксели или чистая прозрачность.
• WebP lossless дает значимую экономию после сравнения с оптимизированным PNG.

Оставляйте PNG, когда:

• Файл крошечный.
• PNG уже оптимизирован по палитре и конкурентоспособен.
• Ограничения совместимости необычны.
• Операционная сложность не стоит сэкономленных байтов.

Используйте lossy WebP или AVIF, когда:

• Изображение фотографическое.
• Точные пиксели не важны.
• Настройка качества может резко уменьшить размер без видимых повреждений.

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

<!-- tool-cta:start -->

💡 Попробуйте это: Пропустите тот же PNG через Image Converter, чтобы создать версию WebP без потерь, и напрямую сравните размеры файлов.

<!-- tool-cta:end -->

Так что же WebP lossless на самом деле экономит?

Он экономит байты там, где у PNG закончились приемы сжатия. Иногда это скромные 10%. Иногда — уменьшение крупного прозрачного изображения почти вдвое. На реальном сайте экономия обычно сосредоточена в меньшинстве ассетов.

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

Используйте его там, где цифры это оправдывают. Не трогайте PNG там, где они не оправдывают.