Hvad tabsfri WebP faktisk sparer dig i forhold til PNG

Den korte version

Tabsfri WebP er ofte mindre end PNG for de samme pixels. Det er den praktiske grund til, at folk bruger det.

Men ordet "ofte" er vigtigt. Tabsfri WebP er ikke en magisk erstatning for alle PNG’er. Det giver typisk størst besparelse på billeder med gennemsigtighed, skærmbilleder, UI-optagelser og blandet grafik-/fotoindhold. Det kan spare meget lidt, eller indimellem tabe, på meget små assets, stærkt optimerede palette-PNG’er og enkle ikoner.

Hvis du optimerer et rigtigt website, er det rigtige spørgsmål ikke "Er WebP bedre end PNG?" Det er: "Hvilke af mine PNG’er bliver meningsfuldt mindre som tabsfri WebP uden at skabe problemer med kompatibilitet eller workflow?"

Det er et snævrere spørgsmål, og langt lettere at besvare.

Hvad "tabsfri" betyder her

Tabsfri betyder, at de afkodede pixels matcher kildepixlerne præcist. Hvis en PNG konverteres til tabsfri WebP og afkodes igen, bør billedets pixels være identiske.

Det betyder ikke, at filen er den samme. Metadata, håndtering af farveprofiler, sekundære PNG-chunks, gammaoplysninger, tidsstempler og værktøjsspecifikke chunks kan blive ændret, fjernet eller repræsenteret anderledes afhængigt af din konverteringspipeline.

Denne forskel er vigtig, hvis du arbejder med arkivbilleder, print-workflows, videnskabelige billeder, juridisk bevismateriale eller enhver situation, hvor filcontaineren indeholder vigtig information, som ikke er pixels. Til almindelig weblevering går de fleste teams primært op i visuelle pixels, gennemsigtighed, dimensioner og farvekonsistens.

Hvis du publicerer brugerleverede billeder, er metadata også et privatlivsspørgsmål. Vi har dækket det bredere emne i sådan fjerner du EXIF-metadata, før du deler billeder online, men det samme princip gælder her: billedoptimering bør være eksplicit om, hvad den bevarer, og hvad den fjerner.

Hvorfor PNG komprimerer godt, og hvor det stopper

PNG er et meget godt format. Det blev en webstandard af gode grunde:

• Det er tabsfrit.
• Det understøtter alfa-gennemsigtighed.
• Det er bredt understøttet.
• Det er forudsigeligt og enkelt at arbejde med.
• Det er fremragende til flad grafik, skærmbilleder, logoer og UI-assets.

PNG-komprimering fungerer ved at filtrere billedrækker og derefter anvende DEFLATE-komprimering. Den kombination er effektiv, især når nærliggende pixels ligner hinanden.

Problemet er ikke, at PNG er dårligt. Problemet er, at PNG er gammelt. Dets komprimeringsmodel har færre tricks til rådighed end nyere formater. Når du har optimeret en PNG med en god encoder, kan der stadig ligge bytes tilbage på bordet, fordi selve formatet ikke kan repræsentere visse mønstre lige så effektivt, som tabsfri WebP kan.

Det er her, tabsfri WebP kommer ind.

Hvad tabsfri WebP gør anderledes

Tabsfri WebP bruger et komprimeringssystem, der er designet specifikt til billeder, i stedet for et generelt komprimeringslag sat oven på filtrerede rækker. Under motorhjelmen kan det bruge teknikker som prædiktiv kodning, farvetransformationer, paletter, bagudreferencer og entropikodning til at repræsentere gentagne eller forudsigelige pixelmønstre kompakt.

Du behøver ikke at huske implementeringsdetaljerne. Den nyttige mentale model er denne:

PNG komprimerer rækker godt. Tabsfri WebP har flere måder at beskrive billedstruktur på.

Den ekstra fleksibilitet er grunden til, at tabsfri WebP ofte kan producere mindre filer fra det samme kildebillede.

Google har historisk beskrevet tabsfri WebP-billeder som cirka 26% mindre end PNG i gennemsnit i sine egne undersøgelser. Betragt det som et retningsgivende pejlemærke, ikke et løfte. Dine billeder er ikke et gennemsnit. Dit designsystem, dine skærmbilleder, produktfotos, illustrationer, eksporterede assets og CMS-uploads vil opføre sig på deres egen måde.

Hvor tabsfri WebP normalt sparer mest

Gennemsigtige billeder

PNG bruges ofte på grund af alfa-gennemsigtighed. Tabsfri WebP understøtter også alfa og komprimerer det ofte effektivt.

Det er nyttigt til:

• Produktfritlægninger
• Klistermærker og badges
• Interface-overlays
• Diagrammer med gennemsigtige baggrunde
• Logoer eksporteret større end nødvendigt

Besparelserne kan være mærkbare, når alfakanalen indeholder store forudsigelige områder, bløde kanter eller gentagne former. Hvis du har et katalog fuldt af gennemsigtige produktbilleder, er tabsfri WebP værd at teste tidligt.

Skærmbilleder og UI-optagelser

Skærmbilleder indeholder ofte store flade områder, gentagne interface-komponenter, tekst, ikoner, skygger og nogle fotografiske områder. Den blanding kan være besværlig for PNG, især i store dimensioner.

Tabsfri WebP håndterer ofte disse billeder godt. Et UI-skærmbillede af en hel side, der er 900 KB som en optimeret PNG, kan blive 500–700 KB som tabsfri WebP. Nogle gange er besparelsen større. Nogle gange er den mindre. Men kategorien er lovende.

Hvis de skærmbilleder vises i dokumentation, marketingsider, onboarding-flows eller cases, kan den samlede effekt være reel.

Blandet illustrations- og billedindhold

Mange moderne webgrafikker er hverken rene illustrationer eller rene fotos. Tænk på et hero-billede, der indeholder produkt-UI, gradienter, små ikoner, tekstlabels og indlejrede fotos.

PNG kan bevare det perfekt, men give en stor fil. WebP eller AVIF med tab kan skabe artefakter omkring tekst og kanter, hvis det presses for hårdt. Tabsfri WebP kan være en fornuftig mellemvej, når præcise kanter betyder noget.

For et bredere beslutningstræ på tværs af billedformater, inklusive AVIF og WebP med tab, se Billedformater i 2026: hvornår AVIF slår WebP, og hvornår det ikke gør.

Hvor PNG stadig kan være bedre

Små ikoner og enkle assets

For meget små filer betyder format-overhead noget. Et PNG-ikon på 650 bytes er ikke en oplagt kandidat til konvertering. WebP kan måske spare 80 bytes, eller det kan blive større.

I den skala kan den operationelle kompleksitet opveje gevinsten. Hvis filen allerede er lille, ikke blokerer rendering og caches i lang tid, har du sandsynligvis bedre ting at rette.

Omhyggeligt optimerede palette-PNG’er

Nogle PNG’er er langt mindre, end folk forventer, fordi de bruger en begrænset palette. En god PNG med indekserede farver kan være svær at slå til enkel grafik.

Det gælder især for:

• Små logoer
• Pixel art
• Flade ikoner
• Enkle diagrammer
• Grafik med få farver

Vær forsigtig, når du sammenligner WebP med sjuskede PNG-eksporter. Hvis PNG’en kom direkte fra et designværktøj med unødvendige metadata og dårlige komprimeringsindstillinger, kan WebP se dramatisk bedre ud. Det betyder ikke, at WebP slog en veloptimeret PNG med samme margin.

En fair test sammenligner tabsfri WebP med optimeret PNG, ikke den fil, der tilfældigvis blev uploadet.

Billeder, der i stedet bør være med tab

Dette er den stille fejl: teams konverterer PNG til tabsfri WebP, når billedet slet ikke burde have været PNG til at begynde med.

Fotografier er det typiske tilfælde. Et fuldfarvefotografi gemt som PNG kan være enormt. At konvertere det til tabsfri WebP kan reducere filen, men den vil normalt stadig være meget større end en WebP eller AVIF i høj kvalitet med tab.

Hvis brugeren ikke kan opfatte forskellen, er tabsfri ofte det forkerte mål. Produktfotografi, redaktionelle billeder, baggrunde og portrætter hører normalt hjemme i et format med tab og fornuftige kvalitetsindstillinger.

Tabsfri bør reserveres til tilfælde, hvor præcise pixels betyder noget: UI-skærmbilleder, diagrammer, teksttung grafik, gennemsigtighed, genererede diagrammer og assets, der synligt forringes under komprimering med tab.

Hvad det sparer ud over bytes

Den oplagte besparelse er overførselsstørrelse. Mindre billedfiler betyder normalt mindre båndbredde, hurtigere downloads og bedre adfærd på langsomme forbindelser.

Men der er sekundære fordele:

• Mindre dataforbrug for besøgende på forbrugsafregnede abonnementer
• Hurtigere udfyldning af billedcache
• Reduceret CDN-båndbredde
• Lavere lager- og backupvolumen i stor skala
• Mindre pres på performance-budgetter

Disse besparelser er ikke jævnt fordelt. En enkelt PNG på 2 MB konverteret til en WebP på 900 KB betyder mere end halvtreds ikoner reduceret med 100 bytes hver.

Derfor bør billedoptimering prioriteres efter sidepåvirkning, ikke efter formatideologi. Hvis Lighthouse markerer billedlevering, så læs det som et spor, ikke en dom. Vores guide om sådan læser du en Lighthouse-rapport uden at gå i panik forklarer, hvordan du adskiller meningsfulde performance-problemer fra støjende diagnostik.

Afvejningen med afkodningsomkostning

Mindre filer er ikke den eneste performance-variabel. Browsere skal også afkode billeder, før de kan male dem.

PNG-afkodning er moden og normalt hurtig. WebP-afkodning er også bredt understøttet og effektiv, men den kan i nogle tilfælde koste mere CPU. På moderne enheder er det sjældent en blokering, men på billige telefoner, billedtunge sider eller store assets øverst i visningen er det værd at måle.

Den praktiske regel: Hvis tabsfri WebP reducerer en stor PNG med 30–50%, dominerer netværksbesparelsen normalt. Hvis den reducerer en lille PNG med 3%, er afvejningen sandsynligvis ikke værd at bekymre sig om.

Performance-arbejde er fuldt af den slags tærskelbeslutninger. Optimer ikke hver byte med samme intensitet.

En enkel testmetode

Brug en repræsentativ batch, ikke ét billede.

Opret en mappe med eksempler fra dit faktiske site:

• Logoer og ikoner
• Skærmbilleder
• Produktfritlægninger
• Diagrammer
• CMS-uploadede PNG’er
• Billeder til social preview
• Store hero-grafikker

Sammenlign derefter tre ting:

1. Den originale PNG, som den blev uploadet
2. En optimeret PNG
3. En tabsfri WebP-version

Til command-line workflows bruger teams ofte værktøjer som oxipng, pngcrush, zopflipng eller cwebp -lossless. Det præcise værktøj betyder mindre end disciplinen i at sammenligne lige med lige.

Hold styr på:

• Filstørrelse
• Pixel-lighed efter afkodning
• Visuel rendering i mål-browsere
• Korrekt gennemsigtighed
• Farveudtryk
• Build-tid
• Friktion i CMS- eller designworkflow

Et enkelt regneark er nok. Tilføj den oprindelige filstørrelse, optimeret PNG-størrelse, tabsfri WebP-størrelse, procent sparet og den side, hvor billedet vises.

Sortér derefter efter samlede sparede bytes. Den sorteringsrækkefølge vil normalt fortælle dig, hvad du skal gøre.

Levering: lad være med afslappet at ødelægge ældre klienter

WebP-understøttelse er nu bred på tværs af moderne browsere. For de fleste offentlige websites er det sikkert at bruge. Men hvis du har indlejrede webviews, email-klienter, ældre enterprise-browsere, native apps eller usædvanlige crawlers i mixet, så test, før du erstatter PNG direkte.

Det konservative mønster er at beholde PNG som fallback og levere WebP, hvor det understøttes:

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

Denne tilgang er kedelig, og kedeligt er godt. Brugere med WebP-understøttelse får den mindre fil. Alle andre får PNG’en.

Hvis dit build-system fingerprinter assets, og dit CDN cacher dem korrekt, er det ikke svært at vedligeholde. Hvis dit CMS gør alternative formater besværlige, så start med de største og mest gentagne billeder i stedet for at forsøge at konvertere hele mediebiblioteket i én sprint.

Privatliv og lokal behandling

Billedkonvertering sker ofte i build-pipelines eller server-side medietjenester. Det er fint for mange teams. Men hvis du håndterer følsomme skærmbilleder, kundeuploads eller interne dokumenter, bør du være opmærksom på, hvor filer behandles.

Browser-side billedværktøjer er blevet gode nok til mange enkle konverteringer, previews og metadatatjek. Der er grænser, men lokal behandling kan reducere unødvendig upload af private billeder. Vi har dækket afvejningerne i hvorfor behandling af billeder i browseren er en gevinst for privatlivet.

For interne assets er hovedpointen klarhed i politikken. Vid, om billeder forlader enheden, hvor transformerede versioner gemmes, og om metadata bevares.

En praktisk tommelfingerregel

Brug tabsfri WebP, når alle tre er sande:

• Kilden er i øjeblikket PNG.
• Præcise pixels eller ren gennemsigtighed betyder noget.
• Tabsfri WebP sparer en meningsfuld mængde efter sammenligning med en optimeret PNG.

Behold PNG, når:

• Filen er lille.
• PNG’en allerede er palette-optimeret og konkurrencedygtig.
• Kompatibilitetskravene er usædvanlige.
• Den operationelle kompleksitet ikke er de sparede bytes værd.

Brug WebP eller AVIF med tab, når:

• Billedet er fotografisk.
• Præcise pixels ikke betyder noget.
• En kvalitetsindstilling kan reducere størrelsen dramatisk uden synlig skade.

Den bedste billedstrategi er sjældent ét format overalt. Det er et lille sæt regler anvendt konsekvent.

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

💡 Prøv dette: Kør den samme PNG gennem Image Converter for at lave en tabsfri WebP-version, og sammenlign filstørrelserne direkte.

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

Så hvad sparer tabsfri WebP egentlig?

Det sparer bytes der, hvor PNG er løbet tør for komprimeringstricks. Nogle gange betyder det beskedne 10%. Nogle gange betyder det, at et stort gennemsigtigt billede næsten halveres. På et rigtigt site er besparelserne normalt koncentreret i et mindretal af assets.

Det er den vigtige del. Tabsfri WebP er ikke en moralsk opgradering fra PNG. Det er en praktisk mulighed til en specifik opgave: mindre tabsfri webbilleder med gennemsigtighed og bred understøttelse i moderne browsere.

Brug det, hvor tallene retfærdiggør det. Lad PNG være i fred, hvor de ikke gør.