Archivo de la etiqueta: web tool

Sprite, todas tus imágenes en una

¿Que es un Sprite?

No, no es la bebida secundaria de esa empresa de la botella curvilinea de color negro con rojo 😉

Es una técnica que se usa en el diseño web para agrupar todas las imágenes, íconos sobre todo, necesarias para el montaje del diseño.

Agrupar imágenes e íconos en un solo archivo facilita al navegador la carga de la web, ya que solo tiene que traer una imagen y con esa imagen se compone todo. El secreto está en la localización de esta imagen y el uso del atributo de css background-position para mostrar un ícono u otro. Pero mejor un par de ejemplos:

Facebook Sprites Images:

facebook-sprite2-image-2014-12 facebook-sprite-image-2014-12

 

 

 

 

 

 

 

 
Por lo general la composición de estas imágenes se hace usando algún programa de edición gráfica como puede ser Photoshop, pero esto implica que si tienes tu diseño listo debas extraer los íconos y elementos que quieras usar en tu sprite para colocarlos dentro de un solo archivo de imagen. Pero para que hacer algo a mano si ahora contamos con servicios web que nos pueden ayudar en esa tarea:

 

Spritepad de wearkiss.com

 

Sprite Cow - Generate CSS for sprite sheets
Sprite Cow