Convertire un'immagine in Base64
Trasforma una foto in un data URI da incollare direttamente in CSS, HTML o JSON.
Trascina un'immagine per iniziare
Funziona nel browser. Nessun caricamento.
Un data URI è l'immagine stessa scritta come testo, così un foglio di stile o un template può portarsela dietro invece di puntare a un file. Toglie una richiesta alla pagina e un file al deploy, ed è il motivo per cui icone piccole, spaziatori e firme email finiscono così spesso incorporati in questo modo.
Dalla stessa codifica escono quattro forme, perché sono i quattro posti in cui va incollata. Il data URI da solo va in un campo JSON o in un attributo `src` scritto a mano; la regola CSS e il tag img arrivano già con la sintassi giusta; e il Base64 grezzo, senza il prefisso `data:`, è quello che si aspetta un'API che vuole una stringa e basta.
Il prezzo è la dimensione: il Base64 spende quattro caratteri ogni tre byte, quindi il testo è circa un terzo più grande del file di partenza, e sta nel percorso critico del documento che lo contiene invece di essere messo in cache a parte. Sotto qualche kilobyte lo scambio di solito conviene, sopra il centinaio di solito no — il pannello mostra entrambi i numeri, così la scelta non è a occhio.
Passo per passo
- 1Trascina qui l'immagine.
- 2Scegli la forma che ti serve: il data URI, una regola CSS, un tag img o il Base64 grezzo.
- 3Premi Copia e incolla dove serve.
Domande
Che cos'è un data URI?
Un URL che contiene il file invece di puntarci. Inizia con `data:`, dichiara il tipo di media e porta i byte codificati in Base64, così qualsiasi cosa accetti un URL accetta l'immagine stessa.
Perché il Base64 è più grande della mia immagine?
Codificare dati binari come testo costa circa il 33%, perché tre byte diventano quattro caratteri stampabili. La compressione in transito ne recupera una parte, ma il testo resta sempre più grande del file.
Quando è meglio non incorporare un'immagine?
Quando è grande, quando la usano più pagine o quando cambia spesso. Un'immagine incorporata non può essere messa in cache da sola e viene riscaricata con ogni copia del documento che la contiene.
L'immagine viene caricata da qualche parte per essere codificata?
No. Il file viene letto dal browser e trasformato in testo in questa scheda. Non viene mandato niente da nessuna parte, ed è anche il motivo per cui funziona senza connessione una volta caricata la pagina.