Hva tapsfri WebP faktisk sparer deg sammenlignet med PNG

Kortversjonen

Tapsfri WebP er ofte mindre enn PNG for de samme pikslene. Det er den praktiske grunnen til at folk bruker det.

Men ordet "ofte" er viktig. Tapsfri WebP er ikke en magisk erstatning for alle PNG-filer. Det pleier å spare mest på bilder med gjennomsiktighet, skjermbilder, UI-opptak og blandet grafikk-/fotoinnhold. Det kan spare lite, eller av og til tape, på svært små ressurser, kraftig optimaliserte palett-PNG-er og enkle ikoner.

Hvis du optimaliserer et ekte nettsted, er ikke det riktige spørsmålet "Er WebP bedre enn PNG?" Det er: "Hvilke av PNG-ene mine blir meningsfullt mindre som tapsfri WebP, uten å skape problemer med kompatibilitet eller arbeidsflyt?"

Det er et smalere spørsmål, og mye enklere å svare på.

Hva "tapsfri" betyr her

Tapsfri betyr at de dekodede pikslene samsvarer nøyaktig med kildepikslene. Hvis en PNG konverteres til tapsfri WebP og dekodes igjen, skal bildepikslene være identiske.

Det betyr ikke at filen er den samme. Metadata, håndtering av fargeprofiler, sekundære PNG-chunks, gammainformasjon, tidsstempler og verktøyspesifikke chunks kan bli endret, fjernet eller representert annerledes, avhengig av konverteringsløpet ditt.

Denne forskjellen er viktig hvis du arbeider med arkivbilder, trykkarbeidsflyter, vitenskapelige bilder, juridiske bevis eller enhver situasjon der filbeholderen har viktig informasjon som ikke er pikseldata. For vanlig levering på web bryr de fleste team seg først og fremst om visuelle piksler, gjennomsiktighet, dimensjoner og fargekonsistens.

Hvis du publiserer bilder fra brukere, er metadata også et personvernspørsmål. Vi dekket det bredere temaet i hvordan fjerne EXIF-metadata før du deler bilder på nettet, men det samme prinsippet gjelder her: bildeoptimalisering bør være tydelig på hva den bevarer og hva den fjerner.

Hvorfor PNG komprimerer godt, og hvor det stopper

PNG er et svært godt format. Det ble en webstandard av gode grunner:

• Det er tapsfritt.
• Det støtter alfagjennomsiktighet.
• Det har bred støtte.
• Det er forutsigbart og enkelt å arbeide med.
• Det er utmerket for flate grafikker, skjermbilder, logoer og UI-ressurser.

PNG-komprimering fungerer ved å filtrere bilderader og deretter bruke DEFLATE-komprimering. Den kombinasjonen er effektiv, særlig når nærliggende piksler ligner hverandre.

Problemet er ikke at PNG er dårlig. Problemet er at PNG er gammelt. Komprimeringsmodellen har færre triks tilgjengelig enn nyere formater. Når du har optimalisert en PNG med en god encoder, kan du fortsatt legge igjen byte på bordet fordi selve formatet ikke kan representere enkelte mønstre like effektivt som tapsfri WebP kan.

Det er her tapsfri WebP kommer inn.

Hva tapsfri WebP gjør annerledes

Tapsfri WebP bruker et komprimeringssystem som er laget spesielt for bilder, i stedet for et generelt komprimeringslag festet på filtrerte rader. Under panseret kan det bruke teknikker som prediktiv koding, fargetransformasjoner, paletter, bakoverreferanser og entropikoding for å representere gjentatte eller forutsigbare pikselmønstre kompakt.

Du trenger ikke å huske implementasjonsdetaljene. Den nyttige mentale modellen er dette:

PNG komprimerer rader godt. Tapsfri WebP har flere måter å beskrive bildestruktur på.

Den ekstra fleksibiliteten er grunnen til at tapsfri WebP ofte kan produsere mindre filer fra det samme kildebildet.

Google har historisk beskrevet tapsfrie WebP-bilder som rundt 26 % mindre enn PNG i gjennomsnitt i sine egne studier. Behandle det som en retningsgivende målestokk, ikke et løfte. Bildene dine er ikke et gjennomsnitt. Designsystemet ditt, skjermbildene, produktbildene, illustrasjonene, eksporterte ressurser og CMS-opplastinger vil ha sin egen oppførsel.

Hvor tapsfri WebP vanligvis sparer mest

Gjennomsiktige bilder

PNG brukes ofte på grunn av alfagjennomsiktighet. Tapsfri WebP støtter også alfa, og komprimerer det ofte effektivt.

Dette er nyttig for:

• Produktutklipp
• Klistremerker og merker
• Grensesnittoverlegg
• Diagrammer med gjennomsiktig bakgrunn
• Logoer eksportert større enn nødvendig

Besparelsene kan være merkbare når alfakanalen inneholder store forutsigbare områder, myke kanter eller gjentatte former. Hvis du har en katalog full av gjennomsiktige produktbilder, er tapsfri WebP verdt å teste tidlig.

Skjermbilder og UI-opptak

Skjermbilder inneholder ofte store flate områder, gjentatte grensesnittkomponenter, tekst, ikoner, skygger og noen fotografiske områder. Den blandingen kan være vanskelig for PNG, særlig ved store dimensjoner.

Tapsfri WebP håndterer ofte disse bildene godt. Et helsides UI-skjermbilde som er 900 KB som en optimalisert PNG, kan bli 500–700 KB som tapsfri WebP. Noen ganger er besparelsen større. Noen ganger er den mindre. Men kategorien er lovende.

Hvis disse skjermbildene vises i dokumentasjon, markedsføringssider, onboarding-flyter eller kundehistorier, kan den samlede effekten være reell.

Blandet illustrasjons- og bildeinnhold

Mange moderne webgrafikker er verken rene illustrasjoner eller rene fotografier. Tenk på et hero-bilde som inneholder produkt-UI, gradienter, små ikoner, tekstetiketter og innebygde bilder.

PNG kan bevare det perfekt, men gi en stor fil. WebP eller AVIF med tap kan lage artefakter rundt tekst og kanter hvis det presses for hardt. Tapsfri WebP kan være en fornuftig mellomting når nøyaktige kanter er viktige.

For et bredere beslutningstre på tvers av bildeformater, inkludert AVIF og WebP med tap, se Bildeformater i 2026: når AVIF slår WebP og når det ikke gjør det.

Hvor PNG fortsatt kan være bedre

Små ikoner og enkle ressurser

For svært små filer betyr formatoverhead noe. Et PNG-ikon på 650 byte er ikke en åpenbar kandidat for konvertering. WebP kan spare 80 byte, eller det kan bli større.

På den skalaen kan den operative kompleksiteten veie tyngre enn gevinsten. Hvis filen allerede er liten, ikke blokkerer rendering og caches lenge, har du sannsynligvis bedre ting å fikse.

Nøye optimaliserte palett-PNG-er

Noen PNG-er er mye mindre enn folk forventer fordi de bruker en begrenset palett. En god PNG med indeksert farge kan være vanskelig å slå for enkel grafikk.

Dette gjelder særlig for:

• Små logoer
• Pikselkunst
• Flate ikoner
• Enkle diagrammer
• Grafikk med få farger

Vær forsiktig når du sammenligner WebP med slurvete PNG-eksporter. Hvis PNG-en kom rett fra et designverktøy med unødvendige metadata og dårlige komprimeringsinnstillinger, kan WebP se dramatisk bedre ut. Det betyr ikke at WebP slo en godt optimalisert PNG med samme margin.

En rettferdig test sammenligner tapsfri WebP med optimalisert PNG, ikke hvilken som helst fil som tilfeldigvis ble lastet opp.

Bilder som heller bør være med tap

Dette er den stille feilen: team konverterer PNG til tapsfri WebP når bildet aldri burde ha vært PNG i utgangspunktet.

Fotografier er det vanlige tilfellet. Et fullfargefotografi lagret som PNG kan være enormt. Å konvertere det til tapsfri WebP kan redusere filen, men den vil vanligvis fortsatt være mye større enn en WebP eller AVIF med tap i høy kvalitet.

Hvis brukeren ikke kan oppfatte forskjellen, er tapsfritt ofte feil mål. Produktfotografi, redaksjonelle bilder, bakgrunner og portretter hører vanligvis hjemme i et format med tap og fornuftige kvalitetsinnstillinger.

Tapsfritt bør reserveres for tilfeller der nøyaktige piksler betyr noe: UI-skjermbilder, diagrammer, teksttung grafikk, gjennomsiktighet, genererte diagrammer og ressurser som blir synlig dårligere med komprimering med tap.

Hva det sparer i tillegg til byte

Den åpenbare besparelsen er overføringsstørrelse. Mindre bildefiler betyr vanligvis mindre båndbredde, raskere nedlastinger og bedre oppførsel på trege tilkoblinger.

Men det finnes sekundære fordeler:

• Mindre data brukt av besøkende på målte abonnementer
• Raskere fylling av bildebuffer
• Redusert CDN-båndbredde
• Lavere lagrings- og sikkerhetskopivolum i stor skala
• Mindre press på ytelsesbudsjetter

Disse besparelsene er ikke jevnt fordelt. En enkelt PNG på 2 MB konvertert til en WebP på 900 KB betyr mer enn femti ikoner redusert med 100 byte hver.

Dette er grunnen til at bildeoptimalisering bør prioriteres etter påvirkning på siden, ikke etter formatideologi. Hvis Lighthouse flagger bildelevering, les det som et hint, ikke en dom. Guiden vår om hvordan lese en Lighthouse-rapport uten å få panikk forklarer hvordan du skiller meningsfulle ytelsesproblemer fra støyende diagnostikk.

Avveiningen rundt dekodingskostnad

Mindre filer er ikke den eneste ytelsesvariabelen. Nettlesere må også dekode bilder før de kan male dem.

PNG-dekoding er moden og vanligvis rask. WebP-dekoding har også bred støtte og er effektiv, men kan koste mer CPU i noen tilfeller. På moderne enheter er dette sjelden en blokkering, men på rimelige telefoner, bildetunge sider eller store ressurser som vises uten å rulle, er det verdt å måle.

Den praktiske regelen: Hvis tapsfri WebP kutter en stor PNG med 30–50 %, dominerer vanligvis nettverksbesparelsen. Hvis den kutter en liten PNG med 3 %, er avveiningen sannsynligvis ikke verdt å bry seg om.

Ytelsesarbeid er fullt av slike terskelbeslutninger. Ikke optimaliser hver byte med samme intensitet.

En enkel testmetode

Bruk et representativt utvalg, ikke ett bilde.

Lag en mappe med eksempler fra det faktiske nettstedet ditt:

• Logoer og ikoner
• Skjermbilder
• Produktutklipp
• Diagrammer
• CMS-opplastede PNG-er
• Sosiale forhåndsvisningsbilder
• Store hero-grafikker

Sammenlign deretter tre ting:

1. Den opprinnelige PNG-en slik den ble lastet opp
2. En optimalisert PNG
3. En tapsfri WebP-versjon

For kommandolinjearbeidsflyter bruker team ofte verktøy som oxipng, pngcrush, zopflipng eller cwebp -lossless. Det nøyaktige verktøyet betyr mindre enn disiplinen med å sammenligne likt med likt.

Følg med på:

• Filstørrelse
• Pikselelikhet etter dekoding
• Visuell rendering i målnettlesere
• Korrekt gjennomsiktighet
• Fargeutseende
• Byggetid
• Friksjon i CMS- eller designarbeidsflyt

Et enkelt regneark er nok. Legg til opprinnelig filstørrelse, optimalisert PNG-størrelse, tapsfri WebP-størrelse, prosent spart og siden der bildet vises.

Sorter deretter etter totalt antall byte spart. Den sorteringsrekkefølgen vil vanligvis fortelle deg hva du bør gjøre.

Levering: ikke bryt eldre klienter uforsiktig

WebP-støtte er nå bred i moderne nettlesere. For de fleste offentlige nettsteder er det trygt å bruke. Likevel, hvis du har innebygde webviews, e-postklienter, eldre bedriftsnettlesere, native apper eller uvanlige crawlere i miksen, bør du teste før du erstatter PNG direkte.

Det konservative mønsteret er å beholde PNG som fallback og levere WebP der det støttes:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Denne tilnærmingen er kjedelig, og kjedelig er bra. Brukere med WebP-støtte får den mindre filen. Alle andre får PNG-en.

Hvis byggsystemet ditt fingerprinter ressurser og CDN-et ditt cacher dem riktig, er ikke dette vanskelig å vedlikeholde. Hvis CMS-et ditt gjør alternative formater smertefulle, begynn med de største og mest gjentatte bildene i stedet for å prøve å konvertere hele mediebiblioteket i én sprint.

Personvern og lokal behandling

Bildekonvertering skjer ofte i byggpipelines eller serverbaserte medietjenester. Det er greit for mange team. Men hvis du håndterer sensitive skjermbilder, kundeopplastinger eller interne dokumenter, bør du være oppmerksom på hvor filer behandles.

Nettleserbaserte bildeverktøy har blitt gode nok for mange enkle konverteringer, forhåndsvisninger og metadatakontroller. Det finnes begrensninger, men lokal behandling kan redusere unødvendig opplasting av private bilder. Vi dekket avveiningene i hvorfor behandling av bilder i nettleseren er en personverngevinst.

For interne ressurser er hovedpoenget tydelige retningslinjer. Vit om bilder forlater enheten, hvor transformerte versjoner lagres, og om metadata bevares.

En praktisk tommelfingerregel

Bruk tapsfri WebP når alle tre stemmer:

• Kilden er for øyeblikket PNG.
• Nøyaktige piksler eller ren gjennomsiktighet betyr noe.
• Tapsfri WebP sparer en meningsfull mengde etter sammenligning med en optimalisert PNG.

Behold PNG når:

• Filen er liten.
• PNG-en allerede er palettoptimalisert og konkurransedyktig.
• Kompatibilitetskravene er uvanlige.
• Den operative kompleksiteten ikke er verdt bytene som spares.

Bruk WebP eller AVIF med tap når:

• Bildet er fotografisk.
• Nøyaktige piksler ikke betyr noe.
• En kvalitetsinnstilling kan redusere størrelsen dramatisk uten synlig skade.

Den beste bildestrategien er sjelden ett format overalt. Det er et lite sett regler brukt konsekvent.

<!-- tool-cta:start -->

💡 Prøv dette: Kjør den samme PNG-en gjennom Image Converter for å lage en tapsfri WebP-versjon, og sammenlign filstørrelsene direkte.

<!-- tool-cta:end -->

Så, hva sparer tapsfri WebP faktisk?

Det sparer byte der PNG har gått tom for komprimeringstriks. Noen ganger betyr det beskjedne 10 %. Noen ganger betyr det å kutte et stort gjennomsiktig bilde nesten i to. På et ekte nettsted er besparelsene vanligvis konsentrert i et mindretall av ressursene.

Det er den viktige delen. Tapsfri WebP er ikke en moralsk oppgradering fra PNG. Det er et praktisk alternativ for en bestemt jobb: mindre tapsfrie webbilder med gjennomsiktighet og bred støtte i moderne nettlesere.

Bruk det der tallene rettferdiggjør det. La PNG være i fred der de ikke gjør det.