Data URL: data:text/html;base64 e simili, spiegati
Data URL (data: URI)
Data URI e data:text/html;base64 spiegati, con encoder | We.Inc
Come funzionano le data: URL: la sintassi, base64 contro percent-encoding, il costo di un terzo in più, perché data:text/html non si apre in una scheda, più un encoder e un decoder.
Una data URL contiene un intero file dentro l'indirizzo stesso: data:, un media type opzionale, ;base64 se i byte sono codificati in base64, una virgola, poi il contenuto. data:text/html;base64,PGgxPkhpPC9oMT4= è una minuscola pagina web. Base64 rende il payload circa un terzo più grande, e i browser si rifiutano di aprire le pagine data: come scheda di primo livello.
Anatomia di una data URL
Parte
Esempio
Note
Schema
data:
Sempre per primo
Media type
image/svg+xml
Opzionale; il predefinito è text/plain;charset=US-ASCII
Parametri
;charset=utf-8
Opzionali, dopo il media type
Indicatore di codifica
;base64
Presente solo quando i dati sono in base64
Separatore
Obbligatorio, anche senza media type
Dati
PHN2Zz4uLi48L3N2Zz4=
Base64, o testo in percent-encoding
Le data URL sono comode per icone minuscole, sfondi CSS, fixture di test e download generati, e sono una fonte frequente di confusione quando qualcuno incolla una lunga stringa data:text/html nella barra degli indirizzi e non succede nulla. Qui sotto puoi codificare qualsiasi testo in una data URL, decodificarne una, e vedere esattamente quanto costa in byte rispetto all'originale.
Scrivi o incolla un contenuto e scegli il suo media type. Lo strumento mostra sia la forma base64 sia quella in percent-encoding, con le relative lunghezze.
Confronta le dimensioni. Base64 usa circa quattro caratteri ogni tre byte; il percent-encoding può essere più corto per testo semplice e SVG.
Incolla una data URL nel decoder per leggerne media type, codifica e contenuto. I tipi immagine mostrano un'anteprima.
I risultati HTML vengono mostrati in un frame sandbox, perché una pagina data: non può essere aperta come scheda a sé.
Per gli SVG nel CSS, il percent-encoding è di solito più piccolo del base64 e resta leggibile. Ricorda di codificare # come %23.
Incorpora solo file piccoli. Una data URL non può essere messa in cache separatamente, quindi una grande viene riscaricata con ogni pagina o foglio di stile che la contiene.
Senza alcun media type, il predefinito è text/plain;charset=US-ASCII, quindi indica il tipo e aggiungi charset=utf-8 per testo con accenti o emoji.
Le data URL non supportano le query string. Tutto ciò che segue la virgola, punto interrogativo compreso, è trattato come dati.
Per i file che il visitatore genera nella pagina, un URL blob: da URL.createObjectURL evita di costruire una stringa enorme.
Domande frequenti
Perché data:text/html;base64 non si apre quando lo incollo nella barra degli indirizzi?
I browser moderni bloccano la navigazione di primo livello verso le data: URL come misura anti-phishing, perché una pagina data potrebbe imitare qualsiasi sito nascondendo la sua vera origine. Il contenuto funziona comunque dentro un iframe, un elemento img o come link di download.
Di quanto aumenta un file con base64?
Circa un terzo. Base64 scrive ogni tre byte come quattro caratteri, quindi un'immagine da 30 KB diventa circa 40 KB di testo prima di qualsiasi compressione. L'aumento esatto dipende dalla lunghezza e dal padding.
Come trasformo una data URL base64 di nuovo in immagine?
Incollala nel decoder di questa pagina per vederne l'anteprima, o mettila direttamente in un img src. Per salvarla come file, usa il nostro strumento da immagine a base64 al contrario, oppure fai fetch della data URL in JavaScript e salva il Blob risultante.
C'è un limite di dimensione?
MDN indica 512 MB per Chromium e Firefox e 2,048 MB per Safari. Molto prima di quel limite, data URL enormi rendono lento il parsing di HTML e CSS e impossibile la cache, quindi tienile a pochi kilobyte.
Che origine ha una pagina data URL?
Un'origine opaca tutta sua, non l'origine della pagina che l'ha creata. Quindi lo script dentro un iframe data: viene trattato come un estraneo dalla pagina che lo contiene, non come parte dello stesso sito.
Quando incorporare aiuta e quando danneggia
Incorporare risparmia una richiesta, il che conta per una manciata di risorse minuscole come uno spinner di caricamento o una favicon in una demo a file singolo. Danneggia quando la risorsa è grande o usata su molte pagine, perché i byte viaggiano con ogni file HTML o foglio di stile invece di essere messi in cache una volta sola.
Una regola ragionevole: incorpora le cose sotto qualche kilobyte che compaiono una volta, e collega tutto il resto come un file normale.
Base64 o percent-encoding?
I file binari come PNG, JPEG e font richiedono base64. I formati di testo, soprattutto SVG, possono usare il percent-encoding: solo caratteri come #, %, < e > e gli spazi vanno codificati, quindi il risultato è spesso più corto e ancora leggibile.
L'encoder qui sotto mostra le due lunghezze affiancate così puoi scegliere la più piccola per il tuo contenuto.
Errori comuni
Un refuso nel base64, un a capo di troppo o un media type sbagliato falliscono in silenzio: l'immagine semplicemente non appare. Passa una stringa rotta nel decoder per vedere dove si guasta.
Un altro errore frequente è dimenticare la virgola quando non c'è un media type. data:,Hello è valida; data:Hello non è una data URL utilizzabile.
Data URL nel codice reale
Sfondo SVG nel CSS, in percent-encoding
Le virgolette singole dentro l'SVG evitano il conflitto con le virgolette doppie attorno a url(), e il # del colore è scritto come %23.
Una minuscola immagine inline
La stessa idea funziona in un tag img. Mantieni il testo alt, come per qualsiasi immagine.
Creare una data URL da un file in JavaScript
FileReader.readAsDataURL produce la stringa data: completa, media type incluso, per un file scelto dal visitatore.
Trasformare una data URL di nuovo in Blob
fetch capisce le data: URL, ed è il modo più breve per riottenere i byte.
Encoder e decoder di data URL
Contenuto da codificare
Media type
Data URL in base64
Data URL in percent-encoding
Originale {n} byte, URL base64 {v} caratteri
URL in percent-encoding {v} caratteri
Mostrato in un frame sandbox
Decodifica una data URL
Incolla una data URL
Media type: {v}
Codifica: {v}
Dimensione decodificata: {n} byte
Non sembra una data URL valida. Servono data:, un tipo opzionale, una virgola e i dati.