Data URI mejor que CSS Sprites

Una de las cosas que más a bombo y platillo se nos ha intentado meter en la cabeza en los últimos tiempos es que era mejor usar los CSS Sprites que no un montón de imágenes. Y es cierto, es mejor lo primero que lo segundo… ¿pero es lo óptimo? No.

En alguna ocasión he hablado ligeramente sobre las peticiones HTTP y lo que afectan en cuanto a la velocidad de carga de un sitio; una de esas cosas que comenté en su momento fue la de usar los Data URI. Y es que el uso de los CSS Sprites está muy bien si hablamos de navegadores como Internet Explorer 6 o 7, pero desde que tenemos los Internet Explorer 8, Firefox 3 u Opera 9 podemos ir a por un nivel más.

Hoy en día es mucho más óptimo reducir el número de peticiones que no el hecho del tamaño de los elementos en sí. la velocidad de conexión media ha aumentado de tal forma que no es un problema que los ficheros ocupen mucho, sino que haya muchos ficheros distintos, y esto es lo que consiguen los Data URI. Este método básicamente permite insertar imágenes directamente en el código de ficheros CSS y HTML codificando los elementos en Base64.

Teniendo en cuenta los navegadores que dan soporte a los Data URI, tenemos una buena forma de actuar:

• Firefox 2+
• Opera 7.2+ (no más de 4.100 caracteres)
• Chrome
• Safari
• Internet Explorer 8+ (menor de 32 KB)

¿Y cómo es un Data URI? Pues algo tans encillo como esto:

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge
8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h
LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g
77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

Este elemento, convertido en un CSS podría ser algo tal que así:

.icono {
  background: url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS
  /7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AA
  ARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguW
  w6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) no-repeat;
}

Para aquellos que quieran automatizarlo, existen una opción en PHP que lo hace… algo tal que así:

<?php
echo base64_encode(file_get_contents("icono.gif"));
?>

Y ya tenemos más optimizadas las peticiones HTTP de nuestro sitio… menos peticiones, mayor velocidad (sobre todo teniendo en cuenta que los CSS se cachean si se organizan bien y se reducen también las peticiones para verificar imágenes actualizadas).