Vilket är det bästa bildformatet för en webbplats?

”Bästa formatet” är fel fråga innan du vet vilken sorts bild det är. En webbplats innehåller några mycket olika typer av bilder, och varje typ har en tydlig vinnare:

• Fotografier (produkter, människor, platser): ett destruktivt komprimerat format. AVIF ger minst filer, WebP är det säkra moderna standardvalet och JPG är reserven som alla webbläsare kan visa.
• Logotyper, ikoner och illustrationer: SVG. Det är vektorgrafik, så den förblir skarp i alla storlekar på alla skärmar, och filen är vanligtvis mycket liten. Använd endast ett pixelformat som reserv när en plattform inte accepterar SVG.
• Skärmbilder, UI-grafik och allt med transparens: PNG eller förlustfri WebP. Enhetliga färger och skarpa kanter är precis vad förlustfria format packar effektivt.
• Korta animationer: animerad WebP eller AVIF i stället för GIF, som är begränsat till en liten palett och ger betydligt större filer.
• Webbplatsikonen: en ICO-fil, helst tillsammans med en version i SVG eller PNG – läs hur du skapar en webbplatsikon från en bild.

Det klassiska misstaget är ett fotografi som sparats som PNG. PNG lagrar varje pixel utan kvalitetsförlust, vilket är perfekt för en logotyp och katastrofalt för ett foto: filen sväller till flera gånger storleken på en JPG utan någon synlig förbättring.

För foton handlar valet om hur mycket du kan förlita dig på nyare webbläsare:

• AVIF komprimerar bäst: vid normal webbkvalitet blir filen omkring 50% mindre än JPEG och 20–30% mindre än WebP, med HDR och färger med stort färgomfång om du behöver det. Chrome, Firefox och Safari kan alla visa formatet (Safari sedan version 16.4, under 2023). Nackdelarna är långsam kodning, särskilt för stora bilder, och begränsat stöd i skrivbordsprogram och äldre enheter.
• WebP är det pragmatiska standardvalet: 25–35% mindre än JPEG vid samma visuella kvalitet, med transparens, och formatet har stöds av alla vanliga webbläsare sedan 2020. Vissa skrivbordsprogram och äldre verktyg kan fortfarande inte öppna det, vilket har betydelse för filen du lämnar till en designer, inte för den du levererar till besökare.
• JPG är den universella reserven. Det är det minst effektiva av de tre, men en JPG som sparas med en kvalitet omkring 75–82 går vanligtvis inte att skilja från originalet på skärmen, och allt på webben kan visa den.

Den bästa lösningen levererar AVIF till webbläsare som förstår formatet, WebP till resten och behåller en JPG för allt äldre. Om du hellre vill välja ett enda format täcker WebP med JPG som reserv praktiskt taget alla. Direkta jämförelser finns i WebP jämfört med AVIF och WebP jämfört med JPG; för grafik i stället för foton, se PNG jämfört med JPG.

När du känner till målformatet går konverteringen snabbt och lämnar aldrig din enhet. EditItAll-bildkonverteraren körs helt i webbläsaren:

1. Öppna konverteraren och släpp in dina bilder – en fil eller en hel mapp. Alla filer i uppsättningen bearbetas tillsammans.
2. Välj utdataformat: WebP eller AVIF för fotografier, PNG för grafik som behöver transparens. Det finns direkta vägar för de vanligaste uppgifterna: JPG till WebP, PNG till WebP, JPG till AVIF och PNG till AVIF.
3. Ställ in kvaliteten. Det finns inget fält för önskad filstorlek: storleken är ett resultat. Varje fil visar sin storlek före och efter, så justera reglaget tills både siffran och bilden ser bra ut.
4. Hämta resultaten var för sig eller som en enda ZIP.

Inget laddas upp – du kan koppla från internet när sidan har lästs in och fortsätta konvertera – och EXIF- och GPS-metadata tas bort från varje exporterad bild, så ett produktfoto avslöjar inte var det togs. Det är kostnadsfritt, utan konto och utan vattenstämpel. Har du redan rätt format och behöver bara en mindre fil? Gå direkt till bildkomprimeraren. Om en plattform kräver en pixelversion av en vektorlogotyp återger SVG till PNG den i valfri storlek.

Det är värt att välja rätt format, men tre vanor sparar fler byte än ett byte från JPG till AVIF någonsin kan göra:

• Ändra storleken till de mått du faktiskt visar. Ett kamerafoto är många gånger bredare än utrymmet det fyller på en sida, och varenda extra pixel hämtas och kastas bort. Bildverktygen i EditItAll har ett valfritt tak för största dimensionen just för detta.
• Komprimera en gång, från originalet. Varje destruktiv sparning kastar bort lite mer detalj. Behåll originalet, exportera webbkopian från det och spara inte om en JPG till en WebP och sedan till en AVIF i en kedja.
• Leverera moderna format med en reserv. Erbjud AVIF eller WebP först och låt äldre webbläsare falla tillbaka på JPG eller PNG, så att ingen besökare någonsin ser en trasig bild.

Om en hastighetsrapport uppmanar dig att ”koda bilder effektivt” eller ”leverera bilder i nästa generations format” är det precis detta beslut som avses: så åtgärdar du varningen om att koda bilder effektivt går igenom processen, och komprimering av JPEG för webben beskriver kvalitetsreglaget i detalj. Fler formatguider finns i samlingen konvertera bilder.