Codificatore di immagini Base64

Cos'è la codifica di immagini Base64?

La codifica di immagini Base64 converte i dati binari di un'immagine in una stringa ASCII che può essere incorporata direttamente in HTML, CSS o JSON senza fare riferimento a un file esterno. Il risultato è un data URI — una stringa autonoma che inizia con data:image/png;base64, seguita dai byte dell'immagine codificati in Base64. I browser trattano i data URI esattamente come gli URL di immagini esterne: decodificano il payload Base64 e visualizzano l'immagine inline.

La tecnica è definita dall'RFC 2397 (schema data URI) e dall'RFC 4648 (codifica Base64). Quando un'immagine viene codificata in Base64, ogni 3 byte di dati pixel binari diventano 4 caratteri ASCII, aumentando la dimensione del payload di circa il 33%. Nonostante questo overhead, le immagini inline eliminano una richiesta HTTP per risorsa — un'ottimizzazione significativa quando le immagini sono piccole (icone, loghi, pixel di tracciamento 1x1) e la latenza di andata e ritorno di una richiesta separata supererebbe il costo dei byte aggiuntivi.

I data URI sono supportati da tutti i browser moderni, dai client di posta elettronica (con alcune limitazioni) e in qualsiasi contesto che accetti la sintassi URI standard. Sono ampiamente utilizzati in applicazioni a pagina singola, template di email HTML, sprite SVG e dichiarazioni CSS background-image, dove ridurre il numero totale di richieste di rete migliora il tempo di caricamento percepito.

Perché usare questo codificatore di immagini Base64?

Questo strumento converte qualsiasi immagine in un data URI pronto all'uso direttamente nel browser — senza upload, senza server, senza account.

Casi d'uso della codifica di immagini Base64

Struttura di un data URI

Un data URI codifica il formato dell'immagine e il contenuto binario in un'unica stringa. Comprendere la sua struttura è utile quando si costruiscono o analizzano data URI a livello programmatico:

Confronto dei formati immagine per la codifica Base64

La scelta del formato immagine influisce sulla dimensione dell'output Base64, sul supporto dei browser e sulle caratteristiche di rendering. Usa il formato più adatto al tuo tipo di contenuto:

Esempi di codice

Come convertire immagini in data URI Base64 nei linguaggi e ambienti più diffusi:

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

Domande frequenti