Notater fra teamet om håndverket, formater og de små valgene bak et godt resultat.
Hvordan WebP oppnår mindre størrelser enn PNG
WebP bruker to ulike komprimeringsmoduser. Den tapsfrie modusen kombinerer romlig og fargemessig prediksjon med et entropitrinn som er mer avansert enn PNGs DEFLATE, og oppnår komprimeringsforhold omtrent 26 prosent bedre på typiske bilder etter Googles publiserte måling. Modusen med tap bruker en blokkbasert transform i slekt med videokomprimering, laget for å kaste informasjon øyet ikke oppfatter, mens den beholder det vi faktisk ser. For bilder med alfakanal bruker WebP en egen tapsfri delkomprimering for alfadataene mens RGB-dataene komprimeres med tap, og det er derfor WebP med tap og gjennomsiktighet kan være rundt tre ganger mindre enn en PNG ved samme visuelle kvalitet. PNGs DEFLATE er kun tapsfri og kan ikke utnytte den perseptuelle avveiingen modusen med tap drar nytte av. Forskjellen mellom formatene forklarer gapet.
Alfakanalen i detalj
Både PNG og WebP støtter 8-bits alfagjennomsiktighet, der hver piksel kan bære en dekkverdi fra 0 for helt gjennomsiktig til 255 for helt dekkende. Når bildemotoren i nettleseren skriver om en PNG til WebP, leser den RGBA-verdiene for hver piksel og fører alfaverdiene rett inn i WebP-komprimeringen, der de beholdes med tapsfri komprimering uavhengig av hvordan RGB-dataene behandles. Resultatet er at hver gjennomsiktig piksel i PNG-en ved alfa 0, hver halvgjennomsiktig piksel mellom 1 og 254 og hver dekkende piksel ved 255 ender i nøyaktig samme tilstand i WebP-en. For en logo med myke slagskygger eller kantutjevnet tekst på gjennomsiktig bakgrunn følger kantmykheten uskadd med. Dette står i kontrast til JPG, som ikke har noe alfafelt i sin beholderspesifikasjon og må sette bildet mot en bakgrunnsfarge før det lagres.
Core Web Vitals og valg av bildeformat
Largest Contentful Paint måler hvor lang tid det tar før det største synlige elementet på siden dukker opp i visningsfeltet. For de fleste innholdssider er det elementet hovedbildet, og Google bruker LCP som et rangeringssignal i sin vurdering av Core Web Vitals. PNG-bilder er en jevn kilde til svake LCP-tall på grunn av filstørrelsen, ettersom en fotografisk PNG i 4K-oppløsning kan veie flere megabyte, mens den tilsvarende WebP-en ved nesten tapsfri kvalitet typisk er en brøkdel av det. PageSpeed Insights markerer dette spesifikt i sitt punkt om å levere bilder i neste generasjons formater, og lister PNG som formatet som bør byttes ut. Å konvertere PNG-er som ligger i kritiske gjengivelsesveier til WebP er en av de mest virkningsfulle enkeltendringene for målt sideytelse. Tidslinjen for nettleserstøtte gjør dette trygt, med Chrome som la til WebP i 2011, Firefox i 2019, Safari i 2020 og Edge fra sin Chromium-ombygging.
Resultat med tap og den nesten tapsfrie innstillingen
WebP-lagring tilbyr en kvalitetsparameter fra 0 til 100, der høyere verdier beholder mer detalj på bekostning av større filer. Dette verktøyet skriver ved en fast nesten tapsfri innstilling stemt for å balansere visuell troskap mot filstørrelse for de typiske kategoriene av nettressurser: fotografier, grensesnittgrafikk og ikoner. Ved denne innstillingen er resultatet perseptuelt ikke til å skille fra kilde-PNG-en på vanlig avstand foran skjermen. Teknisk går noe presisjon på bitnivå tapt mot en ekte tapsfri lagring, som betyr at en sammenligning på byte-nivå mellom de dekodede WebP-pikslene og de opprinnelige PNG-pikslene vil vise små numeriske forskjeller. Disse forskjellene ligger under terskelen for menneskelig oppfatning på fotografisk innhold. For medisinsk bildebehandling, satellittfoto eller digital arkivbevaring, der tapsfri troskap er et hardt krav, er riktig framgangsmåte å beholde PNG-en og bruke WebP kun som leveringseksport, ikke som arbeidskopi.
Hvordan metadata behandles
Prosessen som brukes til PNG-til-WebP-konvertering stripper EXIF, IPTC og XMP-metadata fra resultatet. Dette stemmer med oppførselen man ser på tvers av alle tre store nettlesermotorer. ICC-fargeprofiler håndteres ujevnt, der Chrome og Safari beholder sRGB-ICC-profilens merke i WebP-resultatet, mens Firefox stripper alle metadata, ICC-profilen inkludert. Nettoeffekten er at den konverterte WebP-en er sRGB-trygg på tvers av nettlesere, men enhver merking for vidt fargeområde som Display-P3, Adobe RGB eller ProPhoto RGB i kilde-PNG-en overlever ikke i Firefox. For fargekritiske profesjonelle arbeidsflyter teller denne ujevnheten, så hvis det endelige resultatet trenger troskap i fargeprofilen, konverter med et verktøy som skriver ICC-data eksplisitt, eller sett profilmerket på i etterkant med en egen redigerer for bildemetadata.
Når PNG bør beholdes og når WebP holder
Det praktiske valgtreet er kort. Skal bildet til slutt vises på en nettside eller i en nettapp, og gjengivelsesmiljøet er en hvilken som helst nettleser fra 2020 og framover, er WebP riktig eksportformat. Må bildet åpnes i et designprogram som Figma, Sketch eller Affinity Designer, kontroller WebP-støtten i akkurat den versjonen du bruker, ettersom støtten varierer. Skal bildet brukes i en trykkeriprosess, foretrekkes PNG eller TIFF, siden de fleste trykkeri-RIP-er ikke håndterer WebP. Skal bildet sendes i e-post, er PNG tryggere, ettersom e-postklienter er notorisk ujevne med moderne formater. Skal bildet brukes som en arbeidsfil som redigeres og lagres på nytt mange ganger, behold PNG-en som original. WebP ved nesten tapsfri kvalitet er et utmerket leveringsformat, og PNG er det bedre formatet for arkiv og redigering. Den ideelle arbeidsflyten beholder PNG-en som original og eksporterer til WebP for levering på nett.