Base64 Image Encoder

Koda bilder till Base64 data URI:er för HTML och CSS

Släpp en bild här eller klicka för att ladda upp

Stöder PNG, JPG, SVG, WebP, GIF, AVIF

Vad är Base64-bildkodning?

Base64-bildkodning konverterar binär bilddata till en ASCII-sträng som kan bäddas in direkt i HTML, CSS eller JSON utan att referera till en extern fil. Resultatet är en data URI — en självständig sträng som börjar med data:image/png;base64, följt av bildens Base64-kodade byte. Webbläsare behandlar data URI:er precis som externa bild-URL:er: de avkodar Base64-nyttolasten och renderar bilden inline.

Tekniken definieras av RFC 2397 (data URI-schemat) och RFC 4648 (Base64-kodning). När en bild Base64-kodas blir varje 3 byte binär pixeldata till 4 ASCII-tecken, vilket ökar nyttolastens storlek med ungefär 33 %. Trots detta overhead eliminerar inline-bilder en HTTP-förfrågan per resurs — en meningsfull optimering när bilderna är små (ikoner, logotyper, 1×1 spårningspixlar) och latensen för en separat förfrågan överstiger kostnaden för de extra byten.

Data URI:er stöds i alla moderna webbläsare, e-postklienter (med förbehåll) och alla sammanhang som accepterar standard URI-syntax. De används flitigt i ensidiga applikationer, HTML-e-postmallar, SVG-sprites och CSS background-image-deklarationer där färre nätverksförfrågningar förbättrar upplevd laddningstid.

Varför använda denna Base64-bildkodare?

Det här verktyget konverterar valfri bild till en redo-att-använda data URI direkt i din webbläsare — ingen uppladdning, ingen server, inget konto krävs.

Omedelbar konvertering
Dra och släpp en bild eller välj en fil, och den fullständiga data URI:n visas direkt. Inget väntan på serverbearbetning — FileReader API hanterar allt lokalt.
🔒
Integritetsfokuserad bearbetning
Dina bilder lämnar aldrig din enhet. Kodningen körs helt i webbläsaren med den inbyggda metoden FileReader.readAsDataURL(). Ingen data överförs till någon server.
🌐
Alla vanliga format stöds
Accepterar PNG, JPEG, SVG, WebP, GIF, ICO, BMP och alla andra bildformat din webbläsare stöder. MIME-typen detekteras automatiskt från filen.
📦
Kopieringsklar utmatning
Utmatningen är en komplett data URI-sträng — klistra in den direkt i ett HTML img src, en CSS url()-deklaration eller en JSON-nyttolast utan manuell formatering.

Användningsfall för Base64-bildkodning

Frontendutveckling
Bädda in små ikoner och UI-resurser direkt i HTML eller CSS för att eliminera HTTP-förfrågningar. Detta minskar vattenfallslatensen för kritiska above-the-fold-bilder och förbättrar Largest Contentful Paint (LCP).
HTML-e-postmallar
Många e-postklienter blockerar externa bilder som standard. Inline Base64-bilder renderas omedelbart utan att mottagaren behöver klicka på "ladda bilder", vilket förbättrar öppningsfrekvenser och visuell konsekvens.
Ensidiga applikationer
Paketera små resurser som data URI:er i din JavaScript eller CSS för att minska det totala antalet nätverksförfrågningar. Webpack och Vite stöder båda automatisk Base64-inlinjering för resurser under ett konfigurerbart storleksgränsvärde.
API- och JSON-nyttolaster
Koda användaravatarer, signaturer eller miniatyrbilder som Base64-strängar för att inkludera dem direkt i JSON API-svar. Detta undviker behovet av en separat filvärdstjänst för små bilder.
Dokumentation och Markdown
Bädda in diagram eller skärmbilder som data URI:er i Markdown-filer eller README-dokument. Bilderna följer med dokumentet och visas korrekt utan extern värdtjänst.
Testning och prototyper
Använd Base64 data URI:er som platshållarbilder i testfixtures, Storybook-stories eller prototyp-HTML-filer. Inget behov av att sätta upp en statisk filserver eller hantera bildresurser under tidig utveckling.

Data URI-struktur

En data URI kodar bildformatet och det binära innehållet i en enda sträng. Att förstå dess struktur hjälper när man konstruerar eller tolkar data URI:er programmatiskt:

KomponentBeskrivning
data:URI scheme identifier
image/pngMIME type of the image
;base64,Encoding declaration
iVBORw0KGgo...Base64-encoded binary data

Jämförelse av bildformat för Base64-kodning

Valet av bildformat påverkar Base64-utmatningens storlek, webbläsarstöd och renderingsegenskaper. Använd det format som bäst matchar din innehållstyp:

FormatMIME-typTransparensBäst för
PNGimage/pngYesScreenshots, icons, UI elements
JPEGimage/jpegNoPhotos, gradients, large images
SVGimage/svg+xmlYesLogos, icons, scalable graphics
WebPimage/webpYesModern web images, smaller files
GIFimage/gifYes (1-bit)Simple animations, small icons
ICOimage/x-iconYesFavicons

Kodexempel

Hur man konverterar bilder till Base64 data URI:er i populära språk och miljöer:

JavaScript (browser)
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
    // reader.result → "data:image/png;base64,iVBORw0KGgo..."
  })
}

// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."

// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."
Python
import base64

# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
    encoded = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."

# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"

with open('photo.jpg', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f'data:{mime};base64,{b64}'
Node.js
import { readFileSync } from 'fs'
import { lookup } from 'mime-types'

// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"

const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."

// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
  return `data:${mimeType};base64,${buf.toString('base64')}`
}
CLI (bash)
# Encode an image to Base64 (macOS)
base64 -i logo.png | tr -d '\n'

# Encode an image to a full data URI (Linux)
echo -n "data:image/png;base64,$(base64 -w 0 logo.png)"

# Encode and copy to clipboard (macOS)
echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy

# Detect MIME type and encode (Linux, requires file command)
MIME=$(file -b --mime-type image.webp)
echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"

Vanliga frågor

Vilken är den maximala bildstorleken för Base64-kodning?
Det finns ingen hård gräns i själva Base64-specifikationen. Webbläsarstöd för data URI:er varierar: de flesta moderna webbläsare hanterar data URI:er upp till flera megabyte. Base64-kodning ökar dock storleken med 33 %, så en bild på 1 MB blir ungefär 1,33 MB text. För bilder större än 10–20 KB är det effektivare att servera dem som separata filer med korrekt cachning.
Minskar Base64-kodning bildkvaliteten?
Nej. Base64 är en förlustfri kodning — den konverterar binär data till text utan att ändra innehållet. Den avkodade datan är byte-för-byte identisk med originalfilen. Eventuell kvalitetsförsämring skulle komma från bildformatet i sig (t.ex. JPEG-komprimering), inte från Base64-kodning.
Varför är Base64-kodad utmatning större än originalbilden?
Base64 representerar 3 byte binär data med 4 ASCII-tecken, vilket ger en storleksökning på 33 %. En data URI lägger också till ett prefix (t.ex. data:image/png;base64,) på ungefär 25–30 tecken. För små bilder (under 2–5 KB) uppvägs detta overhead av att en HTTP-förfrågan elimineras. För större bilder gör storleksstraffet externa filer effektivare.
Kan jag använda Base64-bilder i CSS background-image?
Ja. Använd data URI:n som värde för url()-funktionen: background-image: url('data:image/png;base64,...'). Detta fungerar i alla moderna webbläsare. Det är mest effektivt för små, ofta använda bakgrundsmönster eller ikoner där det lönar sig att undvika en HTTP-förfrågan trots en något större CSS-fil.
Är Base64-bildkodning säkert för känsliga bilder?
Base64 är en kodning, inte kryptering. Vem som helst som ser data URI:n kan avkoda den tillbaka till originalbilden. Förlita dig inte på Base64 för att skydda konfidentiella bilder. Det här verktyget bearbetar bilder helt i din webbläsare — ingen data skickas till någon server — men den resulterande data URI:n är klartext som kan läsas av vem som helst med tillgång till din HTML- eller CSS-källkod.
Hur konverterar jag en Base64 data URI tillbaka till en bildfil?
I JavaScript använder du fetch() med data URI:n och anropar blob() på svaret, sedan skapar du en nedladdningslänk. I Python delar du strängen vid kommatecknet, avkodar Base64-delen med base64.b64decode() och skriver byten till en fil. Du kan också använda Base64 Image Decoder-verktyget på den här webbplatsen.
Bör jag Base64-koda alla bilder på min webbplats?
Nej. Base64-inlinjering är fördelaktigt för små bilder (ikoner, logotyper, 1×1 pixlar) där HTTP-förfrågans overhead överstiger 33 % storleksstraffet. För större bilder använder du separata filer med korrekta cache-headers — webbläsaren kan cacha dem oberoende och ladda dem parallellt. Ett vanligt gränsvärde är 2–8 KB: bilder under detta drar nytta av inlinjering, medan större bilder bör serveras som externa filer.