Att välja mellan PNG, JPEG, WebP och AVIF
Fotografier går i JPEG, WebP eller AVIF. Skärmbilder, logotyper, ikoner, diagram och allt med enfärgade ytor eller skarp text går i PNG, eller i WebP:s förlustfria läge. Behöver du transparens är JPEG uteslutet helt. Väljer du format för webben i dag och kan leverera mer än ett: AVIF först, WebP som reserv, och den ursprungliga JPEG- eller PNG-filen för allt riktigt gammalt.
Det är hela beslutet. Resten förklarar varför, så att du kan se när tumregeln inte gäller.
Vad varje format faktiskt är bra på
| Format | Komprimering | Transparens | Animering | Bäst för | Sämst för |
|---|---|---|---|---|---|
| PNG | Förlustfri | Ja, full alfa | Nej | Skärmbilder, logotyper, ikoner, streckteckningar, allt med text | Fotografier, där filerna blir mycket stora |
| JPEG | Endast förlustbehäftad | Nej | Nej | Fotografier, där universellt stöd spelar roll | Skarpa kanter, enfärgade ytor, text, allt du ska redigera igen |
| WebP | Förlustbehäftad eller förlustfri | Ja, i båda lägena | Ja | En allmän ersättare för både PNG och JPEG på webben | Programvara äldre än omkring 2020 |
| AVIF | Förlustbehäftad eller förlustfri | Ja | Ja | Minsta filerna för fotografier, brett färgomfång och högt dynamiskt omfång | Snabb kodning, och äldre programvara som inte kan öppna den |
Förlustfritt betyder att den avkodade bilden är bit för bit identisk med den som gick in. Förlustbehäftat betyder att kodaren kastar bort information permanent i utbyte mot en mindre fil, och att du får tillbaka en approximation.
PNG är förlustfritt och kommer alltid att vara det. Dess komprimering fungerar genom att varje pixel förutsägs utifrån sina grannar och skillnaderna sedan deflateras, vilket är lysande när stora ytor är identiska eller upprepas, och dåligt när varje pixel skiljer sig något, som i ett fotografi. Ett foto sparat som PNG är ofta fem till tio gånger större än en bra JPEG av samma bild, utan någon synlig vinst.
JPEG är förlustbehäftat och har ingen alfakanal, så det kan inte lagra transparens över huvud taget. Det delar bilden i block, omvandlar varje block till frekvensinformation och kastar bort de fina detaljer ögat är minst känsligt för. Det fungerar utmärkt på fotografier med kontinuerliga toner och dåligt på skarpa kanter, där det ger de svaga glorior och det myggbrus du ser runt text som sparats som JPEG.
WebP och AVIF är båda moderna containerformat härledda ur videocodecar. Båda klarar förlustbehäftat och förlustfritt, båda stöder full alfatransparens, och båda stöds av varje aktuell etablerad webbläsare. AVIF komprimerar i allmänhet hårdare än WebP, särskilt vid låga kvalitetsinställningar, och hanterar breda färgomfång och högre bitdjup. Avvägningen är kodningstiden, som kan vara märkbart längre, och ett något smalare stöd utanför webbläsarna, i äldre skrivbordsprogram och bildverktyg.
Transparens
Bara PNG, WebP och AVIF kan lagra en verklig alfakanal, vilket betyder att varje pixel bär sitt eget opacitetsvärde. Det är vad som låter en logotyp sitta rent på vilken bakgrundsfärg som helst.
Om du konverterar en transparent bild till JPEG måste transparensen ta vägen någonstans. De flesta verktyg plattar ut den mot vitt, en del mot svart, och du får bara reda på vilket när bilden dyker upp på en färgad bakgrund med en vit ruta runt sig. Om du vet den slutliga bakgrundsfärgen, platta ut medvetet mot den färgen i stället för att låta konverteraren gissa.
När förlustbehäftat duger, och när det inte gör det
Förlustbehäftat duger för slutlig leverans av fotografiskt innehåll i den storlek det faktiskt kommer att visas. Vid förnuftiga kvalitetsinställningar är förlusten verkligen svår att se.
Förlustbehäftat är en dålig idé när:
- Bilden har text, tunna linjer eller stora enfärgade ytor. Komprimeringsartefakter klumpar ihop sig just på skarpa kanter.
- Filen är en arbetsmaster som du ska redigera och exportera på nytt senare.
- Bilden ska skalas upp eller färgkorrigeras kraftigt i efterhand, vilket förstärker vad kodaren än gjorde.
- Exakta pixelvärden spelar roll, som i vetenskapligt, medicinskt eller forensiskt arbete, eller i en skärmbild som någon ska läsa av siffror ur.
Varför en JPEG blir sämre varje gång den sparas om
Varje gång en JPEG avkodas och sparas igen kvantiserar kodaren data som redan har kvantiserats, och avrundningsfelet ackumuleras. Det handlar inte om att kvaliteten sänks två gånger från originalet; det handlar om att de artefakter som första passet införde nu behandlas som verklig bilddetalj och approximeras i sin tur.
Att spara med en högre kvalitetsinställning gör det inte ogjort. Detaljer som togs bort i den första sparningen är borta. Att koda om med kvalitet 95 från en fil med kvalitet 60 ger bara en större fil som troget bevarar artefakterna från kvalitet 60. Om du redigerar en bild upprepade gånger, håll mastern i ett förlustfritt format och exportera en JPEG, WebP eller AVIF på slutet.
Ungefärliga storleksförväntningar
Detta är tumregler, inte mätningar, och de verkliga siffrorna varierar enormt med bildens innehåll. För ett typiskt fotografi vid samma upplevda kvalitet kan du räkna med att JPEG är utgångspunkten, att WebP hamnar någonstans kring en fjärdedel mindre och att AVIF är mindre igen, med ett glapp som växer ju hårdare du komprimerar. För platt grafik slår förlustfri WebP oftast PNG, ibland rejält. Brus och fin textur blåser upp varje förlustbehäftat format, så ett grynigt foto komprimerar aldrig som en ren studiobild.
Skala om innan du komprimerar
Den enskilt största vinsten ligger nästan aldrig i formatet. Den ligger i måtten. En bild som levereras 4000 pixlar bred och visas i en kolumn på 800 pixlar bär omkring tjugofem gånger mer pixeldata än den behöver, och ingen kodare kan rätta till det. Skala om till ungefär den storlek den kommer att visas i (dubbelt, om du siktar på skärmar med hög pixeltäthet), välj sedan format, och finjustera sedan kvalitetsinställningen tills du precis kan se skillnaden och backa ett steg.