Bästa bildformatet för webbplatser: JPG, PNG, WebP eller AVIF?

JPG, PNG, WebP och AVIF i korthet

Se MDN:s formatreferens för egenskaper och kompatibilitet. Stöd för ett format betyder inte att varje uppladdningstjänst eller redigerare accepterar det.

Vad komprimering med och utan förlust bevarar

Förlustkodning ändrar en del av pixelinformationen för att minska filstorleken. Ett foto kan tåla en liten förändring i texturen, medan samma förändring runt en bokstav kan göra den svårare att läsa. Förlustfri komprimering bevarar de pixeldata den får. Att konvertera en redan komprimerad JPG till PNG återskapar inte detaljer som gått förlorade i JPG-filen; filen kan bara bli större.

WebP stöder båda metoderna, vilket Googles WebP-dokumentation förklarar. Formatnamnet avslöjar inte vilken metod en export använder, och kvalitet 100 garanterar inte ett förlustfritt resultat. Behåll din bästa källfil och skapa varje publiceringsversion från den, så att förlustkodade konverteringar inte följer på varandra. Läs guiden om komprimering med och utan förlust för skillnaden.

Foton: jämför WebP och AVIF med nuvarande JPG

Bergfotot nedan jämför verkliga Pixilo-exporter. Den tillhandahållna JPG-filen är 413,1 kB; Pixilo skapade en WebP på 299,0 kB med kvalitet 80 och en AVIF på 275,7 kB med förinställningen kvalitet 65. Alla tre är 1920 × 1440 pixlar. WebP sparar cirka 28 % och AVIF cirka 33 % jämfört med denna JPG. AVIF-filen är i detta exempel cirka 8 % mindre än WebP-filen.

Det här är mätningar av hela filer från en enda redan komprimerad JPG. Kvalitetsinställningarna är formatspecifika och exporterna har inte justerats till samma synliga kvalitet. Använd dem som exempel att granska, inte som en allmän rangordning. Leta i reglagejämförelsen efter mjukare bergstruktur, ljusa kanter mot himlen och färgband i den jämna himlen. Bedöm hela bilden i den avsedda visningsstorleken och granska sedan tveksamma partier i detaljvyn.

Upprepa testet med en bild som är typisk för din webbplats: tyg för en butik eller ett ansikte för en teamsida. Skapa båda alternativen från samma källa med samma mått: använd JPG till WebP och JPG till AVIF för en JPG-källa. För andra källor används PNG till AVIF eller WebP till AVIF. Välj den minsta version som behåller tillräckliga detaljer; att behålla originalet är också rimligt om det redan fyller behovet. Beakta även konverteringstiden för stora bildserier.

Ursprunglig JPGPixilos WebP

Grafik: skydda kanter, text och transparens

Text och diagram avslöjar snabbt komprimeringsfel: en färgad kant runt en bokstav eller en bruten enpixelslinje kan spela större roll än en liten förändring i ett landskap. Grafiken nedan jämför en PNG på 109,2 kB med Pixilos JPG-, WebP- och AVIF-exporter i samma 960 × 640 pixlar. AVIF-filen är bara 6,4 kB, men besparingen är användbar endast om den minsta texten och linjerna förblir tillräckligt tydliga.

Byt format och granska samma bokstäver och färgade kanter i detaljvyn. Återgå sedan till hela bilden för att bedöma normal lässtorlek. Det här är exempel på förlustkodade konverteringar, inte tester av förlustfri WebP eller AVIF. Om en skärmbild dokumenterar ett pris, ett felmeddelande eller en programinställning bör läsbar och korrekt text prioriteras framför den minsta filen. Behåll PNG om alternativen inte klarar det testet.

Transparens är ett annat krav än skärpa: PNG, WebP och AVIF stöder det; JPG gör det inte. Prova PNG till WebP för en transparent produktbild och granska kontur och skugga mot både ljusa och mörka bakgrunder. Välj medvetet en enfärgad bakgrund före JPG-export. Den ogenomskinliga grafiken nedan testar inte transparenta kanter.

Finns logotypen redan som SVG, behåll vektorkällan. Rasterisering bara för att använda en kompressor kan ta bort fördelen med ren skalning. Pixilos rasterverktyg hanterar bildtyperna som anges i respektive verktyg. Läs guiden om SVG och PNG för att avgöra när du bör behålla vektorformatet och när en PNG-kopia passar bättre.

Ursprunglig PNGPixilos JPG

Välj mått innan du försöker minimera filstorleken

Utgå från bildens verkliga utrymme. Ett foto som visas 600 CSS-pixlar brett kan få en 1200-pixelsversion för en skärm med hög pixeltäthet. Det är ett testexempel, ingen generell regel. Att förstora ett litet original återskapar inte saknade detaljer.

Om både bredd och höjd fördubblas blir antalet pixlar fyra gånger så stort. Filstorleken behöver inte fyrdubblas, men kodaren måste representera mer bilddata. Välj först beskärning och nödvändiga mått, och jämför sedan format vid samma mått. Då skiljer du nyttan av storleksändringen från effekten av ett formatbyte.

En webbplats kan leverera olika storlekar till olika layouter med responsiva bildinställningar som srcset och sizes. Förbered varianter med Ändra bildstorlek och läs guiden om responsiva bilder för att förstå leveransen. Undvik ett fast filstorleksmål för alla bilder: ett litet kort och en detaljerad produktzoom fyller olika syften.

Kontrollera även leveransen

Reservera bildens utrymme så att innehållet inte hoppar när den laddas. Fördröjd laddning kan passa bilder längre ned men försena den synliga huvudbilden. Googles LCP-råd rekommenderar att viktiga bilder hittas tidigt och att LCP-bilden inte använder lazy loading.

Konfigurera ett reservformat i sidans kod eller CMS när det behövs. Med ett picture-element använder webbläsaren den första källa som matchar dess formatstöd och övriga villkor; den jämför inte alla filer och väljer den minsta. Lägg ditt föredragna testade format först och behåll en lämplig JPG eller PNG som reserv. Webbplatsen web.dev:s picture-guide förklarar valet.

Kontrollera bilden som den publicerade sidan faktiskt levererar. Ett CMS eller bild-CDN kan skala eller koda om din uppladdning, så att besökare får en annan fil än den du laddade ner från Pixilo. Pixilo förbereder filer; din webbplats styr leveransen. En mindre export löser inte ensam en sen bildbegäran eller ett långsamt serversvar.

Kontroll före publicering

• Målet accepterar formatet och filändelsen är rätt.
• Måtten passar layouten.
• Text, ansikten och transparenta kanter ser bra ut.
• Filen är mindre eller formatbytet löser ett verkligt kompatibilitetsbehov.
• Sidan fungerar smalt och den viktiga bilden laddas i tid.
• Originalet finns kvar för framtida redigering.