CSSBlog ES – ¡CSS 100%! -

Se puede aligerar la carga de las imágenes, poniendo todas en una y llamandolas mediante la propiedad CSS background.

La esencia trata de pasar esas imágenes a imágenes de fondo mediante CSS (alineadas de arriba a abajo, todas ocupando el mismo tamaño), y así poder presentar una u otra dependiendo de su ubicación. El truco es muy sencillo y sería así:

Código CSS a implementar:

#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 a implementar:

<img src="imagen_transparente.gif" id="primer_icono"/>

<img src="imagen_transparente.gif" id="segundo_icono"/>

<img src="imagen_transparente.gif" id="tercer_icono"/>

Una imagen que se puede usar sería esta:

Finalmente, un ejemplo para descargar:

Ejemplo de su funcionamiento sobre hacer más rápida la carga de tus imágenes con CSS

Vía| Viciao2k3