Sprites CSS, Qué son y para qué sirven.
En la mayorÃa de páginas web normales, la mayor parte del tiempo se dedica a la descarga de las imágenes. Por tanto, aunque los mayores esfuerzos siempre se centran en reducir el tiempo de generación dinámica de las páginas, se conseguirÃa más y con menos esfuerzo si se mejora la descarga de las imágenes.
La idea para mejorar el rendimiento de una página que descarga por ejemplo 15 imágenes consiste en crear una única imagen grande que incluya las 15 imágenes individuales y utilizar las propiedades CSS de las imágenes de fondo para mostrar cada imagen. Esta técnica se presentó en el artÃculo CSS Sprites: Image Slicing’s Kiss of Death y desde entonces se conoce con el nombre de sprites CSS.
Esta misma metodologÃa la implementan yahoo, google, youtube y muchos otros. El ejemplo que sigue ilustra la implementación de Sprites.
La carga de 100 imágenes, tardo aproximadamente 4,53 segundos. VER
Por otro lado, la carga de 1 sola imagen y reubicando las imágenes tardó sólo 0,95 segundos. VER
Ejemplo Práctico:
Para entenderlo mejor he creado un ejemplo. Desde el sitio CSS Sprites Generator podemos cargar imágenes o iconos y automáticamente se crea una sola imagen, dándonos las posiciones (background) de los mismos, esta Web es muy útil y nos ayuda un montón:
y su respectivo background que nos entrega la misma Web :
background-position: -9px -9px; background-position: -9px -45px; background-position: -9px -81px; background-position: -9px -117px; background-position: -9px -153px; background-position: -9px -189px;
Ahora la tarea mas tediosa ya no esta más, solo nos falta Armar el css.
.admi{ background:url(sprite.png) -9px -9px no-repeat; padding-left: 18px;}
.add{ background:url(sprite.png) -9px -45px no-repeat; padding-left: 18px;}
.appl{ background:url(sprite.png) -9px -81px no-repeat; padding-left: 18px;}
.abaj{ background:url(sprite.png) -9px -117px no-repeat; padding-left: 18px;}
.izqu{ background:url(sprite.png) -9px -153px no-repeat; padding-left: 18px;}
.diag{ background:url(sprite.png) -9px -189px no-repeat; padding-left: 18px;}
y el HTML:
<a class="admi" href="#">Signo</a> | <a class="add" href="#">Agregar</a> | <a class="appl" href="#">Apple</a> | <a class="abaj" href="#">Abajo</a> | <a class="izqu" href="#">Izquierda</a> | <a class="diag" href="#">Diagonal</a>
Ver el Ejemplo funcionando. Link
Descargar ejemplo Link
Saludos promero.
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscrÃbes a mi feed y obtienes los artÃculos como este enviados automáticamente cada dÃa hacia tu lector de feeds.
Trackbacks & Pingbacks
Comentarios
Deja un comentario
Saltos de lÃnea automáticos, la dirección de email nunca será publicada, HTML permitido: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
podrias ahorrar mas codigo si declaras que dicha etiqueta que este dentro de un contenedor X… tenga el mismo fondo y padding… y ya luego… variar el background-position y ya… para no repetir los mismos valores una y otra vez…
Hola Alex:
Tenes razón lo que decÃs, la cosa es que está planteado de esta forma para que quede más claro el ejemplo
Saludos y gracias por colaborar
promero