Que son los data:uri

Con data:URI ( definido por RFC 2397 ) podemos incluir pequeños elementos de datos en línea, como si fueran referenciados hacia una fuente externa. Los data:URI tienen la siguiente sintaxis:

data:[<mediatype>][;base64],<data>

El <mediatype> puede ser algo como image/png para una imagen de tipo .png. El <mediatype> es opcional, y si lo omitimos, el <mediatype> por defecto es text/plain. He aquí una lista con ejemplos de <mediatype>

Lo de base64 indica el tipo de codificación de los datos binarios. También es opcional. Podemos no especificarlo, como en este ejemplo: data:text/html,<h1>Hola%20mundo!</h1>, donde los datos son textuales.

Finalmente <data> representa los datos codificados ( o no ) en base64.

Si esto suena a chino, sería mejor ver algunos ejemplos.

En el HTML

Podemos reemplazar el valor del atributo src de una imagen con data:URI: punto rojo

En el CSS

Para imágenes de fondo también podemos utilizar data:URI:


.data_uri {
	display:inline-block;
 	padding-left : 5px;
    width:25px;
    height:5px;
 	background-image : 
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==");
 	background-repeat : repeat-x;
	background-position:center bottom;
 }

En jQuery

En jQuery podemos utilizar data:URI con las funciones .insertBefore() o .insertAfter():

$( '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" />' ).insertBefore(".algo" );

Como crear data:URI

A continuación algunos enlaces útiles para transformar una imagen en data:URI. (Es recomendable que las imágenes sean pequeñas.)

URI kitchen - la cocina URI
http://websemantics.co.uk/ Solo imágenes tipo .png, jpg, o gif. Tamaño máximo: 32768 Bytes. Tamaño máximo de data:URI permitido en IE8 es de 32KB, o sea 32768 Bytes.
http://jpillora.com Crea data:URI por transferencia de archivos con "arrastrar y soltar"

O para los más atrevidos y conocedores de PHP, una función para transformar un fichero $file en data:URI.


function data_uri ( $file ) {
    $mime = mime_content_type ( $file ) ;
    $contents = file_get_contents ( $file ) ;
    $base64 = base64_encode ( $contents ) ;
    return "data : $mime;base64,$base64" ;
 }

A continuación: cómo crear data:URI utilizando javaScript y canvas

w3.unpo<code>todo