Koda en bild till Base64 / Data URI

En Data URI är en URL som direkt innehåller en resurs data istället för att peka på en fjärrfil. Den allmänna formen är data:[<mediatype>][;base64],<data>. För en bild har man typiskt data:image/png;base64,iVBORw0KGgo…. Resursen är inbäddad i HTML, CSS eller JSON och laddas utan någon ytterligare HTTP-förfrågan.

Vanliga motiv:

• Minska HTTP-förfrågningar: bädda in en ikon direkt i CSS istället för att ladda den utöver dokumentet
• Email-signatur med inline-bild: ingen risk att bilden blockeras som fjärrinnehåll
• Web Components / Web Workers: där det ofta är problematiskt med scope eller CORS att ladda en extern resurs
• Lokal lagring (LocalStorage, IndexedDB, databas): serialisera en avatarminiatyr som sträng
• Självständiga snippets: en HTML-fil som är fristående, utan externa beroenden

Några konkreta sammanhang där Base64-kodning av bild är motiverad:

• Inline SVG-ikoner i CSS (background-image: url("data:image/svg+xml;base64,…"))
• Personliga e-postsignaturer med logotyp
• Snabb prototyp av en fristående sida som delas via e-post
• Fristående web components (en enda deploybar fil)
• PDF-generering på klientsidan (jsPDF) med inbäddade miniatyrer
• Testdata (mocks) som innehåller bilder

Tre steg:

1. Ladda upp din bild (PNG, JPG, SVG, WebP, GIF) via dropzonen
2. Klicka på "Koda"
3. Kopiera den resulterande Data URI:n med den dedikerade knappen och klistra in den i din HTML, CSS eller JSON

Base64 är ingen mirakellösning. Några försiktighetsåtgärder:

• Base64 ökar storleken med ~33 %: 4 ASCII-tecken per 3 binära bytes
• Kodade bilder cachas inte separat av webbläsaren; de laddas om tillsammans med den HTML/CSS som innehåller dem
• Att föredra för bilder under 10 KB; bortom det är en extern fil oftast mer effektiv
• För SVG, föredra URL-kodning (via encodeURIComponent) framför Base64: resultatet blir kortare och förblir parsbart som text
• Moderna byggverktyg (Webpack, Vite) automatiserar valet Base64 vs extern fil via en konfigurerbar tröskelstorlek

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data):

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Vad är skillnaden mellan Base64 och binär?

Binärt representerar de råa byten i en fil. Base64 är en kodning som omvandlar dessa bytes till 64 utskrivbara ASCII-tecken (A-Z, a-z, 0-9, +, /). Textsammanhang (HTML, JSON, e-post) kan inte transportera binärt; Base64 löser det problemet till priset av en storleksökning på 33 %.

Varför är min Data URI så lång?

En 30 KB-bild i binärt format blir ~40 KB i Base64. Och varje tecken är en ASCII-byte, så ja, strängen är lång. Det är inneboende i kodningen. För stora bilder, behåll en extern fil.

Stöder alla webbläsare Data URI?

Ja, utan undantag bland moderna webbläsare (Chrome, Firefox, Safari, Edge sedan IE8). Historiska begränsningar: IE8 hade en gräns på 32 KB. Inget bekymmer idag på webben.

Hur avkodar man en Data URI?

Vår Base64-bildavkodare gör den omvända operationen: klistra in din Data URI, få tillbaka bildfilen (PNG, JPG, SVG, WebP) redo att ladda upp eller spara.

Base64 vs URL-kodning för SVG?

För SVG ger URL-kodning (med encodeURIComponent) en kortare sträng än Base64 och förblir läsbar som text. Det är det rekommenderade valet i CSS när man bäddar in en inline SVG. För binära format (PNG, JPG) är Base64 fortfarande obligatoriskt.

Påverkar Base64-kodning bildens kvalitet?

Nej. Kodningen är lossless: det är en bijektion binär byte ↔ Base64-sträng. De ursprungliga pixlarna är strikt bevarade. Endast storleken på den transporterade filen ökar med 33 %.