Minimizar las peticiones http en una web.

La gran inquietud de los desarrolladores webs es el tiempo de carga de la página web. Muchas veces no basta con reducir la calidad de las imágenes, ya que el tiempo de hacer una petición también es caro. La idea es juntar todas las imágenes que se repiten durante las paginas de tu sitio en una sola, por ejemplo iconos, logo, flechas..

Veamos la imagen que utiliza Google en sus resultados:

Google aparentemente parece que esta cargando 9 imágenes diferentes en un resultado de una búsqueda, pero en realidad carga una única imagen con todas las imágenes incrustadas en la misma. Esto reduce las peticiones http de 9 a 1, conseguir reducir tantas peticiones en una página web puede ser muy beneficioso.

Para posicionar las imágenes y solo mostrar el trozo de imagen que te interesa deberás de utilizar CSS con backgroun-position.

.estilo {

background-image: url(http…);
width:10px;
height:10px;
background-position:-60px 0pt;

}

Como podemos observar en la imagen de arriba, podriamos pensar que hay 5 imágenes diferentes, pero solo es una. Las imagenes las recorta con css.

Otros ejemplos:

Digg.com:

Si os fijáis, podréis ver la cantidad de iconitos y formas que ha incrustado Digg en su web.

La mayoría de iconos que se ven, parecen ser de fondos de inputs.

Yahoo.com:

Miércoles, junio 18th, 2008 a las 2008-06-18T15:05:33+00:000000003330200806 en General. Both comments and pings are currently closed.