Come si usa
- Digita il testo o scegli il file che vuoi incorporare.
- Controlla o inserisci il tipo MIME, per esempio image/png o image/svg+xml, e scegli Base64 o Codifica percentuale.
- Copia il data URI generato nel tuo HTML, CSS o JSON.
- Per esaminare un data URI esistente, incollalo nella scheda Analizza per vederne tipo MIME, set di caratteri, dimensione e anteprima, e scarica il file incorporato.
Sintassi dei data URI
Un data URI, definito nella RFC 2397, trasporta un piccolo file all’interno dell’URL stesso:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Il tipo di media indica al browser come interpretare i dati; se viene omesso, si presume text/plain;charset=US-ASCII. Il flag ;base64 indica che la parte dopo la virgola è in Base64. Senza di esso, i dati sono testo semplice in cui i caratteri speciali sono scritti con la codifica percentuale.
Base64 o codifica percentuale
Il Base64 è la scelta giusta per i file binari come PNG, JPEG, WebP, font e PDF. Aggiunge sempre circa il 33%. Per i formati di testo la codifica percentuale è spesso più compatta, perché la maggior parte dei caratteri resta invariata e solo pochi, come <, >, #, % e le virgolette doppie, devono essere codificati. Per questo è adatta alle icone SVG, e il risultato, rimanendo leggibile, si comprime anche meglio con gzip o Brotli. Ogni byte di testo non ASCII, però, diventa tre caratteri, quindi per un testo in cinese o in cirillico il Base64 è di solito più corto. Nel dubbio, prova entrambe le opzioni e tieni il risultato più corto.
/* SVG con codifica percentuale in CSS: virgolette singole all'interno, # scritto come %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Quando conviene incorporare i dati
Un data URI fa risparmiare una richiesta HTTP, ma i dati diventano parte del documento che li contiene:
- Nessuna cache separata. Un’immagine incorporata nell’HTML viene scaricata di nuovo con ogni pagina. Una incorporata in un foglio di stile viene memorizzata nella cache insieme a quel file, e modificarla invalida l’intero foglio di stile.
- Primo rendering più lento. I data URI di grandi dimensioni nel CSS ritardano il rendering, perché il browser deve prima scaricare e analizzare l’intero foglio di stile.
- Dimensioni maggiori. Il Base64 aggiunge un terzo, recuperato solo in parte comprimendo l’HTML o il CSS.
Con HTTP/2 e HTTP/3 le richieste aggiuntive costano poco, quindi incorpora solo risorse piccole, di pochi kilobyte, come icone, minuscoli segnaposto o uno sfondo critico, e servi tutto il resto come normali file. I siti con una Content Security Policy devono consentire data: in img-src o font-src perché immagini e font incorporati vengano caricati.
Domande frequenti
Esiste un limite di dimensione per i data URI?
La RFC 2397 non fissa alcun limite e i browser moderni accettano data URI di diversi megabyte in immagini e fogli di stile. Quelli grandi restano comunque una cattiva idea: appesantiscono la pagina, non possono essere memorizzati nella cache separatamente e richiedono più tempo per essere analizzati.
Perché un data URI non si apre quando faccio clic su un link che punta a esso?
La maggior parte dei browser impedisce alle pagine web di aprire un URL data: nella finestra principale, come protezione contro il phishing. Usa i data URI all’interno di immagini, CSS o link di download, oppure incolla l’URI nella scheda Analizza di questa pagina per vederne l’anteprima e scaricarne il contenuto.
Come si usa un data URI in HTML e CSS?
<img src="data:image/png;base64,..."> in HTML, oppure background-image: url("data:image/svg+xml,...") in CSS. Nel CSS racchiudi il valore tra virgolette, soprattutto per gli SVG con codifica percentuale.Devo specificare un set di caratteri?
text/plain o text/html che contengono caratteri non ASCII, sì: aggiungi ;charset=UTF-8 dopo il tipo di media, altrimenti il valore predefinito US-ASCII potrebbe alterarli. I tipi binari come image/png non richiedono un charset.