Data URI: Generar imágenes con sólo código mediante data:image base64

Fecha: 24 / noviembre / 2011

Una manera avanzada de generar una imagen en Internet es que en lugar de subirla al server y linkearla en tu HTML, la generes directamente en tu CSS con puro código de base64.

Por ejemplo este libro azul: libro azul fue generado con este código:

<img src="data:image/png;base64,iV BORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHd hcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZO/alVBEMZ/5+TemxAbFUUskqAoSOJNp4KC 4AsoPoGFIHY+gA+jiJXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzONJK7fe7Ai6algA 3FZCAmQqEF/dnihpK1v7x7dPw0woF64Izg3Xl5s1n9uIe0lQYUFCtjc+sVuEqHBKfpVAXB1vLzQXFtdYP HkGFUCoahVo1Y/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFGJze4cuZfav3gLNYDTg7Pklzpw 4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspJW5ePFPlV3VI 4uHbz5S5IQfy/yooHngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szHEIrogkiguwN2acCoJhjn ZGKYx4Ujz5WOA2YD1BMU+BBSYVUvNpxkXuIuWgbsOxTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkhkcywZqQ QlAjdRwiml7wU5xWLaL1AvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLl1ZR0+AuzEX0UX035mxIkLq0dhD w5vXL97fr5O3rfwQHJhPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUVORK5CYII=" alt="libro azul" />

Cada pixel de la imagen se dibuja con un montón de letras.

El formato para este código es:

data:image/[tipo de imagen];base64,[datos]

[tipo de imagen] = jpg, png, gif
[datos] = montón de letras y signos (del diccionario de 64).

Ventajas

  • Es una llamada menos al servidor, porque si pones esta imagen como fondo en tu diseño dentro de tu código CSS, ya no llamas a un archivo propio de imagen. (son menos peticiones HTTP)
  • Si lo usas en tu CSS, la imagen se queda en el caché (pues es parte del CSS cacheado). Es muy útil para backgrounds o adornos de listas (imágenes repetitivas en una web).
  • Evitas el hotlinkeo. No hay ningún archivo que hotlinkear en el src del tag img.

Desventajas

  • Tu archivo CSS crece en tamaño, mínimo unos 4KB a 6 KB según la cantidad de código que generes, y a veces es para sustituir imágenes png de sólo 1.5KB.
  • Si necesitas modificar algo, primero modificas la imagen para luego volver a generar todo el código.
  • El esquema data: sólo funciona en los navegadores modernos que se preocupan de los estándares (Firefox, Safari y Opera). Internet Explorer 6 y 7 no son capaces de procesar este esquema. Internet Explorer 8 asegura que permitirá utilizar data:, pero solamente imágenes del CSS y no en un HTML. Opera permite unos 4.000 bytes de datos, mientras que Firefox permite hasta 100.000 bytes por cada data:.

Como generar todo el código base64 a partir de una imagen normal

Hay muchas maneras, mencionaré solo un par, una es usando esta función PHP:

$bytesCodificados = base64_encode(file_get_contents("/ruta/hasta/la/imagen.png"));

Otra es visitando una de estas webs que te generan el código una vez que subes la imagen a transformar:

data:image base64

____
Via librosweb.es/css_avanzado/

DanielSemperAutor: Daniel Semper, fanático de la tecnología y sus usos sociales, cinéfilo geek, al menos veo una película por semana, innovador en Front-End y activo lector de comics. En mis tiempos libres soy ingeniero y estudio una maestría en Sidney en la universidad de UTS. Me puedes contactar en: twitter, Google Plus.
e-mail: hola @ danielsemper.com
  • Ultra

    Excelente. El código es poder!

  • Nestor C. Pool

    Interesante desconocia esto y esta sumamente interesante… Gracias Daniel por el aporte!

  • Manuel

    Creo que de esta manera no habría que colocar los datos de la imagen en la hoja de estilo. Metes la imagen en una variable y ya está…que digo yo.

    :)

    function image(){
    var book = “data:image/png;base64,iV BORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHd hcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZO/alVBEMZ/5+TemxAbFUUskqAoSOJNp4KC 4AsoPoGFIHY+gA+jiJXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzONJK7fe7Ai6algA 3FZCAmQqEF/dnihpK1v7x7dPw0woF64Izg3Xl5s1n9uIe0lQYUFCtjc+sVuEqHBKfpVAXB1vLzQXFtdYP HkGFUCoahVo1Y/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFGJze4cuZfav3gLNYDTg7Pklzpw 4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspJW5ePFPlV3VI 4uHbz5S5IQfy/yooHngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szHEIrogkiguwN2acCoJhjn ZGKYx4Ujz5WOA2YD1BMU+BBSYVUvNpxkXuIuWgbsOxTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkhkcywZqQ QlAjdRwiml7wU5xWLaL1AvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLl1ZR0+AuzEX0UX035mxIkLq0dhD w5vXL97fr5O3rfwQHJhPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUVORK5CYII”;
    document.getElementById(“image”).setAttribute(“src”,book);
    }
    image();