Carga más rápido tus imágenes gracias a CSS Sprites

Carga más rápido tus imágenes gracias a CSS Sprites

carga-imagenes-css

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:

grup1

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

Autor de CSSBlog ES

Post relacionados


  • Toño O
    Mmm como? pero que no el fondo no reescala la imagen o el elemento original?

    Mejor de rato lo pruebo.
  • CSSBlog
    @Toño O no hace falta definir el tamaño ya que estamos usando la imagen para realizar CSS Sprites.
  • Toño O
    Por que si no sería sin tamaño o como?
  • Toño O
    Pero entonces necesito definir en el CSS el tamaño del image trasparente?

Get Adobe Flash playerPlugin by wpburn.com wordpress themes