Base64 Image Encoder

Wat is Base64-afbeeldingscodering?

Base64-afbeeldingscodering converteert binaire afbeeldingsdata naar een ASCII-string die direct in HTML, CSS of JSON kan worden ingesloten zonder te verwijzen naar een extern bestand. Het resultaat is een data URI — een op zichzelf staande string die begint met data:image/png;base64, gevolgd door de Base64-gecodeerde bytes van de afbeelding. Browsers behandelen data URI's precies zoals externe afbeeldings-URL's: ze decoderen de Base64-inhoud en renderen de afbeelding inline.

De techniek is vastgelegd in RFC 2397 (data URI-schema) en RFC 4648 (Base64-codering). Wanneer een afbeelding Base64-gecodeerd wordt, worden elke 3 bytes aan binaire pixeldata omgezet naar 4 ASCII-tekens, waardoor de payload met ongeveer 33% groter wordt. Ondanks deze overhead elimineert het insluiten van afbeeldingen één HTTP-verzoek per bestand — een zinvolle optimalisatie als de afbeeldingen klein zijn (pictogrammen, logo's, 1x1 trackingpixels) en de round-trip-latentie van een afzonderlijk verzoek de kosten van de extra bytes zou overstijgen.

Data URI's worden ondersteund in alle moderne browsers, e-mailclients (met beperkingen) en elke context die standaard URI-syntaxis accepteert. Ze worden veel gebruikt in single-page applicaties, HTML-e-mailsjablonen, SVG-sprites en CSS background-image-declaraties waar het verminderen van het totale aantal netwerkverzoeken de waargenomen laadtijd verbetert.

Waarom deze Base64 Image Encoder gebruiken?

Dit hulpmiddel converteert elke afbeelding naar een kant-en-klare data URI, direct in je browser — geen upload, geen server, geen account vereist.

Toepassingen van Base64-afbeeldingscodering

Data URI-structuur

Een data URI codeert het afbeeldingsformaat en de binaire inhoud in één string. Het begrijpen van de structuur helpt bij het programmatisch opbouwen of verwerken van data URI's:

Vergelijking van afbeeldingsformaten voor Base64-codering

De keuze van afbeeldingsformaat beïnvloedt de Base64-uitvoergrootte, browserondersteuning en renderingkenmerken. Gebruik het formaat dat het beste past bij je inhoudstype:

Codevoorbeelden

Hoe afbeeldingen naar Base64 data URI's worden geconverteerd in populaire talen en omgevingen:

// 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..."

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}'

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')}`
}

# 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)"

Veelgestelde vragen