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 que nos va a ser de mucha utilidad: 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 Keep Alive. 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 derecha de éste texto que he llamado — de forma cutre — icon-set.gif reune esos cuatro iconos con el espacio justo… 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 keep alive minimiza el número de peticiones seguiremos contando con la ventaja de que, se use o no keep alive, 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.

Si antes llamaba a una imagen de esta manera:

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.

2. 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 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.

11 Comentarios (feed)

1. Dondado nos comenta:
   

   Gracias, estos truquillos siempre están bien para ir reduciendo poco a poco el peso de las webs

   Domingo, 2 de Septiembre/2007 @ 0:20

2. IRCarren nos comenta:
   

   Muy interesante… este tipo de posts me encantan.

   Lo aplicaré en cuanto tenga tiempo.

   Domingo, 2 de Septiembre/2007 @ 3:21

3. IRCarren nos comenta:
   

   Mirando mas información sobre este tema he visto que lo aplican algunos themes de wordpress. Lo aplican las grandes páginas con muchas visitas?

   En las imagenes que me he bajado de algunas páginas (con trafico importante) no se muestran en mosaico por lo que no lo deben aplicar esta tecnica

   ¿Acaso no les sale a cuenta?

   Domingo, 2 de Septiembre/2007 @ 4:03

4. Armonth nos comenta:
   

   IRCarren el motivo puede ser simplemente pereza o desconocimiento. Además lo que le preocupa a mucha gente es el ancho de banda cuando a otros (como a mí) es lo que menos nos preocupa.

   La técnica es interesante porque sirve para ahorrar peticiones, lo cual no significa siempre una mejora de rendimiento pero es lo primero que te aconsejan en las guías de rendimiento y ahorrar peticiones sin perder funcionalidad siempre es interesante.

   A nivel de servidor no se notará salvo en entornos ya de por sí saturados lo que sí mejora SIEMPRE es la sensación de velocidad. Imagina esos themes en WordPress que cargan 30 o más iconos distintos uno a uno e imagina ahora que aparezcan en pantalla todos por descargar una imagen en lugar de esperar a que bajen 30.

   Para hacerte una idea: en SigT al hacer esto con los 4 iconos la “sensación” de mayor velocidad se nota poco en el usuario y nada en el servidor: solo bajamos 3 hits por página y vale, a final de mes los 1.6KB serán seguramente unos 300MB de ancho de banda ahorrado y puede que llegue al medio millón de “hits” menos (hit = cualquier fichero, sólo al ver la portada ya son 15 hits). Pero eso a nivel global de la página “no es nada”.

   Pero sin embargo, si mi página cargase 30 imágenes/iconos por página como la de varios conocidos seguramente se notase mucho más. También sirve para “jugar” con imágenes reemplazables y eventos :hover.

   Lo dicho: sus motivos tendrán para no hacerlo, pero dudo que sea por problemas al hacerlo (funciona hasta en Internet Explorer 6 también conocido como “si te interesa algo de CSS, nosotros no lo soportamos”).

   Domingo, 2 de Septiembre/2007 @ 5:07

5. j_aroche nos comenta:
   

   El único problema que le veo es cuando el alto del elemento es variable, al subir el tamaño de la letra verás los demás iconos jeje. Yo he visto esta técnica cuando usan una imagen para :hover y :active además del estado normal.

   Domingo, 2 de Septiembre/2007 @ 6:59

6. Armonth nos comenta:
   

   j_aroche no lo he mirado en profundidad ya que para los ejemplos que recomiendo su uso (principalmente decoración y/o parte del diseño) no suele pasar eso.

   Pero tengo entendido que con un text-ident: -9999px (o algo así, ya digo que no lo sé seguro) se puede corregir el comportamiento que tú dices :-)…

   Domingo, 2 de Septiembre/2007 @ 7:55

7. InKiLiNo nos comenta:
   

   Pues a mi me va a venir de perlas, ya que hago muchas peticiones, lo malo es ver cuando tengo un ratillo para implementarlo :P

   Domingo, 2 de Septiembre/2007 @ 12:08

8. Xavi Ivars nos comenta:
   

   Me ha encantado el comentario. Voy a aplicarlo en mis proyectos de ahora en adelante. Saludos!

   Lunes, 3 de Septiembre/2007 @ 0:26

9. Manz nos comenta:
   

   Yo utilizo desde hace bastante tiempo una técnica similar que no sólo ahorra peticiones, sino que además simula el clásico efecto de rollover.

   Simplemente se basa en crear una de las imagenes idéntica a la otra, con ligeros cambios (blanco y negro o jugar con colores, que suele quedar bastante bien) y combinarla con el hover CSS (usando un enlace, para que sea compatible con IE también).

   Genial el post.

   Saludos,

   Lunes, 3 de Septiembre/2007 @ 1:42

10. Daniel G. Blázquez nos comenta:
    

    Yo la venía utilizando con los fondos. En vez de tener varias imágenes, lo únificaba en un sólo fondo más grande (siempre sopesando tamaño de la imagen/peticiones). Aunque no lo había usado en iconos o botones :-O

    La pega, como comentan más arriba es cuando tienes configurado el texto a un tamaño mayor, bien desde el propio navegador (como en el Firefox) o también desde la propio configuración del SO (este es mi caso, como estoy medio cegato el texto por defecto suele aparecer más grande). Éste es el resultado de tu página.

    Una solución sería dejar más separación entre los iconos. En PNG, estos espacios vacios o de color plano apenas aumentan el tamaño del fichero, incluso con imágenes muy grandes (y si usas el optimizador de png’s “PNGOUT” mucho mejor).

    Sábado, 13 de Octubre/2007 @ 2:41

11. zetman nos comenta:
    

    Si hay imágenes múltiples y de tamaños variados, que es mejor utilizar para disminuir la cantidad de peticiones en el css?, he andado tratando de mejorar esto, alguna recomendación?, saludos

    Sábado, 22 de Marzo/2008 @ 3:49

No seas tímido, da tu opinión