JPG vs PNG vs WebP: Hvilket billedformat bør du bruge

Hver gang du eksporterer et foto, et skærmbillede eller en grafik, træffer du reelt tre beslutninger på én gang: hvor meget detalje du bevarer, hvor stor filen bliver, og om den virker overalt, hvor den skal bruges. JPG, PNG og WebP besvarer de spørgsmål på hver sin måde, og at vælge det forkerte format er en af de mest almindelige — og lettest rettelige — årsager til, at et websted indlæses langsomt, en e-mail bliver afvist, eller et logo mister sine skarpe kanter. Denne guide gennemgår, hvad hvert format faktisk gør, hvornår du skal bruge det, og hvordan du konverterer mellem dem uden at uploade noget som helst.

Indledning

De fleste tænker aldrig over billedformat, før noget går galt: en side, der er alt for lang tid om at indlæse, et logo, der pludselig har en hvid kasse omkring sig, eller en vedhæftet fil, der ikke vil sende. Næsten altid er den egentlige årsag et misforhold mellem billedets indhold og det format, det er gemt i. Et foto gemt som PNG er ofte flere gange større, end det behøver at være. Et logo gemt som JPG kan pludselig få en helt baggrundsfarve, hvor der før var gennemsigtighed. Ingen af delene handler egentlig om "dårlig" software — det handler om at bruge det forkerte værktøj til indholdet.

Dette indlæg gennemgår JPG, PNG og WebP hver for sig, sammenligner dem side om side og giver dig indstillinger, du reelt kan bruge i dag, i stedet for abstrakt teknisk viden. Det dækker også de fejl, der stille og roligt gør filerne unødigt store eller forringer kvaliteten, samt de små vaner, der forhindrer begge dele.

Alt her fungerer med Resizos browserbaserede konvertere. Resizos JPG til WebP-konverter og PNG-komprimering kører helt og holdent på din egen enhed ved hjælp af Canvas API'et, så det aldrig kræver upload af originalen noget sted at skifte format eller gøre en fil mindre.

Hvad er JPG vs PNG vs WebP: Hvilket billedformat skal du bruge?

JPG (eller JPEG) bruger tabsgivende komprimering: det kasserer selektivt farve- og detaljeinformation, som det menneskelige øje er mindst tilbøjeligt til at lægge mærke til, hvilket er grunden til, at en JPG ved 80-95 % kvalitet kan se næsten identisk ud med originalen, mens den fylder en brøkdel af pladsen. Den afvejning gør JPG fremragende til fotografier, hvor bløde overgange og naturlig støj skjuler komprimeringsfejl godt, men svag til alt med hårde kanter — tekst, stregtegninger og flade farver viser tydelig blokdannelse og ringe omkring kanterne, når komprimeringen bliver aggressiv.

PNG går den modsatte vej: tabsfri komprimering, der bevarer hver eneste pixel præcis, som den blev kodet. Intet kasseres, hvilket er grunden til, at PNG er standardvalget til logoer, skærmbilleder, UI-grafik og alt, der har brug for en gennemsigtig baggrund via sin alfakanal. Prisen er filstørrelsen — en PNG af et travlt fotografi er som regel meget større end det samme foto gemt som JPG eller WebP, fordi tabsfri komprimering ikke kan udnytte de samme genveje som tabsgivende komprimering.

WebP, udviklet af Google, understøtter begge tilgange i ét format: tabsgivende komprimering, der typisk slår JPG ved sammenligneligt kvalitetsniveau, og tabsfri komprimering, der konkurrerer med PNG, mens den som regel giver en mindre fil. Det understøtter også gennemsigtighed og animation, hvilket tidligere krævede at skifte mellem PNG og GIF. Browserunderstøttelsen er i dag reelt universel på tværs af Chrome, Firefox, Safari og Edge, hvilket er grunden til, at WebP er blevet standardanbefalingen til webbilleder frem for et nichealternativ.

Hvorfor det betyder noget

Beslutninger om filformat lægger sig oveni hinanden. Ét enkelt for stort billede på en travl webside gør, at alle besøgende venter længere på den første visning, og en side fuld af PNG'er, hvor WebP ville have virket, kan tilføje reel, målbar forsinkelse, før noget som helst meningsfuldt overhovedet vises. I den anden ende kan en bunke e-mailvedhæftninger gemt som ukomprimerede billeder stille og roligt skubbe en besked over en udbyders størrelsesgrænse, så den enten bliver afvist eller strippet uden varsel.

At gå den forkerte vej er lige så dyrt. At konvertere et teksttungt skærmbillede eller et logo med flade farver til JPG giver næsten altid synlige fejl omkring kanterne — slørede glorier omkring bogstaver, bånddannelse på flade baggrunde — fordi JPG's komprimeringsmodel aldrig var designet til den slags indhold. At vælge PNG til alle fotos "for en sikkerheds skyld" undgår det problem, men bytter det ud med unødigt store filer, der gør alt langsommere uden nogen synlig gevinst.

Søgemaskiner og browsere belønner i stigende grad, at man gør dette rigtigt. Googles egen vejledning om billedpublicering kæder hurtigt indlæsende, veloptimerede billeder sammen med både brugeroplevelse og synlighed, og Core Web Vitals-målingerne påvirkes direkte af, hvor meget billeddata en side skal overføre, før den bliver brugbar. At vælge det rigtige format er en af de billigste performance- og SEO-gevinster, der findes, fordi det ikke koster andet end nogle få sekunders eftertanke pr. billede.

Vigtige fordele

• Mindre filer uden synligt kvalitetstab, når formatet rent faktisk passer til indholdet.
• Hurtigere sideindlæsning og bedre Core Web Vitals-scorer, fordi billeder som regel er den tungeste del af enhver side.
• Korrekt gennemsigtighed, hvor du har brug for det, i stedet for en utilsigtet hvid eller sort baggrund bag et logo.
• Færre formatrelaterede overraskelser — ikke flere slørede PNG-ikoner eller takkede JPG-skærmbilleder efter eksport.
• Én konverter, der virker i alle retninger, så du aldrig er låst fast til det format, et kamera eller et skærmbilledeværktøj tilfældigvis gemte i.

Den underliggende fordel er kontrol. Når du først forstår, hvad hvert format er godt til, holder formatvalget op med at være et gæt og bliver en to-sekunders beslutning, du træffer rigtigt hver gang — før filen nogensinde når frem til en hjemmeside, en indbakke eller en kunde.

Trin-for-trin guide

1. Identificer, hvad billedet faktisk er. Et fotografi, en grafik med tekst eller logoer, eller noget, der har brug for en gennemsigtig baggrund.
2. Tjek, hvor billedet skal hen. En hjemmeside, en e-mail, et opslag på sociale medier eller tryk, og notér eventuelle grænser for filstørrelse eller dimensioner, som destinationen stiller.
3. Åbn Resizos JPG til WebP-konverter, og tilføj filen. Den kører helt i din browser, så originalen aldrig forlader din enhed.
4. Vælg målformatet. WebP til det meste webbrug, PNG når du har brug for gennemsigtighed eller skarp tekst og linjer, eller JPG for den bredeste kompatibilitet.
5. Justér kvaliteten, og sammenlign forhåndsvisningen. Tjek den løbende forhåndsvisning op mod originalen, før du eksporterer, især omkring ansigter, tekst og fine kanter.
6. Download den konverterede fil, og tjek den. Kig på både den nye filstørrelse og den visuelle kvalitet ved 100 procent zoom.
7. Behold originalen, indtil den konverterede fil er verificeret. Bekræft, at den virker alle de steder, den skal, før du sletter noget.

Anbefalede indstillinger

Det er udgangspunkter, ikke regler. Et portræt, et gennemsigtigt produktudsnit og et teksttungt skærmbillede opfører sig hver for sig forskelligt under komprimering, så test et par repræsentative filer, før du bruger den samme indstilling på en hel mappe.

Bedste praksis

• Tag udgangspunkt i den bedste kvalitetsoriginal, du har — at ændre størrelse på eller konvertere en dårlig kopi gør blot eksisterende fejl mere synlige.
• Vælg format ud fra indholdet, ikke ud fra vane. Et foto hører ikke automatisk hjemme i PNG, bare fordi "tabsfrit lyder bedre".
• Eksportér én gang. Gentagen åbning og gemning af den samme JPG eller tabsgivende WebP forstærker komprimeringsskaderne for hver omgang.
• Hold et lille testsæt klar — et portræt, et produktbillede, et skærmbillede og en gennemsigtig grafik — så du kan sandhedstjekke dine indstillinger, før du kører en stor batch.

Én vane betaler sig mere end nogen indstilling: konverter direkte fra den bedste kilde, du har, i ét hug, til præcis det format, destinationen faktisk har brug for.

Almindelige fejl

• At bruge PNG til alle fotos af ren vane, hvilket giver unødigt store filer uden synlig kvalitetsgevinst i forhold til JPG eller WebP.
• At gemme den samme JPG igen og igen gennem flere redigeringsrunder, hvilket lægger flere lag komprimeringsfejl oveni hinanden for hver ny kodning.
• At antage, at WebP ikke er bredt understøttet — det har været understøttet i alle nuværende store browsere i flere år.
• At flade en gennemsigtig PNG ud til en JPG og få en uventet hvid eller sort baggrund, hvor der før var gennemsigtighed.
• At ignorere EXIF-orienteringsdata under konvertering, hvilket kan efterlade et konverteret foto drejet forkert.

De fleste af disse fejl har samme grundårsag: at behandle formatvalget som en eftertanke i stedet for den første beslutning. Når formatet vælges bevidst, forsvinder det meste af denne liste af sig selv.

Avancerede tips

• Server WebP med en JPG- eller PNG-reserveløsning via HTML-elementet <picture> for den lille resterende andel af ældre klienter, der har brug for det.
• Til rent vektorbaseret indhold — enkle ikoner, ordmærker, linjebaserede logoer — bør du overveje SVG i stedet for et rasterformat; det skalerer perfekt og er ofte mindre end en tilsvarende PNG.
• Når du konverterer en hel mappe med gamle fotos, bør du batch-konvertere til WebP i ét hug i stedet for at åbne og gemme hver fil for sig.

Disse råd betyder mest i stor skala. Ét forkert formatvalg er knap nok mærkbart, men den samme fejl gentaget på tværs af hundredvis af produktfotos eller blogbilleder løber op i reel indlæsningstid og lagerplads.

Virkelige eksempler og brugsscenarier

Praktisk arbejdsgang med JPG til WebP-konverteren

Åbn JPG til WebP-konverteren, tilføj ét repræsentativt billede, og konverter det med en fornuftig kvalitetsindstilling, før du rører resten af en batch. Hvis resultatet holder både ved normal visningsstørrelse og ved 100 procent zoom, kan du bruge den samme indstilling på de øvrige filer. Har du i stedet brug for en gennemsigtig baggrund — et logo, et ikon, en UI-grafik — så brug i stedet PNG-komprimeringen, som gør PNG-filer mindre helt tabsfrit uden at røre alfakanalen.

Fordi begge værktøjer kører lokalt i browseren, er der intet uploadtrin, ingen konto og ingen kø — filen bliver konverteret i det øjeblik, du slipper den, og originalen bliver liggende præcis, hvor den var.

Eksterne autoritative kilder værd at tjekke

Ofte stillede spørgsmål

Konklusion

JPG, PNG og WebP er ikke konkurrerende standarder, hvor ét format vinder klart — de er tre værktøjer bygget til forskellige opgaver. JPG håndterer fotografier effektivt, PNG beskytter skarpe kanter og gennemsigtighed, og WebP klarer i dag det meste af begge opgaver bedre end de to ældre formater hver for sig, hvilket er derfor, det er blevet det fornuftige standardvalg til nettet. At vælge rigtigt handler mindre om at udenadslære specifikationer og mere om at stille ét spørgsmål før hver eksport: hvad skal dette billede faktisk beholde?

Når den vane er på plads, er det at konvertere mellem formater den nemme del. Resizos konvertere klarer det mekaniske arbejde i browseren, helt gratis og uden at uploade noget — så den eneste beslutning tilbage er den, der faktisk betyder noget.