martes, 18 de enero de 2011

Imágenes con data URI y SmushIt

La duda que planteo es si es mejor un data URI o CSS Sprites. La idea de los CSS Sprites es usar una única imagen que englobe todas las demás para evitar el volumen a la hora de cargar la página. Y no es mala idea solo necesitas una imagen de aproximadamente ejem: 120x120 bien optimizada y de calidad aceptable y con eso vas colocando los trozos del puzzle en los diferentes huecos de la web. Al comenzar por muy optimizado que sea el método de los Sprites, surgen problemas  como que sería muchísimo mas cómodo tener cada imagen independiente de la otra he ir cargándolas según se necesite. (Por desgracia aumentaríamos el numero de peticiones)

Un ejemplo muy poco común: pensar que si pretendemos cargar en una CSS Sprites una imagen principal de tamaño muy considerable aumentamos significativamente la carga de esta, por lo tanto no solucionamos nada. 
He dicho que es un ejemplo muy poco común ya que las CSS Sprites se usan mas para elementos pequeños como puede ser los botones, iconos... en general elementos que pueden repetirse innumerable numero de veces y no nos interesa realizar una petición cada vez que los necesitamos mostrar en pantalla.

En mi opinión este método esta muy bien si queremos minimizar el volumen de imágenes a cargar. Pero pasando a otro nivel tenemos las imágenes con data URI que si cuidamos el volumen con una aplicación como ysmush.it la cual nos permite optimizar lo máximo posible las imágenes, evitando la carga innecesaria de datos. Con URI podemos reducir lo que mas nos interesa el numero de peticiones. De esta forma tenemos la posibilidad de usar ficheros independientes, pudiéndolos insertar directamente en CSS, HTML codificando los elementos en Base64.

Solo habría que tener en cuenta que data URI solo da soporte en navegadores como Firefox 2+, Opera 7.2+(sin superar los 4.100 caracteres), Chrome, Safari y Internet Explorer 8+(menor de 32KB).

Ejemplos de como usar Data URI, el ejemplo está basado en la imagen de está entrada. He codificado la imagen en Base64 y nos quedaría de la siguiente forma.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAABEOElEQVR42u29ebRl11kn9vv23me485vfq1KVatAsVUnygAcMGGIHM3aaDm7o7pDuDitAEhpICIQhtGTGXqzETZIV3LCSpgdIt+00gUU3YTIWtmVkybIs25IlVaGx5jfe+Qx77y9/7H3OPfe9+6pKsyroah3dV+eed9+9Z//2N/y+3/42MTPefPz1fYg3b8GbAHjz8SYA...

incluir la imagen en HTML
<img width="128" height="128" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAABEOElEQVR42u29ebRl11kn9vv23me485vfq1KVatAsVUnygAcMGGIHM3aaDm7o7pDuDitAEhpICIQhtGTGXqzETZIV3LCSpgdIt+00gUU3YTIWtmVkybIs25IlVaGx5jfe+Qx77y9/7H3OPfe9+6pKsyroah3dV+eed9+9Z//2N/y+3/42MTPefPz1fYg3b8GbAHjz8SYA..." />

incluir la imagen en una CSS de fondo.
{
width: 128px;
height: 128px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAABEOElEQVR42u29ebRl11kn9vv23me485vfq1KVatAsVUnygAcMGGIHM3aaDm7o7pDuDitAEhpICIQhtGTGXqzETZIV3LCSpgdIt+00gUU3YTIWtmVkybIs25IlVaGx5jfe+Qx77y9/7H3OPfe9+6pKsyroah3dV+eed9+9Z//2N/y+3/42MTPefPz1fYg3b8GbAHjz8SYA...)
}
Podeis realizar ejemplos en la siguiente url image to data uri convertor

Esto parece un poco costoso ya que por cada imagen habría que codificarla. Os paso un método que nos ayudaría a mecanizar este proceso en PHP
<?php
echo base64_encode(file_get_contents("icono.gif"));
?>

Nos mostraría la codificación lista para usar. Con esto tendríamos menos peticiones en nuestra web y por lo tanto mayor velocidad. Sabiendo que las CSS se cachean también reducimos las peticiones para comprobar imágenes actualizadas.