Che cos'è il Base64
Il Base64 è un modo per scrivere dati binari usando caratteri comuni: lettere, cifre e pochi simboli. Un'immagine codificata in questo modo diventa una lunga stringa che puoi inserire in un data URI, ad esempio dentro un tag img o in uno sfondo CSS.
Un data URI inizia con un breve prefisso che indica il tipo di file, seguito dal testo codificato. Il browser lo decodifica e mostra l'immagine senza fare una richiesta separata per un file.
Buoni usi
- Icone o segnaposto molto piccoli che risparmiano una richiesta in più
- Email HTML o pagine in un unico file in cui i file esterni sono scomodi
- Dati di prova, esempi di documentazione e payload JSON, dove un riferimento a un file non sarebbe disponibile
- Piccole immagini in un foglio di stile che deve funzionare senza altri file
Svantaggi
Il testo è circa un terzo più grande del file originale. Il browser non può mettere in cache un'immagine incorporata separatamente dalla pagina, quindi viene scaricata di nuovo ogni volta che si scarica l'HTML o il CSS. Le stringhe lunghe rendono anche HTML e CSS più pesanti da analizzare e più difficili da leggere e modificare.
Alcuni programmi di posta bloccano o limitano le immagini incorporate, quindi prova prima di affidartici in una newsletter.
Come regola generale, incorpora solo immagini piccole, fino a pochi kilobyte. Servi tutto ciò che è più grande come file normale, dove può essere messo in cache, compresso e caricato in modo differito. I server moderni permettono anche a più file di viaggiare su una sola connessione, quindi il risparmio dovuto all'evitare una richiesta è spesso minore di un tempo.
Un esempio pratico (illustrativo)
Supponi di avere un'icona a freccia da 2 KB usata in un solo pulsante. Codificata, diventa circa 2,7 KB di testo nel tuo CSS. Va bene, e risparmi una richiesta.
Ora supponi di incorporare una foto da 300 KB. Il testo cresce fino a circa 400 KB dentro il tuo HTML. Ogni visita deve scaricarlo e analizzarlo tutto prima che la pagina possa terminare, e la foto non può essere messa in cache da sola. Un file normale, compresso prima, è la scelta migliore.
Procedura passo dopo passo
- Rendi prima l'immagine più piccola possibile: ridimensionala e comprimila.
- Controlla le dimensioni finali del file. Se superano pochi kilobyte, valuta invece un file normale.
- Convertila in Base64 e scegli l'output che ti serve: data URI, tag HTML img, sfondo CSS o Base64 grezzo.
- Incollala nella tua pagina, nel foglio di stile o nel JSON.
- Apri la pagina e verifica che l'immagine venga mostrata.
Errori comuni
- Incorporare foto grandi, che appesantiscono la pagina.
- Codificare un'immagine prima di ottimizzarla, incorporando così byte inutili.
- Ripetere la stessa lunga stringa in più punti invece di definirla una sola volta, ad esempio come un'unica classe CSS.
- Dimenticare il prefisso del data URI quando si usa Base64 grezzo in HTML o CSS.
- Considerare il Base64 una forma di sicurezza. È solo una codifica e chiunque può decodificarla.
- Incollare una stringa lunghissima in un punto che limita la lunghezza della riga o del campo, il che può troncare l'immagine.
Lista di controllo rapida
- L'immagine pesa solo pochi kilobyte?
- È già ridimensionata e compressa?
- Ha davvero bisogno di evitare un file separato?
- Hai provato il risultato nel punto in cui verrà usato?
- L'immagine sarà riutilizzata su più pagine? In tal caso, probabilmente è meglio un file normale.
Farlo con DoneImg nel tuo browser
Apri lo strumento Base64 e aggiungi la tua immagine. Scegli l'output che ti serve: un data URI, un tag HTML img già pronto, una regola CSS per lo sfondo oppure il testo Base64 grezzo, poi copialo. Se la stringa sembra molto lunga, torna indietro e usa prima gli strumenti Ridimensiona e Comprimi.
La conversione avviene nel tuo browser, quindi l'immagine non viene mai caricata e resta sul tuo dispositivo.
Domande frequenti
Il Base64 rende un'immagine più piccola?
No. Rende i dati circa un terzo più grandi, perché memorizza il file come testo.
Posso riconvertire il Base64 in un'immagine?
Sì. Il Base64 è reversibile, e i browser decodificano automaticamente un data URI.
Il Base64 va bene per un logo nell'intestazione del mio sito?
Di solito no. Un logo che appare in ogni pagina è meglio come file normale o come SVG, così il browser può metterlo in cache una volta sola e riutilizzarlo ovunque.
Che tipo di file dovrei codificare?
Usa quello più piccolo per quell'immagine: SVG per le forme semplici, WebP o PNG per le piccole grafiche, e JPG o WebP per le foto. La codifica non cambia l'immagine, ma solo il modo in cui è scritta.