Att välja bildformat brukade vara enkelt: JPEG för foton, PNG för grafik, klart. I dag är bilden mer nyanserad – och mer givande. Moderna format som WebP och AVIF kan minska bildens storlek med hälften eller mer utan synlig kvalitetsförlust, vilket direkt förbättrar sidans hastighet, sökprestanda och upplevelsen för alla med en långsam uppkoppling.
Den här guiden förklarar hur varje stort webbildformat faktiskt fungerar, var det passar bäst och hur du väljer med självförtroende. Den är skriven för alla som publicerar bilder på webben – utvecklare, designers, marknadsförare och butiksägare – och fokuserar på praktiska beslut snarare än teori.
Börja med två frågor
Nästan varje beslut om format kokar ner till två egenskaper hos din bild.
**Är det ett fotografi eller en grafik?** Fotografier (kontinuerliga toner, övergångar, mjuka kanter) komprimeras bra med *lossy*-format som kastar bort detaljer som ögat knappt märker. Grafik med skarpa kanter, jämna färgytor och text – logotyper, ikoner, skärmdumpar, diagram – behöver *lossless*-komprimering eller ett vektorformat för att hållas knivskarp.
**Behöver du transparens eller animation?** En logotyp som placeras över olika bakgrunder behöver en alfakanal. Ett kort loopande klipp behöver stöd för animation. Dessa krav avgör om ett format kommer i fråga eller inte, redan innan filstorleken ens kommer på tal.
Håll de två svaren i minnet medan vi går igenom formaten.
Webbens bildformat i korthet
| Format | Komprimering | Transparens | Animation | Webbläsarstöd | Bäst för |
|---|---|---|---|---|---|
| JPEG (JPG) | Lossy | Nej | Nej | Universellt | Fotografier där kompatibilitet är viktigt |
| PNG | Lossless | Ja (alpha) | Nej | Universellt | Logotyper, ikoner, skärmdumpar, jämn grafik |
| WebP | Lossy + lossless | Ja (alpha) | Ja | Alla moderna webbläsare | Ett modernt standardval för foton och grafik |
| AVIF | Lossy + lossless | Ja (alpha) | Ja | De flesta moderna webbläsare | Maximal effektivitet för foton och hero-bilder |
| SVG | Vektor (lossless) | Ja | Ja | Universellt | Logotyper, ikoner, illustrationer som måste skalas |
| GIF | Lossless, 256 färger | 1-bit | Ja | Universellt | Enkla äldre animationer |
JPEG (JPG): Det universella fotoformatet
JPEG har varit standardformatet för fotografier i tre decennier, och dess största styrka är universell kompatibilitet. Varje webbläsare, operativsystem, kamera och redigeringsverktyg läser det utan problem.
JPEG använder lossy-komprimering: det kastar bort högfrekventa detaljer som mänskligt seende är minst känsligt för och lagrar resten kompakt. Vid höga kvalitetsinställningar är förlusten osynlig; driver du komprimeringen för långt får du blockiga artefakter och ringar runt kanterna.
Dess begränsningar är lika viktiga som dess räckvidd. JPEG saknar transparens, så varje transparent område blir en heltäckande bakgrund, och formatet kämpar med skarpa kanter och text. Använd JPEG när ett fotografi måste kunna öppnas överallt utan kompatibilitetsrisk. Har du grafik eller behöver transparens kan du i stället konvertera JPG till PNG.
PNG: När du behöver transparens eller pixelperfekt detalj
PNG är lossless: det återger varje pixel exakt som den sparades, utan några komprimeringsartefakter. Det gör det till rätt verktyg för logotyper, ikoner, skärmdumpar, diagram och all grafik med skarpa kanter eller stora ytor av jämn färg. Det stöder också full alfatransparens, så bilder ligger snyggt över vilken bakgrund som helst.
Kompromissen är filstorleken. För fotografier kan en PNG vara flera gånger större än en motsvarande JPEG av hög kvalitet. Tumregeln är enkel: PNG för grafik och transparens, inte för foton. När en PNG-bild gör att en sida laddar långsamt kan du konvertera PNG till JPG eller, ännu bättre för webben, konvertera PNG till WebP. För en djupare genomgång, se JPG vs PNG.
WebP: Det praktiska moderna standardvalet
WebP, utvecklat av Google, är formatet de flesta webbplatser bör gripa efter först i dag. Det stöder både lossy- och lossless-komprimering, full alfatransparens och animation – och täcker nästan alla användningsfall i ett enda format. Google rapporterar att lossy WebP-bilder vanligtvis är 25 till 34 procent mindre än jämförbara JPEG-filer, och lossless WebP är oftast omkring 26 procent mindre än PNG.
Stödet är inte längre något hinder: WebP fungerar i alla aktuella stora webbläsare, inklusive Safari sedan version 14. För den absoluta majoriteten av besökare kan du leverera WebP direkt, vilket är skälet till att det är ett klokt standardval för både foton och grafik. För att ta det i bruk kan du konvertera JPG till WebP eller konvertera PNG till WebP. För en fylligare förklaring, läs Vad är WebP.
AVIF: Det mest effektiva, med några kompromisser
AVIF är det nyaste etablerade formatet, byggt på videocodecen AV1 från Alliance for Open Media. Det är effektivitetsmästaren: vid jämförbar visuell kvalitet är AVIF-filer ofta omkring hälften så stora som JPEG och påtagligt mindre än WebP. Det hanterar också högt dynamiskt omfång (HDR), breda färgomfång, transparens och animation.
Det finns två praktiska kompromisser. Kodningen är långsammare och mer krävande än JPEG eller WebP, vilket spelar roll för stora partier. Och även om stödet nu är brett – Chrome, Firefox, Edge samt Safari 16.4 och senare – ligger det fortfarande något efter WebP, så en reservlösning är klok. AVIF lyser för stora hero-bilder och fotorika sidor där varje kilobyte räknas. Prova det genom att konvertera JPG till AVIF eller PNG till AVIF, och se Vad är AVIF för detaljer.
SVG: För allt som måste skalas
SVG är fundamentalt annorlunda: det är ett vektorformat som beskriver former med matematik i stället för ett rutnät av pixlar. En SVG förblir helt skarp i vilken storlek som helst, från en favicon till en jätteaffisch, samtidigt som den hålls pytteliten för enkel grafik. Det är det rätta valet för logotyper, ikoner och illustrationer som är uppbyggda av jämna former och linjer.
SVG lämpar sig inte för fotografier, som saknar ren geometri att beskriva. Men för gränssnittsikoner och varumärkesgrafik finns det inget som matchar dess skalbarhet och skärpa. Läs mer i Vad är en SVG-fil.
En enkel beslutsmodell
När du är osäker, arbeta dig igenom dessa i tur och ordning:
- **Är det en logotyp, ikon eller jämn illustration?** Använd SVG.
- **Är det en grafik eller skärmdump, eller behöver den transparens eller pixelperfekta kanter?** Använd PNG, eller lossless WebP för mindre filer.
- **Är det ett fotografi för en modern publik?** Använd AVIF för minsta storlek, WebP för bästa balansen mellan storlek och räckvidd.
- **Måste den kunna öppnas bokstavligen var som helst, även i gammal programvara?** Använd JPEG.
- **Är den animerad?** Använd WebP eller, ännu bättre, ett riktigt videoformat som MP4 – inte GIF.
Leverera moderna format på ett tryggt sätt
Du behöver inte välja ett enda format för alla. HTML-elementet picture låter webbläsaren välja det bästa format den stöder: ange AVIF först, sedan WebP och därefter en JPEG- eller PNG-reservlösning, så laddar varje besökare bara ner en enda fil. Moderna webbläsare får den effektiva versionen och äldre får en garanterad reservlösning, helt utan JavaScript.
Detta spelar roll bortom det estetiska. Bilder är vanligtvis den största delen av en sida, så valet av format har en direkt effekt på Largest Contentful Paint, ett av Googles Core Web Vitals, och därmed på både användarupplevelse och sökprestanda. Mindre, väl valda bilder är en av de mest hävstångsstarka hastighetsförbättringar som finns att tillgå.
Så konverterar du dina befintliga bilder
Du behöver sällan exportera om från grunden. För att modernisera ett befintligt bibliotek konverterar du på plats: JPG till WebP, PNG till WebP, JPG till AVIF, eller PNG till JPG för maximal kompatibilitet. Behåll dina ursprungliga masterfiler av hög kvalitet och skapa moderna format från dem vid behov.