Бележки от екипа за майсторството, форматите и малките решения зад добрия кръгъл изрез.
Как WebP постига по-малки размери от PNG
WebP върви в два отделни режима. Режимът му без загуби сдвоява пространствено и цветово предсказване с етап на ентропия, който надминава DEFLATE на PNG, кацайки грубо 26 процента по-добра компресия на типични картини по публикуваните цифри на Google. Режимът му със загуби заема блоково базирана трансформация от работата с видео, изграден да изхвърля детайл, който окото едва забелязва, докато държи онзи, който забелязва. Когато картина носи алфа, WebP компресира онази алфа без загуби по своя собствена следа, докато третира данните RGB със загуби, и така WebP със загуби с прозрачност може да излезе близо до една трета от размера на PNG при съвпадащо визуално качество. DEFLATE на PNG знае само без загуби и никога не може да докосне перцептивния пазарлък, който прави следата със загуби. Онова структурно разцепление е цялата причина за разликата в размера.
Алфа каналът в детайли
И PNG, и WebP носят 8-битова алфа, позволявайки на всеки пиксел да заяви непрозрачност от 0 за напълно чист до 255 за напълно плътен. Когато графичната машина на платформата преизгражда PNG като WebP, тя чете стойностите RGBA на всеки пиксел и подава алфата право в стъпката за компресия на WebP, държейки я под компресия без загуби независимо как третира RGB. Така напълно чист пиксел при 0, частично чист където и да е от 1 до 254, и плътен при 255 всеки се съпоставя със същото състояние в WebP. На лого с мека сянка или букви с изгладени ръбове върху чист фон онази нежна мекота на ръба язди отсреща цяла. JPG не може да направи това, тъй като контейнерът му няма поле за алфа и насилва картината върху цвят на фона, преди да кодира каквото и да било.
Core Web Vitals и изборът на формат за изображение
Largest Contentful Paint засича колко отнема на най-големия видим елемент на страницата да се появи в зрителната площ, и на повечето страници със съдържание онзи елемент е главната картина. Google сгъва LCP в сигнала си за класиране Core Web Vitals, и PNG е чест нарушител при LCP заради чисто тегло, където 4K фотографски PNG може да върви няколко мегабайта, докато същата картина като близо до без загуби WebP е дял от това. PageSpeed Insights го назовава право под елемента си за формати от ново поколение и сочи PNG като формата за смяна. Завъртането към WebP на PNG, които седят на критичния път на изобразяване на страница, е сред най-изгодните единични ходове за измерена скорост. Графикът го държи безопасно, с 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 към мрежата.
