Заметки команды о мастерстве, форматах и небольших решениях, стоящих за хорошей круглой обрезкой.
Как WebP достигает меньших размеров, чем PNG
WebP бежит в двух отдельных режимах. Его режим без потерь сводит пространственное и цветовое предсказание с этапом энтропии, который превосходит DEFLATE у PNG, приземляясь на сжатии примерно на 26 процентов лучше на типичных картинках по опубликованным цифрам Google. Его режим с потерями берёт взаймы блочное преобразование из мира видео, сделанное отпускать деталь, что глаз едва замечает, удерживая то, что он держит. Когда картинка несёт альфу, WebP сжимает эту альфу без потерь на её собственной дорожке, а данные RGB трактует с потерями, и так WebP с потерями и прозрачностью может дойти около трети размера PNG при качестве визуально под стать. DEFLATE у PNG знает лишь без потерь и никогда не может тронуть перцептивную сделку, которую совершает дорожка с потерями. Это структурное разделение и есть вся причина разницы в размере.
Альфа-канал в деталях
Оба формата хранят прозрачность в 8 битах, то есть каждая точка картинки может нести градацию непрозрачности, идущую от 0, совершенно сквозной, до 255, полностью наполненной. В пересборке, которую делает движок изображений платформы, значения RGBA считываются точка за точкой, и доля прозрачности идёт по своей полосе, сжатая без потерь, не завися от обращения с цветом. Так сквозная точка в 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, среди самых окупаемых одиночных ходов для измеряемой скорости. График поддержки держит это безопасным, с WebP в Chrome с 2011, в Firefox с 2019, в Safari с 2020 и в Edge со времён его пересборки на Chromium.
Вывод с потерями и настройка, близкая к без потерь
WebP выставляет ручку качества от 0 до 100, где более высокие числа держат больше детали и стоят больше байтов. Araluma фиксирует эту ручку в почти без потерь точке, выбранной уравновесить верность против размера по обычным веб-категориям, фотографиям, графике интерфейса и иконкам. В этой точке вывод читается как неотличимый от исходного PNG на нормальных дистанциях экрана. Строго, немного точности на уровне битов соскальзывает против истинно без потерь записи, так что побайтовая проверка между раскодированным WebP и исходным PNG вскрыла бы крошечные числовые зазоры, все сидящие ниже порога человеческого зрения на фотографическом материале. Для медицинских снимков, спутниковой съёмки или архивного хранения, где без потерь, жёсткое правило, верный ход, держать PNG и трактовать WebP сугубо как экспорт для доставки, а не рабочую копию.
Поведение метаданных
Превращение PNG в WebP сметает поля EXIF, IPTC и XMP прочь с вывода, что и делает каждый из трёх крупных браузерных движков. Цветовые профили, там, где движки расходятся. Chrome и Safari держат метку 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 обычно и есть запрос, ведь немалая часть печатных процессоров не переваривает WebP. Отправка по почте тоже клонит чашу к PNG, при той неровности, с какой почтовые клиенты встречают свежие форматы. А для любой вещи, что входит в циклы правки и перезаписи, место PNG, у сбережённой матрицы. На балансе WebP сияет как формат доставки почти без потерь, а PNG продолжает царствовать как файл работы и хранения, и идеальный поток бережёт исходный PNG и отправляет WebP в веб.
