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:

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

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

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.

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

Un comentario en “Conversión automática de imágenes a Data URIs

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s