ToolDeck

Base64 Image Encoder

Encode images to Base64 data URIs for HTML and CSS

Drop an image here or click to upload

PNG, JPG, SVG, WebP, GIF, AVIF supported

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.