Qual è lo scopo degli URI di dati?

Question

Perché le risorse a volte sono incorporate negli URI di dati anziché utilizzare un URI normale che si collega a una risorsa memorizzata come file su un server?

Answer 1

1. Ridurre Server richiede

URI dati possono essere utilizzati per ridurre il carico del server e migliorare le prestazioni del client, riducendo il numero di richieste HTTP necessari per acquisire risorse. Ad esempio, questo HTML:

<img src="assets/bullet.png"> 

... può essere sostituito con questo:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA 
    ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5 
    o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9 
    D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3 
    pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj 
    eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38 
    k6jyMAAAAASUVORK5CYII=" 
> 

... per produrre un'immagine come questa: con uno in meno richiesta HTTP.

Nota: sembra impossibile incorporare immagini URI di dati in un post di Overflow dello stack; tuttavia, l'immagine sopra è stata caricata su un servizio di hosting di immagini utilizzando l'URI di dati mostrato.

Se, ad esempio, il sito utilizza molte piccole icone, tutti specificando come URI di dati in un foglio di stile:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) } 
.icon-bullet-green { background-image: /* ... */ } 
.icon-save { background-image: /* ... */ } 
.icon-load { background-image: /* ... */ } 
.icon-delete { background-image: /* ... */ } 
/* ... etc. */ 

... in grado di eliminare un gran numero di richieste HTTP, a costo di complessiva Scarica dimensioni, leggibilità e una maggiore probabilità che una modifica errata possa rendere l'URI privo di senso (e difficile da risolvere).

Un metodo alternativo per ottenere lo stesso risultato per le immagini è l'uso di CSS sprites.

2. Incorporare contenuti in un unico file

Un dato URI può essere utilizzato per contenere tutte le risorse necessarie per visualizzare correttamente una pagina in un unico documento. Questo può essere utile ad es. un file README distribuito insieme a un pezzo di software. In teoria, gli URI di dati potrebbero anche essere utilizzati come alternativa all'uso di allegati per incorporare le risorse nell'email HTML, ma in pratica il supporto client per gli URI di dati è too unreliable perché questa sia una tecnica utile.

3. Come evitare gli avvertimenti del browser

Alcuni browser visualizzano un avviso se una pagina contiene contenuti servito su una miscela di HTTP e HTTPS. Se il tuo server è configurato in modo tale che i contenuti statici come le immagini siano tipicamente serviti via HTTP, ma il contenuto dinamico viene servito su HTTPS, incorporare quel contenuto statico con un URI di dati è una soluzione possibile.

Answer 2

In aggiunta alla risposta precedente (che è un ottimo riassunto), una cosa che ho usato per questo ultimamente sono i caratteri. Se ho bisogno di usare solo un piccolo sottoinsieme di caratteri da un font (per esempio, un font di design-y per un logo, o un'icona speciale di dingbat bullet), posso codificare solo i caratteri che mi servono in una dichiarazione CSS @ font-face e non far scaricare all'utente l'intero file di font.

Per esempio, se io voglio solo il diavolo (d) e Angel (e) affronta da Eggfaces (http://www.dingbatdepot.com/details/EggfacesTFB), quindi posso usare strumento generatore di webfont di FontSquirrel (http://www.fontsquirrel.com/tools/webfont-generator) per creare qualcosa di simile:

@font-face { 
    font-family: 'eggfaces'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

Vedere questo tipo di violino per un esempio: http://jsfiddle.net/vuuVh/