Cos'è il Base64 e quando si usa nella programmazione

Come funziona Base64

Base64 converte dati binari in una stringa di caratteri ASCII usando un alfabeto di 64 simboli: lettere maiuscole (A-Z), minuscole (a-z), cifre (0-9) e i caratteri + e /. Ogni 3 byte di dati binari vengono convertiti in 4 caratteri Base64, aumentando la dimensione del 33%.

Il nome "Base64" deriva proprio dal fatto che usa una base numerica di 64 simboli.

Base64 non è crittografia

Questo è l'errore più comune: Base64 non è sicuro. È una codifica reversibile che chiunque può decodificare in un secondo. Non va mai usato per proteggere dati sensibili come password, chiavi API o informazioni private.

La differenza fondamentale: la crittografia usa una chiave segreta, Base64 no.

Quando si usa Base64

• Immagini inline in HTML/CSS: src="data:image/png;base64,iVBOR..." — elimina una richiesta HTTP ma aumenta il peso della pagina
• Token JWT: il payload di un JSON Web Token è codificato in Base64url
• HTTP Basic Auth: le credenziali vengono inviate come Base64(username:password)
• Email MIME: gli allegati email vengono codificati in Base64
• API JSON: per trasmettere dati binari (immagini, file) in payload JSON

Base64 vs Base64url

Base64url è una variante di Base64 ottimizzata per URL e header HTTP: sostituisce + con - e / con _, ed elimina il padding =. È usata in JWT e OAuth. Il nostro tool supporta entrambe le varianti.

Quando NON usare Base64

• Per immagini grandi sul web (usa URL normali con caching)
• Come "crittografia" o "protezione" dei dati
• Per trasmettere password o chiavi (usa HTTPS + hashing)

Base64 in JavaScript: encoding e decoding lato browser

Tutti i browser moderni hanno funzioni native per Base64, senza librerie esterne:

// Encoding
const encoded = btoa("Hello, ToolsCove!");
console.log(encoded); // "SGVsbG8sIFRvb2xzQ292ZSE="

// Decoding
const decoded = atob("SGVsbG8sIFRvb2xzQ292ZSE=");
console.log(decoded); // "Hello, ToolsCove!"

Attenzione: btoa() e atob() gestiscono solo caratteri Latin-1. Per Unicode (emoji, caratteri accentati, cinese, ecc.) usa questa versione robusta:

// Encoding Unicode-safe
function b64Encode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode(parseInt(p1, 16))));
}

// Decoding Unicode-safe
function b64Decode(str) {
  return decodeURIComponent(Array.from(atob(str),
    c => '%' + c.charCodeAt(0).toString(16).padStart(2, '0')).join(''));
}

Base64 per immagini inline: pro e contro

Incorporare immagini come Base64 direttamente nell'HTML o nel CSS è una tecnica comune per eliminare richieste HTTP. Quando conviene?

• Conviene per: icone piccole (<2KB), immagini critiche above-the-fold in email HTML, favicon inline, placeholder di caricamento (blur-up technique).
• Non conviene per: immagini grandi (Base64 aumenta il peso del 33%), immagini usate su più pagine (nessun caching condiviso), asset che cambiano frequentemente.
• Uso in CSS: background-image: url('data:image/svg+xml;base64,...') — ideale per SVG piccoli.
• Dimensione limite pratica: sotto i 4KB, l'overhead di Base64 è trascurabile. Sopra i 10KB, quasi sempre meglio un file separato.

FAQ