El 01.19.09, en Optimización mediante CSS, por Pedro CM
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
Por ahora hay 4 comentarios ¿Quieres opinar?
Pero entonces necesito definir en el CSS el tamaño del image trasparente?
Por que si no sería sin tamaño o como?
@Toño O no hace falta definir el tamaño ya que estamos usando la imagen para realizar CSS Sprites.
Mmm como? pero que no el fondo no reescala la imagen o el elemento original?
Mejor de rato lo pruebo.