Minimizar las peticiones http en una web.

iconos

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:

Logo Google

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;

}

Paginación Google

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:

digg

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:

Yahoo

6 Responses to “Minimizar las peticiones http en una web.”

  1. Eudald dice:

    M’ha semblat molt enginyós!!!

    Edgar ets un CATACRAK!!!

  2. Edgar dice:

    La mateixa técnica tambe l’utilitzaba els skins del winamp i molts programes amb opció ha cambiar el aspecte gráfic.

  3. […] La mateixa técnica tambe l’utilitzaba els skins del winamp i molts programes amb opció ha… por Edgar hace 5 dí­as 17 horas […]

  4. Esta técnica se llama CSS sprite.

  5. […] otro día os hablaba de como reducir las peticiones http de una página web para reducir el tiempo de carga, estaba relacionado con las imágenes. Ahora nos centraremos en […]

  6. the dice:

    Howdy! Do you use Twitter? I’d like to follow you
    if that would be okay. I’m absolutely enjoying your blog and look forward to new updates.

    Also visit my site … the

Comentar

* * (no se publicará) ir al contenido