Uso de Sprites CSS

¿ Sabes lo que es un Sprite cuando hablamos de CSS?

Si alguna vez has tenido que maquetar o modificar ciertos aspectos visuales de una página web es probable que hayas oido hablar de Sprites. Básicamente se trata de una técnica CSS que aprovecha una sola imagen para mostrar múltiples imágenes a partir de ella dentro del sitio. Es decir, junta en la misma imagen aquellas que vayamos a mostrar en la web.

 

¿Para que sirve?

Mejoramos el rendimiento del sitio porque se hace sólo una petición HTTP en vez de que se pidan una por cada imagen. Si tenemos por ejemplo 50 imágenes pequeñas dentro del sitio, cuando un visitante abre la página se consultan en el servidor toda esta cantidad de imágenes. ¿No sería mejor que se pida solo una vez?. Pues es mejor, porque la imagen es cargada solo una vez por el navegador y el CSS (que actúa en el cliente y no en el servidor) se encarga de mapear la imagen.

 

¿Cómo podemos crear estos Sprites?

Pues simple, podemos unificar estas imágenes mediante algún programa de edición (ej: Photoshop). Lo que tendremo que hacer más tarde, será adaptar el CSS para que lo que muestre sea un fragmento de la imagen, en vez de la imagen completa (sólo la parte que nos interesa).

Pero si sólo pudieramos hacerlo de esta forma tan manual, este artículo no se encontraría aquí, en www.cuandoeltiempoteatrapa.es

 

Aplicaciones de Creación de Sprites

Existen numerosas aplicaciones web que nos ayudan a generar estos sprites. Estas aplicaciones no sólo nos crean la imagen unificando las que queramos sino que nos generan el código CSS que podemos usar; o al menos una base para que luego podamos adaptarla. Genial !

Algunas de las que he probado son:

SpritePad: Genial. A diferencia de otras tú situas las imagenes donde quieras para despues unificarlas.

InstantSprite: Sencilla y funcional.

CSS Sprite Generator: Hay que subir las imagenes en zip.

Otras: SpriteCow SpriteMe

 

Origen de los Sprites:

Si quieres conocer cómo surgieron los sprites y en base a qué problema, te recomiendo que te pases por http://web.ontuts.com/tutoriales/introduccion-comprension-y-utilizacion-de-los-css-sprites-parte-i/ y le eches un vistazo a su artículo, así como a otros que tiene. Muy recomendable.

 

¿Y tu? ¿usas Sprites?

 

Referencias:
Artículo basado en http://www.documentoweb.com/Guia/CSS/Sprites-CSS

http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249

http://web.ontuts.com/tutoriales/introduccion-comprension-y-utilizacion-de-los-css-sprites-parte-i/

 

Deja un comentario

Maximum 2 links per comment. Do not use BBCode.