För webben är WebP ditt primära val med JPEG som fallback, för vektorgrafik som logotyper och ikoner väljer du alltid SVG eller EPS, och för tryck levererar du TIFF eller PDF/X-4 i CMYK med 300 DPI och inbäddad ICC-profil. Det är grunden. Resten av den här guiden förklarar varför, och ger dig konkreta exportinställningar per kanal.
Snabbval per kanal:
Webb: WebP (primärt), AVIF för hero-bilder, JPEG som fallback
Sociala medier: JPEG för foton, PNG för grafik med transparens
E-post: JPEG för foton, PNG för grafik. Inget modernare.
Annonser (digitalt): WebP eller JPEG beroende på plattform
Vektorgrafik och logotyper: SVG för webb, EPS/PDF för tryck
Tryck: TIFF eller PDF/X-4, CMYK, 300 DPI, inbäddad ICC-profil
Om du är osäker på stödet i mottagarens system: JPEG fungerar i de flesta fall och är alltid en trygg fallback.
Innehållsförteckning
Vilket format passar för vad? Genomgång av JPEG, PNG, WebP, AVIF, SVG, GIF, TIFF, EPS och PDF
Hur optimerar du bilder för snabb laddning utan att tappa kvalitet?
Vad skiljer raster från vektor, och varför spelar det roll?
Innan du väljer format behöver du förstå tre grundläggande kategorier. De avgör vilket format som är rätt, oavsett kanal.
| Kategori | Vad det innebär | Typiska format | Bäst för |
|---|---|---|---|
| Raster | Pixelbaserad bild med fast upplösning | JPEG, PNG, WebP, AVIF, TIFF, GIF | Fotografier, komplexa bilder |
| Vektor | Matematiska kurvor, skalas utan kvalitetsförlust | SVG, EPS, PDF, AI | Logotyper, ikoner, illustrationer |
| Förlustfri komprimering | Bevarar varje pixel exakt | PNG, TIFF, lossless WebP | Grafik med text, skärmdumpar |
| Förlustkomprimering | Minskar filstorlek mot viss kvalitetsförlust | JPEG, lossy WebP, AVIF | Fotografier för webb och socialt |
Raster kontra vektor är det viktigaste valet. En rasterbild som sträcks ut förlorar skärpa. En vektorbild ritas om matematiskt vid varje storlek och förblir perfekt skarp, oavsett om den visas som en 16 px favicon eller en tre meter bred mässbanner. Det är därför SVG är bästa praxis för logotyper och ikoner.
Förlustfri kontra förlustkomprimering handlar om avvägningen mellan filstorlek och kvalitet. JPEG kastar bort bilddata som ögat knappt märker, vilket ger små filer men gör formatet olämpligt för grafik med skarpa kanter och text. PNG bevarar varje pixel men ger stora filer för fotografier.
Färgrymder spelar störst roll när du rör dig mellan skärm och tryck. Skärmar arbetar i RGB, tryck i CMYK. sRGB är standard för webb och sociala medier. Adobe RGB och ProPhoto RGB är bredare arbetsfärgrymder som bevarar mer färginformation under redigering. ICC-profiler är de filer som talar om för tryckeriet exakt hur färgerna ska tolkas. Utan en inbäddad ICC-profil kan tryckeriet gissa fel.
Upplösning och DPI är ett område där många marknadsförare tänker fel. För webben handlar det om pixeldimensioner, inte DPI-värdet. En bild som är 2 000 px bred ser skarp ut på skärm oavsett om DPI-värdet är 72 eller 300. För tryck krävs däremot 300 DPI i målstorlek för att färger och detaljer ska återges korrekt.
Vilket format passar för vad? Genomgång av JPEG, PNG, WebP, AVIF, SVG, GIF, TIFF, EPS och PDF
1. JPEG/JPG
JPEG är det universella formatet för fotografier. Förlustkomprimering gör filerna små, och stödet är fullständigt i alla webbläsare, e-postklienter och plattformar. Nackdelen är att kvaliteten försämras för varje gång du sparar om filen, och formatet saknar stöd för transparens.
Exportinställning att börja med: kvalitet 80–85 i sRGB, utan inbäddad EXIF-data om filen ska till webben.
2. PNG
PNG är förlustfri och hanterar transparens, vilket gör det rätt för grafik, logotyper och skärmdumpar. För fotografier är PNG ett dåligt val: PNG kan vara tre till fem gånger större än WebP eller JPEG för samma fotografi.
Exportinställning: PNG-24 för grafik med transparens, PNG-8 för enkla grafik med få färger.
3. WebP
WebP ger vanligen 25–35 % mindre filstorlek än JPEG vid liknande visuell kvalitet och stöder både transparens och animation. Webbläsarstödet är nu nära universellt, med cirka 97–98 % täckning. Det är det säkra moderna standardvalet för webben.
Exportinställning: lossy WebP vid kvalitet 80–85 för foton, lossless WebP för grafik med transparens.
4. AVIF
AVIF erbjuder 30–50 % bättre kompression än WebP för fotografiskt material och stöder 10-bitars färg, HDR och bred färgrymd. Webbläsarstödet ligger på runt 89–93 %. Kodningen är betydligt långsammare än WebP, vilket gör AVIF bäst lämpad för förgenererade varianter snarare än konvertering i realtid. Webbläsarstödet är brett sedan Edge 121 i januari 2024.
Exportinställning: AVIF vid kvalitet 60–70 (skalan skiljer sig från JPEG), förgenererat och serverat via <picture>-elementet med WebP och JPEG som fallback.
5. SVG
SVG är vektorbaserat och skalas utan kvalitetsförlust till vilken storlek som helst. Filerna är ofta mycket små för enkla grafiska objekt. SVG kan redigeras direkt i kod och animeras i webbläsaren.
Exportinställning: optimera med ett verktyg som SVGO för att ta bort onödig metadata.
Proffstips: Använd alltid SVG för logotyper, ikoner och illustrationer på webben. På Retina- och 4K-skärmar avslöjar en rasterbild sig direkt, medan SVG alltid ser perfekt ut. Spara EPS- eller AI-originalet som masterfil.
6. GIF
GIF stöder animation men är begränsat till 256 färger och ger stora filer jämfört med moderna alternativ. Använd animerat WebP eller video (MP4) i stället för animationer av någon storlek. GIF är i praktiken utdaterat för marknadsföringsbruk.
7. TIFF
TIFF är masterfilen för tryck och professionellt arbetsflöde. Förlustfri, stöder 16-bitars färgdjup och CMYK. Används inte för webb eller sociala medier på grund av de stora filstorlekarna.
Exportinställning: 16-bitars TIFF i Adobe RGB som masterfil, konvertera till CMYK med inbäddad ICC-profil vid leverans till tryckeri.
8. EPS och AI
EPS och Adobe Illustrator-filer (AI) är vektorformat för professionellt tryck. Tryckerier och reklambyråer förväntar sig ofta EPS eller AI för logotyper och illustrationer. Dessa format hanteras inte av webbläsare och är uteslutande för tryck- och designarbetsflöden.
9. PDF och PDF/X-4
PDF är det vanligaste leveransformatet till tryckeri. PDF/X-4 rekommenderas för leverans när filen innehåller transparens och typsnitt som måste bäddas in. PDF/X-4 är en ISO-standard som garanterar att tryckeriet tolkar filen korrekt.
Hur väljer du format per kanal, och vilka fallbacks gäller?
Webb med responsiva bilder
Servera AVIF som primärt format för fotografier med WebP som fallback och JPEG som sista utväg. Implementera detta med <picture>-elementet och srcset så att webbläsaren väljer rätt variant automatiskt.
Standardpraxis för responsiva bilder är att generera flera storlekar per bild i olika bredder för att anpassa sig till olika enheter. Det säkerställer att mobilanvändare inte laddar ner en bild dimensionerad för stationär dator.
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Beskrivning" width="1280" height="720" loading="lazy">
</picture>
Sociala medier
Plattformarna komprimerar alltid om dina bilder, så det lönar sig att ladda upp i hög kvalitet och låta plattformen sköta komprimeringen. JPEG fungerar utmärkt för foton. PNG passar för grafik med transparens. För sociala delningskort (Open Graph-bilder) är 1 200 × 630 px JPEG eller PNG det säkraste valet, eftersom vissa plattformars länkförhandsvisning fortfarande hanterar moderna format inkonsekvent.
En praktisk lathund för bildstorlekar på sociala medier sparar tid när du anpassar material per plattform.
E-post och automatiserade utskick
JPEG är det mest universella formatet i e-postklienter, och det av ett konkret skäl: Outlook för Windows renderar e-post med Microsoft Words motor och visar varken WebP, AVIF eller SVG. Mottagaren ser ett brutet bildikonen i stället. Gmail och Apple Mail hanterar WebP, men om du inte vet att din lista saknar Outlook-användare är JPEG det enda säkra valet för foton. PNG fungerar för grafik.
Håll den totala bildvikten per e-post under 1 MB, ange alltid explicita bredd- och höjdattribut, och räkna med att bilderna kan blockeras av mottagarens e-postklient. Läs mer om hur bildformat påverkar automatiserade kampanjer och leveransbarhet.
Digitala annonser
| Kanal | Rekommenderat format | Fallback | Notering |
|---|---|---|---|
| Display-annonser (Google) | WebP | JPEG | Kontrollera plattformens specifikationer |
| Sociala annonser (Meta, LinkedIn) | JPEG, PNG | JPEG | Plattformen komprimerar om |
| Programmatiska annonser | JPEG | JPEG | Bred kompatibilitet krävs |
| HTML5-annonser | SVG, WebP | PNG | Vektor för UI-element |
| E-postannonser | JPEG, PNG | JPEG | Outlook-begränsning gäller |
Tryck: checklista för filleverans
Format: TIFF eller PDF/X-4
Färgrymd: CMYK med inbäddad ICC-profil (t.ex. ISO Coated v2 för offsettryck)
Upplösning: 300 DPI i slutlig tryckt storlek
Utfall: 3 mm på alla sidor (kontrollera med tryckeriet för avvikande format)
Typsnitt: inbäddade eller konverterade till kurvor
Transparens: tillåtet i PDF/X-4, inte i äldre PDF/X-1a
Hur hanterar du färg och tryckarbetsflöde rätt?
Det vanligaste misstaget i tryckarbetsflödet är att konvertera till CMYK för tidigt. Redigera i Adobe RGB eller ProPhoto RGB under hela redigeringsprocessen och konvertera till CMYK som absolut sista steg, precis innan du exporterar leveransfilen. Det bevarar maximal färginformation under redigeringen och minimerar färgskift.
Proffstips: Använd PDF/X-4 som leveransformat när filen innehåller transparens eller inbäddade typsnitt. PDF/X-4 är ISO-standarden som tryckerier i hela Europa accepterar och som garanterar att ICC-profiler och transparens hanteras korrekt. PDF/X-1a kräver att all transparens är sammanfogad, vilket kan ge oväntade resultat.
Checklista för tryckfärdiga filer
Färgrymd: CMYK (konverterat från Adobe RGB som sista steg)
ICC-profil: inbäddad och korrekt för tryckprocess (offset, digitaltryck)
Upplösning: 300 DPI i slutlig tryckt storlek
Utfall: 3 mm (kontrollera med tryckeriet)
Säkerhetsmarginal: minst 3–5 mm innanför skärkanten för text och viktiga element
Typsnitt: inbäddade eller konverterade till kurvor
Filformat: PDF/X-4 eller TIFF
Svart text: ren svart (K: 100) för liten text, ej sammansatt svart
Korrektur: begär digitalt korrektur från tryckeriet innan produktion
För storformat som mässväggar och banderoller gäller andra DPI-krav. Vid ett visningsavstånd på flera meter räcker ofta 100–150 DPI i slutlig storlek, eftersom ögat inte uppfattar fler detaljer på det avståndet.
Hur optimerar du bilder för snabb laddning utan att tappa kvalitet?
Bildoptimering handlar om tre saker: rätt format, rätt dimensioner och rätt komprimeringsgrad. Alla tre måste stämma för att resultatet ska bli bra.
Verktyg för batchkomprimering och konvertering som Squoosh, ImageOptim och Sharp (Node.js) hanterar konvertering av stora bildbibliotek. Många CDN-tjänster som Cloudflare Images och Cloudinary konverterar och serverar automatiskt rätt format baserat på webbläsarens stöd, vilket tar bort manuellt arbete ur flödet.
Praktiska kvalitetsnivåer att utgå från:
WebP lossy: 80–85
AVIF: 60–70 (annan skala)
JPEG: 80–85 för webb, 90–95 för tryckförberedelse
Testa alltid visuellt. SSIM (Structural Similarity Index) är ett bra mått för automatiserad kvalitetsjämförelse, men det ersätter inte ett mänskligt öga som granskar detaljer i hud, tyg och text.
Proffstips: Generera AVIF-varianter i förväg och lagra dem på CDN. Koda aldrig AVIF i realtid vid varje sidladdning. Den långa kodningstiden gör det till ett flaskhalsproblem i produktion.
Checklista för mobilprestanda
Servera aldrig en bild bredare än 1 920 px för stationär dator
Generera minst tre storlekar per bild (t.ex. 480, 960, 1 920 px) och använd
srcsetAnvänd
loading="lazy"för bilder nedanför synlig ytaAnge alltid
widthochheightpå<img>-taggen för att undvika layoutförskjutningHåll total bildvikt per sida under 500 KB för mobilanvändare
Undvik PNG för fotografier: PNG kan vara tre till fem gånger större än WebP eller JPEG för samma fotografi.
Konkreta exportpresets och checklista från fotografen
Det här är de inställningar jag faktiskt använder i leveranser till marknadsföringskunder. Kopiera dem direkt till ditt arbetsflöde.
Exportpresets per kanal
Webb, hero-bild: AVIF, 1 920 px bred, kvalitet 65, sRGB, utan EXIF. Komplettera med WebP 82 och JPEG 85 som fallback-varianter.
Webb, innehållsbild: WebP lossy, 960 px bred, kvalitet 82, sRGB.
Sociala medier, foto: JPEG, 1 080 × 1 080 px (kvadrat) eller 1 200 × 628 px (liggande), kvalitet 90, sRGB.
E-post, foto: JPEG, max 600 px bred, kvalitet 80, sRGB, filstorlek under 200 KB per bild.
Digitala annonser: WebP eller JPEG, exakt de pixeldimensioner annonsnätverket kräver, kvalitet 85.
Tryck, leveransfil: PDF/X-4 eller TIFF, CMYK, 300 DPI i tryckt storlek, inbäddad ICC-profil (ISO Coated v2 för offsettryck).
Logotyp, webb: SVG optimerad med SVGO. Komplettera med PNG-24 för kontexter som inte accepterar SVG.
Logotyp, tryck: EPS eller AI med inbäddade typsnitt, CMYK.
Steg-för-steg-checklista vid export
Kontrollera att masterfilen är i Adobe RGB eller ProPhoto RGB, 16-bitars.
Slutför all retusch och färgkorrigering i masterfilen.
Konvertera till rätt färgrymd för kanalen (sRGB för webb, CMYK för tryck) som sista steg.
Exportera leveransversionen i 8-bitars djup (16-bitars behövs inte för leverans).
Kontrollera metadata: ta bort personlig EXIF-data för webb, behåll IPTC-copyright och kontaktinfo för pressleveranser.
Namnge filen konsekvent:
kund_projekt_kanal_storlek_version.format(t.ex.acme_kampanj_webb_1920_v2.webp).Spara leveransfilen i en separat mapp, aldrig över masterfilen.
Arkiveringsråd: Spara alltid masterfiler i RAW, PSD eller 16-bitars TIFF. Exportera leveransversioner i 8-bitars djup. En bildbank med tydlig struktur för master- och leveransfiler sparar tid vid varje ny kampanj och minskar risken för att fel version används.
Proffstips: Organisera mappar efter kanal, inte efter datum. En mapp som heter webb/avif/, webb/webp/, webb/jpeg/ och tryck/pdf-x4/ gör det omedelbart tydligt vilken fil som ska till vart. Lägg alltid masterfilen i en separat _master/-mapp som aldrig levereras direkt.
Viktiga insikter
De viktigaste valen för bildformat i marknadsföring handlar om tre saker: rätt format per kanal, vektor för skalbar grafik och ett disciplinerat arbetsflöde med separata master- och leveransfiler.
| Punkt | Detaljer |
|---|---|
| Vektor för logotyper och ikoner | SVG på webb, EPS/PDF för tryck. Skalas perfekt på Retina och 4K utan kvalitetsförlust. |
| WebP och AVIF för webben | WebP ger klart mindre filer än JPEG; AVIF ger avsevärt bättre kompression än WebP för foton. |
| JPEG för e-post och fallback | Outlook för Windows visar varken WebP, AVIF eller SVG. JPEG är det enda säkra valet för e-postfoton. |
| CMYK och ICC-profil för tryck | Konvertera till CMYK som sista steg i arbetsflödet. Leverera PDF/X-4 eller TIFF med 300 DPI och inbäddad ICC-profil. |
| Fotograf Michael Steinberg | Levererar marknadsföringsfärdiga filer i rätt format per kanal, inklusive masterfiler, webb-varianter och tryckklara PDF:er. |
Varför formatvalet avgör mer än de flesta tror
Det finns en utbredd uppfattning att bildformat är en teknisk detalj som webbutvecklaren hanterar. I praktiken är det ett beslut som påverkar allt från laddningstid och konverteringsgrad till hur en logotyp ser ut på ett mässmonter.
Det jag ser oftast i kundprojekt är två misstag. Det första är att marknadsförare levererar fotografier som PNG “för att vara säkra”, vilket ger onödigt stora filer och långsammare sidor. Det andra är att vektorgrafik levereras som JPEG, vilket gör att logotypen ser suddig ut på Retina-skärmar och i tryck. Båda misstagen är enkla att undvika med rätt arbetsflöde.
Med en kamera och ett arbetsflöde som alltid börjar i RAW och slutar i kanalspecifika leveransfiler vet jag att varje bild är rätt förberedd för sin destination. Det handlar inte om att vara noggrann för noggrannhetens skull. Det handlar om att professionella bilder faktiskt påverkar konverteringen och att en felaktigt exporterad fil kan underminera ett annars välproducerat material.
Vektor-first för allt som inte är fotografi är den enskilt viktigaste regeln. SVG kostar ingenting extra att producera om originalet finns i Illustrator, och det eliminerar en hel kategori av leveransproblem.
Behöver ni bilder färdiga för marknadsföring?
Tjänsterna täcker företagsporträtt och pressfotografering i Stockholm och för kunder i hela landet. Kontakta Fotograf Michael Steinberg direkt via fotograf-stockholm för att diskutera ditt nästa projekt och få en offert anpassad till dina leveranskrav.
Vidare läsning och källor
Här är de primärkällor och resurser som användes i den här artikeln, sorterade efter användningsområde:
Webboptimering och moderna format (WebP, AVIF, JPEG-jämförelse): Image Optimization: The Complete Guide for Web, Social & Print in 2026 och Image Formats 2026: JPEG vs PNG vs WebP vs AVIF vs HEIC ger tekniska jämförelser och kompressionsdata.
Formatval per användningsfall: How to Choose the Right Image Format for Your Project och Image File Formats for Web and Print ger praktiska beslutsträd.
Tryck, CMYK och ICC-profiler: Förbereda trycksaker för tryck: CMYK, utfall och guide är den mest relevanta källan för tryckarbetsflöde på svenska.
Färgrymd och DPI för webb och tryck: Bildbehandling i e-handel: format, färgrymd och arbetsflöden förklarar DPI-myten och arbetsflöden för kombinerade webb- och tryckleveranser.
E-postklientkompatibilitet: Best Image Format for Every Use Case täcker Outlook-begränsningar och fallback-strategier.
Adobe Express formatguide: How to Choose the Right Image Format Every Time ger en tillgänglig genomgång av JPG, PNG, SVG och moderna format.
Bilder och varumärke för marknadsföring: Så väljer du rätt bilder och grafik för ditt budskap och Den kompletta guiden till bildformat ger svenska perspektiv på formatval i marknadsföringskontext.
Vanliga frågor
Vilket bildformat är bäst för webben 2026?
AVIF är det bästa valet för fotografier på webben tack vare 30–50 % bättre kompression än WebP, men kräver fallback. Servera AVIF via <picture>-elementet med WebP och JPEG som reservalternativ.
Varför kan jag inte använda WebP i e-post?
Outlook för Windows renderar e-post med Microsoft Words motor och visar inte WebP, AVIF eller SVG. Mottagaren ser ett brutet bildikonen. Använd JPEG för foton och PNG för grafik i alla e-postutskick.
Vad är skillnaden mellan PDF/X-4 och vanlig PDF för tryck?
PDF/X-4 är en ISO-standard som garanterar att ICC-profiler, inbäddade typsnitt och transparens hanteras korrekt av tryckeriet. En vanlig PDF saknar dessa garantier och kan ge oväntade resultat i tryck.
Måste jag konvertera till CMYK innan jag skickar till tryckeriet?
Ja, om du inte levererar i PDF/X-4 med inbäddad ICC-profil och låter tryckeriet konvertera. Det säkraste är att konvertera till CMYK själv som sista steg i arbetsflödet, lägga in rätt ICC-profil och leverera PDF/X-4.
Kan Fotograf Michael Steinberg leverera filer i rätt format direkt?
Ja. Fotograf Michael Steinberg levererar marknadsföringsfärdiga filer per kanal: webb-varianter i WebP och JPEG, tryckklara PDF:er i CMYK med ICC-profil, och masterfiler i TIFF för arkivering.
