Data: URI
Incorporare immagini e oggetti in un URL senza collegamenti a risorse esterne.
Il Data: URI è un sistema molto comodo per incorporare oggetti di piccole dimensioni in un URL, piuttosto di creare un collegamento ad una risorsa esterna. In sostanza l'URI contiene l'oggetto codificato. È supportato dai maggiori browser in circolazione. L'utilizzo più comune al giorno d'oggi è nell'integrazione di elementi grafici negli script di Greasemonkey. Utilizzando i Data: URI si può evitare di dover memorizzare su un server centrale i file, incorporandoli invece direttamente nello script.
In pratica cosa cambia?
1 Comunemente siamo abituati ad integrare un'elemento grafico facendo uso del tag immagine ed inserendo l'indirizzo del file che vogliamo, come nell'esempio qui a lato:
<img src="posizione_img.jpg" />
2 Questo significa che si dovrebbe accedere al server ogni qualvolta che il sistema avesse bisogno dell'immagine. Altro fattore importante è che in caso il server non fosse disponibile, per qualsiasi motivo, la richiesta non potrebbe esser soddisfatta mandando il sistema in errore. Con data: URI aggiriamo il problema.
Convertendo un'immagine con codifica in base 64, realizziamo il codice che inseriremo nel tag immagine.
Per realizzare il codice codificato potete usare questo tool di codifica Data: URI ed il risultato sarà come questo che vedete a fianco:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWsAAAFrCAIAAACYJD8vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0QwOTlENjg1RkUzMTFFMUFBQ0FGN...AElFTkSuQmCC" />
3 Il risultato dell'immagine condificata applicata nel tag immagine correttamente sarà il rendering perfetto dell'immagine come potete vedere nell'esempio.
