Conversión automática de imágenes a Data URIs

En algunas ocasiones puede resultar interesante utilizar Data URis para incluir las imágenes dentro de una CSS o el propio HTML. Con esto lo que ganamos es reducir el número de peticiones al servidor.

Es decir, en lugar de ponerlo de la siguiente manera:

<img src="image.jpg">

Lo podemos poner:

<img alt="" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/..." />

En estos artículos explica con más detalle la técnica:

• Como poner imagenes en correos o paginas sin usar etiquetas de img o attachments.
• CSSEmbed, conversión automática de imágenes a Data URIs.

Y aquí 2 herramientas online para realizar este conversión.

• Image to base64 converter.
• Image to Data URI convertor.

Y aquí otra para utilizarlo en local o desde aplicaciones Java.

• CSSEmbed

Esta técnica suele aumentar el tamaño en un 30%, pero se compensa si lo metemos en un fichero cacheable (css, html) y ademas lo comprimimos con gzip.

Debemos tener en cuenta:

• Que esta técnica se utiliza para imágenes pequeñas ya que hay una limitación de tamaño (en el IE8 están limitadas a 32K).
• Y que en versiones inferiores al IE8 no es soportado. En estos casos se pueden utilizar en MHTML. La aplicación CSSEmbed que hemos recomendado antes soporta esta opción.

En definitiva, la principal ventaja es que reducimos el número de peticiones al servidor.