Cómo ahorrar peticiones HTTP con las imágenes y CSS

Optimizando varios puntos de SigT me encuentro con que podemos recurrir a una técnica conocida como Map Sprites que nos va a ser de mucha. Esto traducido a nuestro idioma significa: juntar imágenes para ahorrar peticiones HTTP.

La idea básica la tomo de WebSiteOptimization donde nos dan una premisa simple:

• Una imagen = una petición HTTP.
• Dos imágenes = dos peticiones HTTP.
• Las dos imágenes juntadas en una = una petición HTTP.

Si bien lo que nos recomienda el sitio es usar un mapa nosotros vamos a ser mucho más simples: CSS. Para ver las ventajas vamos a dar como ejemplo SigT antes y después.

Cada vez que se carga una página en SigT se realizan aproximadamente 18 peticiones HTTP (19 si contamos que he separado los hacks de Internet Explorer a un fichero hack-ie.css).

El número depende en parte de cada página, del número de imágenes a cargar, etcétera. Pero podemos decir que hay un número de imágenes fija que siempre se carga y el número de peticiones HTTP estará influenciado por todo esto y por el KeepAlive. Entre las imágenes de SigT destacan los iconos: 4 iconos (aunque podrían ser más) que significan:

• 4 peticiones HTTP (si no se usa Keep Alive).
• 3260 bytes (569 bytes, 620, 1050 y 1021).

La imagen que tenemos a la izquierda de este texto que he llamado, de forma cutre, icon-set.png resune esos cuatro iconos con el espacio justo y en 1.6KB. La idea es simple: juntar las imágenes (sobretodo recomendable con las pequeñas que generan peticiones pero envían muy pocos datos) en una sola y luego elegir mediante CSS la que utilizar.

¿Ventajas y desventajas?

Las ventajas son:

• Obtenemos una reducción del tamaño de 3.2KB a 1.6KB.
• Una imagen (una petición) que actúa como 4 imágenes (o las que queramos).
• Reducción importante de peticiones HTTP si es usado correctamente.
• Sensación de mayor rapidez: cuando una conexión va lenta si ves aparecer varias imágenes de golpe (aunque en realidad sólo sea una y el tamaño sea igual a su equivalente en imágenes separadas) parecerá que es más rápido.

Si bien el uso de KeepAlive minimiza el número de peticiones seguiremos contando con la ventaja de que, se use o no KeepAlive, el número de peticiones no será superior al de objectos que conforma la web por lo que si tenemos 100 iconos en portada... ejem...

Las desventajas son:

• Hay que copiar y pegar las imágenes además de intentar que no sobre mucho "espacio en blanco".
• Cada vez que añadamos una imagen tendremos que rehacer el "set" aunque esto lo podemos solucionar conservando las originales y, sobretodo, añadiendo espacio en blanco.

Compatibilidad

No es una técnica nueva y el uso de CSS es muy básico, funciona (salvo alguno que no conozca) en todos los navegadores que soportan CSS.

Vamos al lío

Cada uno de los cuatro iconos hasta ahora era cargado mediante la propiedad background: de CSS y eso no va a cambiar.

<!-- XHTML: -->
<p class="fecha">Código de la fecha</p>

<!-- CSS: -->
.fecha {
  background: url(img/fecha.gif) no-repeat left center;
}

Ahora lo haremos igual pero el CSS será:

.fecha {   
  background: url(img/icon-set.gif) 0 -16px no-repeat;   
  height: 16px; width: 16px;   
}

Solamente hace falta saber:

1. El ancho y alto de cada imagen de forma individual (por ejemplo con el Photoshop/Gimp puedes seleccionar el trozo de imagen como si fueras a rodearlo y verás el tamaño).

Nota: el ancho si son imágenes puestas en vertical (no hay una imagen a la derecha de otra imagen, ni espacio en blanco) no es necesario.

1. La posición del trozo de imagen que nos interesa.

El segundo punto puede ser el más complejo, pero en realidad es fácil: el primer número es la anchura donde empezar y el segundo la altura, en realidad es una cuadrícula X/Y.

Para hacerlo fácil: con el Gimp y la herramienta de selección de rectángulos id con el puntero del ratón a la esquina arriba-izquierda de donde empieza la parte de imagen que nos interesa, abajo a izquierda nos pondrá dónde está situado el puntero. Si pone "0,13" significa que la imagen empieza en el 13º pixel en lo que es altura por lo que en el CSS pondremos "0 -13px".

Si os fijáis, la imagen que corresponde al icono de "trackback" (el segundo de arriba a abajo) empieza en el 13º pixel. En realidad es muy fácil y cuesta más de explicar que de hacerlo.

Y con eso las peticiones bajan de 18 a 15 pudiendo añadir cualquier otra imagen al set para reducir peticiones, por ejemplo el logo.