Aprende a optimizar tus blogs para que sean los primeros en las busquedas

¿Qué es un CSS Sprite?
Es una imagen que incluye un conjunto de imágenes agrupadas, a cada una de ellas se accede mediante CSS con un desplazamiento respecto del borde superior izquierdo, en CSS sería (0,0), y sus dimensiones absolutas. Por lo que es una forma de agrupar imágenes que podemos usar de forma independiente.

¿Qué ventajas tiene su uso?

sprites-1Nos permite agrupar muchas imagenes e iconos pequeños de nuestra web (El pajarito de twitter, el logo de fb, el fondo del cuadrado de la parte superior, etc) que de otra forma los navegadores de nuestros visitantes tendrían que ir pidiendo una a una y al ser tan chicas tardarían más en hacer la petición que en descargarlas por lo que notaremos una mejora significativa del rendimiento con su uso.

 

Las webs más importantes del mundo, como Facebook o Google usan Sprites para la mayoría de sus imagenes e iconos.

¿Como puedo crear CSS Sprites?

La forma original de crear sprites era usando un programa de edición gráfica (Photoshop, gimp, etc) pero esto es un trabajo muy pesado, largo y algo complicado por lo que durante los últimos años han ido apareciendo diversos servicios que te ayudan significativamente con su creación, os voy a enseñar los más interesantes:

 

spritepad

-Spritepad: En esta página web puedes crear tus sprites en un par de minutos de forma sencilla. Solo tienes que arrastrar las imagenes a ella y ordenarlas como más te gusten; despues pulsando en Download se te descargará un png con el Sprite y el código CSS necesario para usarlo.

Además si te registras (gratis) podrás guardar todos los sprites que vayas creando en tu cuenta.

Pruebalo: http://spritepad.wearekiss.com/

 

-InstantSprite: En esta web el funcionamiento es muy similar, solo que un poco menos bonito y puede parecer un poco más complicado pero a cambio te alinea automáticamente las imágenes en el Sprite y tiene bastante más opciones que si te gusta trastear con el código tal vez te puedan interesar.

 

Pruebalo: http://instantsprite.com/

No hay comentarios
Escribir un comentario