En algunes ocasions és interessant servir un únic document amb les imatges integrades. Per exemple, quan es vol compartir un CSS a Stylish és prà ctic poder usar imatges i no haver-les d'allotjar en un servidor.
La forma més còmode és codificar les imatge en base64 i usar una URN al codi. Per exemple, una imatge del logo en png d'aquest lloc es representaria amb:
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAA90lEQVR42mL8//8/w0ACgABiYhhgABBAA+4AgAAacAcABNCAOwAggAbcAQABNOAOAAggFmyC6enptMibDTNnzmxEFwQIoAEPAYAAGnAHAAQQC67gooFdB7EJAgQQLgc00isEAAJowKMAIIAG3AEAAYQrCvbTwK6FQLwAXRAggHA5wIEGDjiATRAggAY8CgACiIUINQ+gmBxAMCQBAogYByygIFsSLNIBAmjAowAggAbcAQABxEKNeKQEAAQQsQ6gmSMAAmjAowAggAbcAQABxDjQHROAABrwEAAIoAF3AEAADbgDAAJowB0AEEAD7gCAABpwBwAEGACShRTtHO+CywAAAABJRU5ErkJggg==");
El mòdul de Perl MIME::Base64 permet codificar/decodificar en base64 de manera que fent un senzill script he muntat un bundle de TextMate que transforma una imatge referenciada en un CSS o en un X/HTML a base64. Sempre que la referència sigui relativa.
El bundle: Convert img to base64.tmCommand
Comentaris
Comentat per Oriol el 01/02/08
Un cas de quan és útil emprar aquesta tècnica és per optimitzar el nombre de peticions per descarregar un site. No fa massa vaig estar fent proves amb un HTML senzill. Mireu (amb Firebug mateix) el temps de descà rrega d'aquesta pà gina: http://oriolmorell.cat/exemples/imginline/normal.html (934 bytes, 297ms) I compareu-lo amb aquesta: http://oriolmorell.cat/exemples/imginline/inline.html (981 bytes, 16 ms) A menys peticions HTTP menor temps de descà rrega, ara bé on està la mida justa?
Comentat per are el 01/02/08
L'únic inconvenient que hi veig és que per Internet Explorer 6 no està implementat, aixà que fa de mal fer per un client.
Comentat per Oriol el 01/02/08
Cert, una llà stima haver de pensar encara en aquest programari que s'autoanomena 'navegador'.