Бележки от екипа за майсторството, форматите и малките решения зад добрия резултат.
Как 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 е една от най-високопродуктивните единични промени за подобряване на измерената производителност на страницата. Хронологията на поддръжката го прави безопасно, с WebP в Chrome от 2011 г., Firefox от 2019 г., Safari от 2020 г. и Edge от пресъздаването му на Chromium.
Изход със загуби и настройката, близка до без загуби
Записът на WebP предлага параметър за качество от 0 до 100, където по-високите стойности запазват повече детайлност за сметка на по-големи файлове. Този инструмент записва при фиксирана настройка, близка до без загуби, настроена да балансира визуалната вярност спрямо размера на файла за типичните категории уеб ресурси от снимки, графики за интерфейс и икони. При тази настройка изходът е перцептивно неразличим от изходния PNG при нормални разстояния на гледане на екрана. Технически известна точност на ниво бит се губи спрямо истинско кодиране без загуби, което означава, че сравнение на ниво байт между декодираните пиксели на WebP и оригиналните пиксели на PNG ще покаже малки числови разлики. Тези разлики са под прага на човешкото възприятие за фотографско съдържание. За медицинска образна диагностика, спътникова фотография или архивно дигитално съхранение, където верността без загуби е твърдо изискване, правилният подход е да запазите PNG и да използвате WebP само като износ за доставка, а не като работно копие.
Поведение на метаданните
Процесът, използван за преобразуване от PNG към WebP, премахва метаданните EXIF, IPTC и XMP от изхода. Това съвпада с поведението, наблюдавано и в трите големи браузърни ядра. Цветовите ICC профили се обработват непоследователно, където Chrome и Safari запазват етикета на sRGB ICC профила в изхода 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 за уеб доставка.
