Expermiento CSS para cargar más rápido
La idea consiste en agrupar todas las imagenes que tengan un tamaño parecido, para reducir el número de llamadas HTTP.
Por ejemplo, los iconos de la siguiente imagen tienen un tamaño aproximado de 16×16 pixeles:
Código CSS:
#primer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 0;
}
#segundo_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -16px;
}
#tercer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -32px;
}
Código HTML:
<img src=”imagen_transparente.gif” id=”primer_icono”/>
<img src=”imagen_transparente.gif” id=”segundo_icono”/>
<img src=”imagen_transparente.gif” id=”tercer_icono”/>
Resultado:
Lo podéis ver en GoTube
Descargar ejemplo:
Curiosidad:
Puede que con este ejemplo al tener pocos iconos no se noté la diferencia en el tiempo de carga, el ejemplo es para enseñar la técnica, pero si se nota con agrupaciones de muchos iconos.
La siguiente imagen se usa en GoTube:
Se nota mucho???
conozco este metodo hace tiempo, esta bueno porque da la sensación de que tarda menos al cargar todos los iconos,.
tendrias que usarlo tambien en el logo de nbspdesigns, en el “invitame un helado” y en la imagen que esta al lado del formulario para comentar, por cierto, donde tenes alojadas esas imagenes? cuando paso el puntero por alguna tarda unos 5 segundos hasta que muestra la otra :D…
y,… ¿Funcionará en todos los navegadores? Me da flojerilla probar, tenía tiempo buscando esto pero sin darle mucha importancia jeje
Esta técnica se llama “css sprite”, y realmente se nota muchísimo. Tarda el mismo tiempo bajarte 1 imagen agrupada con 20 imágenes que 2 sueltas.