Заметки команды о мастерстве, форматах и небольших решениях, стоящих за хорошим результатом.
Как WebP достигает меньших размеров, чем PNG
WebP использует два разных режима сжатия. Режим без потерь сочетает пространственное и цветовое предсказание с этапом энтропийной обработки, более совершенным, чем DEFLATE у PNG, достигая степени сжатия примерно на 26 процентов лучше на типичных изображениях по опубликованному тесту Google. Режим с потерями применяет блочное преобразование, схожее с видеосжатием, рассчитанное отбрасывать перцептивно несущественную информацию, сохраняя то, что глаз действительно видит. Для изображений с альфа-каналом WebP применяет отдельное сжатие без потерь к данным альфы, а к данным RGB сжатие с потерями, и поэтому WebP с потерями и прозрачностью может быть примерно втрое меньше PNG при равноценном визуальном качестве. DEFLATE у PNG умеет только без потерь и не может воспользоваться перцептивным компромиссом, который раскрывает режим с потерями. Разница форматов и объясняет этот разрыв.
Альфа-канал в деталях
И PNG, и WebP поддерживают 8-битную альфа-прозрачность, то есть каждый пиксель может хранить значение непрозрачности от 0 (полностью прозрачный) до 255 (полностью непрозрачный). Когда движок изображений платформы пересобирает PNG в WebP, он считывает значения RGBA каждого пикселя и передаёт значения альфы прямо на этап сжатия WebP, где они сохраняются сжатием без потерь, независимо от того, как обрабатываются данные RGB. В итоге каждый прозрачный пиксель PNG при альфе 0, каждый полупрозрачный между 1 и 254 и каждый непрозрачный при 255 отображается в точно такое же состояние в WebP. Для логотипа с мягкими тенями или текста со сглаживанием на прозрачном фоне плавность краёв сохраняется нетронутой. Это контрастирует с JPG, у которого в спецификации контейнера нет поля альфы и который вынужден накладывать изображение на цвет фона перед записью.
Core Web Vitals и выбор формата изображения
Largest Contentful Paint измеряет, сколько времени уходит на появление самого крупного видимого элемента страницы в области просмотра. Для большинства контентных страниц этот элемент, главное изображение, и Google использует LCP как сигнал ранжирования в своей оценке Core Web Vitals. PNG-изображения, постоянный источник провалов LCP из-за размера файла, ведь фотографический PNG в разрешении 4K может весить несколько мегабайт, тогда как равноценный WebP при качестве, близком к без потерь, обычно занимает долю этого. PageSpeed Insights указывает на это прямо в пункте аудита об отдаче изображений в форматах нового поколения, называя PNG форматом для замены. Перевод PNG, попадающих на критический путь отрисовки, в WebP, одно из самых результативных одиночных изменений для измеряемой производительности страницы. График поддержки в браузерах делает это безопасным: Chrome добавил WebP в 2011 году, Firefox в 2019, Safari в 2020, а Edge с момента перехода на Chromium.
Вывод с потерями и настройка, близкая к без потерь
Запись WebP предлагает параметр качества от 0 до 100, где более высокие значения сохраняют больше детали ценой более крупных файлов. Этот инструмент пишет при фиксированной настройке, близкой к без потерь, выверенной так, чтобы уравновесить визуальную точность и размер файла для типичных веб-категорий фотографий, графики интерфейса и иконок. При этой настройке вывод перцептивно неотличим от исходного PNG при обычной дистанции просмотра экрана. Строго говоря, часть точности на уровне битов теряется по сравнению с истинной записью без потерь, а значит побайтовое сравнение между раскодированными пикселями WebP и исходными пикселями PNG выявит небольшие числовые расхождения. Эти расхождения лежат ниже порога человеческого восприятия для фотографического содержимого. Для медицинской визуализации, спутниковой съёмки или архивного цифрового хранения, где точность без потерь, жёсткое требование, верный путь, держать PNG и применять WebP только как экспорт для доставки, а не как рабочую копию.
Поведение метаданных
Конвейер для конвертации PNG в WebP вырезает метаданные EXIF, IPTC и XMP из вывода. Это совпадает с поведением, наблюдаемым во всех трёх основных браузерных движках. Цветовые профили ICC обрабатываются непоследовательно: Chrome и Safari сохраняют тег профиля ICC sRGB в выводе WebP, а Firefox вырезает все метаданные, включая профиль ICC. В итоге конвертированный WebP безопасен в sRGB во всех браузерах, но любой тег широкого охвата, такой как Display-P3, Adobe RGB или ProPhoto RGB, присутствующий в исходном PNG, не выживает в Firefox. Для профессиональных процессов с критичной цветопередачей эта непоследовательность важна, поэтому, если итоговый вывод требует точности цветового профиля, конвертируйте инструментом, который явно записывает данные ICC, или нанесите тег профиля как этап постобработки специальным редактором метаданных изображений.
Когда оставить PNG, а когда WebP достаточно
Практическое дерево решений короткое. Если конечное назначение картинки, веб-страница или веб-приложение, а среда отрисовки, любой браузер с 2020 года и позже, WebP, верный формат экспорта. Если картинка должна открываться в дизайн-приложении вроде Figma, Sketch или Affinity Designer, сначала проверьте поддержку WebP в конкретной вашей версии, ведь она различается. Если картинка пойдёт в печатный процесс, предпочтительнее PNG или TIFF, так как большинство печатных RIP не работают с WebP. Если картинку отправят по электронной почте, безопаснее PNG, ведь почтовые клиенты печально известны непоследовательностью с современными форматами. Если картинка будет рабочим файлом, который редактируют и перезаписывают многократно, держите PNG как мастер. WebP при качестве, близком к без потерь, отличный формат доставки, а PNG, лучший формат для хранения и редактирования. Идеальный процесс держит PNG как оригинал и отдаёт WebP в веб.
