In questo articolo
Cosa sono i data URI?
Un data URI (Uniform Resource Identifier) e uno schema che permette di incorporare il contenuto di un file direttamente in una stringa URL invece di collegare un file esterno. Definito dalla RFC 2397, i data URI codificano il contenuto inline usando il formato data:[mediatype][;base64],data. Questo elimina la necessita di una richiesta HTTP separata per recuperare la risorsa.
I data URI sono comunemente usati per incorporare piccole immagini, font, SVG e altri asset direttamente in HTML o CSS. Invece di referenziare un file esterno con un URL, l'intero contenuto del file viene codificato (tipicamente in base64) e posizionato inline. Questo puo ridurre le richieste HTTP e semplificare il deployment per piccoli asset.
Come creare data URI
Un generatore di data URI converte il contenuto di file o testo nel formato data URI. Il processo comporta l'identificazione del tipo MIME e la codifica del contenuto.
- Input testuale — inserisci il testo direttamente e specifica il tipo MIME (text/plain, text/html, text/css, application/json). Il testo puo essere codificato in URL o in base64
- Caricamento file — carica qualsiasi file (immagini, font, SVG, documenti) e il generatore determina automaticamente il tipo MIME e codifica il contenuto in base64
- Selezione tipo MIME — il tipo di media dice al browser come interpretare i dati. Tipi comuni includono image/png, image/svg+xml, text/css e application/javascript
Prova gratuitamente — nessuna registrazione richiesta
Genera un data URI →Quando usare i data URI
I data URI sono piu vantaggiosi per piccoli asset usati frequentemente dove eliminare una richiesta HTTP migliora le prestazioni.
- Immagini di sfondo CSS — incorpora piccole icone o pattern direttamente nel CSS per evitare richieste extra. Ideale per immagini sotto i 2-4 KB
- SVG inline nel CSS — incorpora icone SVG come data URI nelle proprieta background-image quando l'SVG non puo essere inserito direttamente nell'HTML
- Template HTML per email — incorpora le immagini direttamente nell'HTML dell'email perche molti client email bloccano le immagini esterne per impostazione predefinita
Domande frequenti
C'e un limite di dimensione per i data URI?
Non c'e un limite rigido nella specifica, ma esistono limiti pratici. La maggior parte dei browser moderni gestisce data URI fino a diversi megabyte, ma Internet Explorer li limitava a 32 KB. La codifica base64 aumenta la dimensione dei dati di circa il 33%. Per asset superiori a 5-10 KB, i file esterni con caching appropriato sono generalmente piu efficienti.
I data URI influenzano le prestazioni?
Per piccoli asset, i data URI migliorano le prestazioni eliminando le richieste HTTP. Tuttavia, i dati codificati in base64 sono circa il 33% piu grandi del file originale, e i data URI non possono essere memorizzati nella cache indipendentemente dal browser. Per file grandi, i file esterni con header di cache funzionano meglio.
I data URI sono sicuri?
I data URI hanno implicazioni di sicurezza. La maggior parte dei browser blocca l'esecuzione di JavaScript nei data URI. Tuttavia, i data URI possono aggirare le regole della Content Security Policy (CSP) se non configurate correttamente. Quando si accettano data URI generati dagli utenti, validare sempre il tipo MIME.