Convertitore da immagine a Base64
Trasforma un'immagine in una stringa Base64 da incollare nel codice.
Il testo Base64 è circa il 37% più grande del file originale. È adatto a piccole icone, non a foto intere.
Funziona nel browser. I tuoi file non lasciano mai il dispositivo.
- Output in URL di dati, CSS e HTML
- Funziona con ogni tipo di immagine
- Niente viene caricato
Come convertire un'immagine in Base64
- Trascina qui un'immagine, oppure tocca Scegli i file.
- Copia l'URL di dati, il Base64 grezzo o un frammento CSS o HTML pronto.
- Incollalo nel tuo codice.
Come funziona la codifica
Base64 trasforma ogni 3 byte dell'immagine in 4 caratteri di testo, usando i 64 caratteri da A a Z, da a a z, da 0 a 9, più il segno più e la barra, l'alfabeto standard della RFC 4648.
Un URL di dati è quel testo con un breve prefisso, come data:image/png;base64, così un browser o un'app sanno cosa stanno guardando senza bisogno di un file separato.
| File originale | Testo Base64 (circa il 37% più grande) |
|---|---|
| Icona da 5 KB | Circa 6,9 KB |
| Logo da 20 KB | Circa 27 KB |
| Foto da 100 KB | Circa 137 KB |
Questo sovraccarico è il motivo per cui gli URL di dati funzionano meglio con grafica piccola, non con foto intere.
Dove si usano gli URL di dati
- Nel CSS, dentro background-image, così un'icona piccola si carica insieme al foglio di stile invece che con una richiesta separata.
- Nell'HTML, dentro un attributo img src o in markup SVG inline.
- Risposte API in JSON e campi di database che salvano un'immagine come testo.
- HTML delle email, perché alcuni client di posta bloccano le immagini collegate ma permettono i dati inline.
Quando tenere invece un file normale
Gli URL di dati non vengono messi in cache separatamente dalla pagina che li contiene, quindi una foto usata in dieci pagine viene scaricata dieci volte invece che una sola. Per qualsiasi cosa più grande di una piccola icona, un normale file immagine con la cache del browser si carica più velocemente.
Domande su Immagine a Base64
Cos'è un URL di dati Base64?
Sono i byte di un'immagine scritti come testo, così puoi incollare un'immagine direttamente in HTML, CSS o JSON senza un file separato.
Base64 rende il file più grande?
Sì, di circa il 37 percento, perché la codifica trasforma ogni 3 byte dell'immagine in 4 caratteri di testo.
Quando conviene usare un URL di dati invece di un file?
Per piccole icone e grafica semplice, dove risparmiare una richiesta di rete conta più del peso della pagina. Per le foto, tieni un normale file immagine.
La mia immagine viene caricata da qualche parte?
No. La codifica avviene nel tuo browser, quindi l'immagine non lascia mai il tuo dispositivo.
Convertire in Base64 cambia la qualità dell'immagine?
No. I dati dei pixel non vengono toccati, solo riscritti come testo, quindi decodificandolo ottieni esattamente i byte originali.
C'è una dimensione massima per un URL di dati?
I browser non impongono un limite fisso, ma un URL di dati molto lungo non può essere messo in cache da solo e rallenta l'analisi della pagina, quindi riservalo a piccole icone e grafiche.
Tutti i browser supportano gli URL di dati?
Sì. Gli URL di dati funzionano in ogni browser importante da Internet Explorer 8 in poi, compresi tutti i browser mobili attuali.
Posso usarlo per una favicon?
Una favicon piccola può essere inserita come URL di dati nell'head dell'HTML, anche se un normale file favicon.ico più le dimensioni PNG resta la scelta più comune.