Noter fra teamet om håndværk, formater og de små beslutninger bag et godt resultat.
Hvordan WebP opnår mindre størrelser end PNG
WebP bruger to forskellige komprimeringstilstande. Den tabsfri tilstand kombinerer rumlig og farvemæssig forudsigelse med et entropitrin, der er mere avanceret end PNG's DEFLATE, og opnår komprimeringsforhold omkring 26 procent bedre på typiske billeder ifølge Googles offentliggjorte måling. Tilstanden med tab anvender en blokbaseret transformation beslægtet med videokomprimering, bygget til at kassere information, øjet ikke fanger, mens den holder fast i det, vi faktisk ser. For billeder med en alfakanal bruger WebP en separat tabsfri underkomprimering til alfadataene, mens RGB-dataene komprimeres med tab, og det er derfor, WebP med tab og gennemsigtighed kan være cirka tre gange mindre end en PNG ved samme visuelle kvalitet. PNG's DEFLATE er kun tabsfri og kan ikke udnytte den perceptuelle afvejning, tilstanden med tab trækker på. Forskellen mellem formaterne forklarer afstanden.
Alfakanalen i detaljer
Både PNG og WebP understøtter 8-bit alfagennemsigtighed, hvor hver pixel kan bære en dækningsværdi fra 0 for helt gennemsigtig til 255 for helt dækkende. Når browserens billedmotor skriver en PNG om til WebP, læser den RGBA-værdierne for hver pixel og fører alfaværdierne direkte ind i WebP-komprimeringen, hvor de bevares med tabsfri komprimering uafhængigt af, hvordan RGB-dataene behandles. Resultatet er, at hver gennemsigtig pixel i PNG'en ved alfa 0, hver halvgennemsigtig pixel mellem 1 og 254 og hver dækkende pixel ved 255 ender i præcis samme tilstand i WebP'en. For et logo med bløde slagskygger eller kantudjævnet tekst på gennemsigtig baggrund følger kantblødheden uskadt med. Det står i kontrast til JPG, som intet alfafelt har i sin beholderspecifikation og må sætte billedet mod en baggrundsfarve, før det gemmes.
Core Web Vitals og valg af billedformat
Largest Contentful Paint måler, hvor lang tid det tager, før det største synlige element på siden dukker op i visningsfeltet. For de fleste indholdssider er det element hovedbilledet, og Google bruger LCP som et rangeringssignal i sin vurdering af Core Web Vitals. PNG-billeder er en vedvarende kilde til svage LCP-tal på grund af filstørrelsen, eftersom en fotografisk PNG i 4K-opløsning kan veje flere megabyte, mens den tilsvarende WebP ved næsten tabsfri kvalitet typisk er en brøkdel af det. PageSpeed Insights markerer netop dette i sit punkt om at levere billeder i næste generations formater og lister PNG som det format, der bør skiftes ud. At konvertere de PNG'er, der ligger i kritiske gengivelsesveje, til WebP er et af de mest virkningsfulde enkelttiltag for målt sideydelse. Tidslinjen for browserunderstøttelse gør det sikkert, med Chrome, der tilføjede WebP i 2011, Firefox i 2019, Safari i 2020 og Edge fra sin Chromium-ombygning.
Resultat med tab og den næsten tabsfri indstilling
WebP-lagring tilbyder en kvalitetsparameter fra 0 til 100, hvor højere værdier bevarer mere detalje på bekostning af større filer. Dette værktøj skriver ved en fast næsten tabsfri indstilling stemt til at balancere visuel troskab mod filstørrelse for de typiske kategorier af webaktiver: fotografier, brugerfladegrafik og ikoner. Ved denne indstilling kan resultatet perceptuelt ikke skelnes fra kilde-PNG'en på almindelig afstand foran skærmen. Teknisk går en smule præcision på bitniveau tabt mod en ægte tabsfri lagring, hvilket betyder, at en sammenligning på byte-niveau mellem de afkodede WebP-pixels og de oprindelige PNG-pixels vil vise små numeriske forskelle. Disse forskelle ligger under tærsklen for menneskelig opfattelse på fotografisk indhold. For medicinsk billedbehandling, satellitfoto eller digital arkivbevaring, hvor tabsfri troskab er et hårdt krav, er den rigtige fremgangsmåde at beholde PNG'en og bruge WebP udelukkende som leveringseksport, ikke som arbejdskopi.
Hvordan metadata behandles
Forløbet, der bruges til PNG-til-WebP-konvertering, stryger EXIF, IPTC og XMP-metadata fra resultatet. Det stemmer med den adfærd, man ser på tværs af alle tre store browsermotorer. ICC-farveprofiler håndteres uensartet, hvor Chrome og Safari bevarer sRGB-ICC-profilens mærke i WebP-resultatet, mens Firefox stryger alle metadata, ICC-profilen iberegnet. Nettoeffekten er, at den konverterede WebP er sRGB-sikker på tværs af browsere, men enhver mærkning til bredt farveområde som Display-P3, Adobe RGB eller ProPhoto RGB i kilde-PNG'en overlever ikke i Firefox. For farvekritiske professionelle arbejdsgange tæller den uensartethed, så hvis det endelige resultat kræver troskab i farveprofilen, så konverter med et værktøj, der skriver ICC-data udtrykkeligt, eller sæt profilmærket på bagefter med en dedikeret redigerer til billedmetadata.
Hvornår PNG bør beholdes, og hvornår WebP er nok
Det praktiske valgtræ er kort. Skal billedet i sidste ende vises på en webside eller i en webapp, og gengivelsesmiljøet er en hvilken som helst browser fra 2020 og frem, er WebP det rigtige eksportformat. Skal billedet åbnes i et designprogram som Figma, Sketch eller Affinity Designer, så kontroller WebP-understøttelsen i netop den version, du bruger, eftersom understøttelsen varierer. Skal billedet bruges i et trykkeriforløb, foretrækkes PNG eller TIFF, eftersom de fleste trykkeri-RIP'er ikke håndterer WebP. Skal billedet sendes med e-mail, er PNG sikrere, eftersom e-mailprogrammer er notorisk uensartede med moderne formater. Skal billedet bruges som en arbejdsfil, der redigeres og gemmes igen mange gange, så behold PNG'en som original. WebP ved næsten tabsfri kvalitet er et fremragende leveringsformat, og PNG er det bedre format til arkiv og redigering. Den ideelle arbejdsgang beholder PNG'en som original og eksporterer til WebP til levering på nettet.
