Immagine & Strumenti per Sviluppatori
Convertitore da Immagine a Base64
Converti qualsiasi immagine in un Data URL Base64, frammento HTML o sfondo CSS - istantaneamente nel tuo browser. Supporto multi-immagine, modalità inversa, zero upload.
100% Privato
PNG · JPEG · GIF · WebP · SVG · BMP
Multi-immagine + Modalità Inversa
Carica Immagini
Trascina le immagini qui o clicca per caricare
Supporta più file contemporaneamente · Max 10 MB per file · Funziona anche con incolla dagli appunti (Ctrl+V)
PNG
JPEG
GIF
WebP
SVG
BMP
AVIF
Cos'è la Codifica Base64 delle Immagini?
📖 Cos'è Base64?
Base64 è uno schema di codifica da binario a testo che rappresenta dati binari - come le immagini - come una sequenza di caratteri ASCII stampabili. Mappa ogni 3 byte di dati binari in 4 caratteri stampabili utilizzando un alfabeto di 64 caratteri (A–Z, a–z, 0–9, +, /).
Il nome deriva dal fatto che utilizza esattamente 64 caratteri distinti. Questo lo rende sicuro per la trasmissione in ambienti che gestiscono solo testo - come attributi HTML, fogli di stile CSS, file JSON e corpo delle email.
👨💻 Perché gli Sviluppatori lo Usano?
- Immagini inline in HTML/CSS - incorpora piccole icone o sfondi direttamente nel tuo markup, eliminando una richiesta HTTP.
- Allegati email - la codifica MIME per le immagini nelle email usa Base64 per far passare i dati binari attraverso server di posta solo testo.
- API JSON - trasferisci dati immagine in una risposta JSON senza codifica multipart.
- Data URI nei tag <img> - utile per immagini generate dinamicamente o app web offline-first.
- Sfondi CSS - incorpora piccole icone SVG o sprite usando
url("data:...").
⚠️ Quando NON Usare Base64
- Immagini grandi - Base64 aggiunge circa il 33% di sovraccarico rispetto al binario originale. Un'immagine da 100 KB diventa circa 137 KB in Base64. Per immagini grandi, servirle come file separati con caching HTTP è sempre più efficiente.
- Pagine critiche per le prestazioni - incorporare molte immagini come Base64 gonfia il tuo HTML/CSS, aumenta il tempo di parsing e impedisce al browser di memorizzare nella cache le immagini separatamente.
- SEO - i crawler di immagini dei motori di ricerca potrebbero non indicizzare le immagini codificate in Base64 come fanno con i file immagine ospitati esternamente.
- SVG grandi - gli SVG complessi sono spesso migliori se serviti inline come vero markup SVG piuttosto che codificati in Base64, per dimensioni minori e accessibilità CSS/JS.
💡 Best Practices
- Usa Base64 solo per immagini inferiori a 5–10 KB per evitare di gonfiare le tue pagine.
- Le icone SVG sono un ottimo candidato - si comprimono bene e il sovraccarico di Base64 è piccolo.
- Per gli sfondi CSS, considera la codifica URL degli SVG invece di Base64 - è spesso più piccola.
- Testa sempre le prestazioni di caricamento della pagina (Lighthouse) dopo aver incorporato le immagini per confermare che sia un vantaggio netto.
- Usa HTTP/2 push o suggerimenti sulle risorse come alternativa per ridurre la latenza delle richieste di immagini.
Esempi di Codice
Copia l'output dello strumento sopra e inseriscilo direttamente in uno di questi modelli:
<!-- HTML - incorpora immagine inline (nessuna richiesta separata) -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
alt="Il mio logo" width="64" height="64">
/* CSS - immagine di sfondo tramite data URL */
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
background-size: contain;
width: 64px;
height: 64px;
}
// JavaScript - converte un file immagine in Base64 (come questo strumento)
const reader = new FileReader();
reader.onload = (e) => {
const dataUrl = e.target.result; // data URL completo
const base64 = dataUrl.split(',')[1]; // Base64 puro
};
reader.readAsDataURL(file);
Immagine Base64 - Quando Usarla
| Scenario | Raccomandato? | Motivo |
|---|---|---|
| Piccole icone < 5 KB (PNG, SVG) | ✓ Sì | Risparmia 1 richiesta HTTP; il sovraccarico è trascurabile a queste dimensioni. |
| Sprite CSS / miniature di sfondo | ✓ Sì (se piccole) | Utile per icone critiche above-the-fold che devono caricarsi istantaneamente. |
| Immagini incorporate nelle email (MIME) | ✓ Sì | I client email richiedono la codifica Base64 per le immagini allegate/inline. |
| Trasferimento di immagini tramite API REST | ✓ Sì | Semplifica la gestione multipart - basta incorporarle nel corpo JSON. |
| Foto grandi > 20 KB | ✗ No | 33% di sovraccarico + perdita del caching HTTP = prestazioni peggiori. |
| Molte immagini su una sola pagina | ✗ No | Gonfia HTML/CSS; impedisce il caricamento parallelo e la memorizzazione nella cache. |
| Immagini per SEO / condivisione social | ✗ No | I crawler potrebbero non indicizzare le immagini Base64 come fanno con gli URL esterni. |
Domande Frequenti
No. Tutta l'elaborazione avviene localmente nel tuo browser usando l'API nativa
FileReader. I tuoi dati immagine non vengono mai inviati a nessun server, registrati o memorizzati da nessuna parte. È 100% privato.Base64 rappresenta ogni 3 byte di dati binari come 4 caratteri ASCII, il che aggiunge circa il 33–37% di sovraccarico. Questa è una proprietà inevitabile della codifica. Un'immagine da 100 KB produrrà una stringa Base64 di circa 133–137 KB di lunghezza.
Questo strumento supporta PNG, JPEG/JPG, GIF, WebP, SVG, BMP e AVIF - qualsiasi formato che FileReader del tuo browser possa elaborare. Il tipo MIME viene rilevato automaticamente e incluso nel prefisso del data URL (es.,
data:image/png;base64,...).Un Data URL è la stringa completa che puoi usare direttamente in HTML o CSS:
data:image/png;base64,iVBORw0.... Il Base64 puro è solo la parte codificata dopo la virgola - utile per API, database, o quando il tuo framework aggiunge il prefisso per te. Questo strumento fornisce entrambi i formati.Sì! Puoi selezionare più file contemporaneamente usando il selettore file (tieni premuto Ctrl o Cmd durante la selezione), trascinare e rilasciare più file nell'area di rilascio, o incollare più immagini dagli appunti. Ogni immagine avrà la sua scheda risultato con pulsanti di copia e download indipendenti.
Passa alla scheda "Base64 → Immagine". Incolla nella casella di testo un data URL completo (che inizia con
data:image/...;base64,) o una stringa Base64 grezza. L'anteprima dell'immagine apparirà automaticamente mentre scrivi. Clicca "Scarica Immagine" per salvarla sul tuo dispositivo.Lo strumento impone un limite di 10 MB per immagine per prevenire problemi di memoria del browser. In pratica, codificare in Base64 immagini più grandi di circa 1 MB non è generalmente raccomandato per l'uso in produzione, a causa del sovraccarico di dimensioni e della perdita dei benefici del caching HTTP.