La idea de Sprite con CSS es genial. Para aquellos que no saben acerca sprites en CSS, puede utilizar algunos de los sitio que vamos a poner a continuación. Pero primero vamos a ver las Ventaja y Desventajas de hacer
Ventajas del uso de sprites CSS
- Una imagen grande solo utiliza menos ancho de banda como comparar a varios más pequeños.
- Menos de imágenes == Menos peticiones http = más rápido de carga general
Desventaja
- La única desventaja del uso de los sprites es que no funciona de forma coherente en todos los navegadores como Internet Explorer , pero no en las ultimas versiones de los navegadores como Opera, Chrome y Firefox que trabajan bajo los estándares de la W3C.
Esta herramienta le permite cargar varios archivos y generar una salida de sprites de ellos. También le da el código CSS (el valor de background-position) para cada imagen en el sprite. Yo utilice varias veces CSS Sprite Generator y tuve muy buenos resultado funciona muy bien.
CSS Sprites también es muy bueno tenes la ventaja de ver como queda antes de implementarlo en tu sitio web. Ademas de poder generar efectos sobre las imágenes como poner en blanco y negro cuando pasas el mouse sobre la imagen, etc.. Permite subir multiples archivos que no supere los 5Kb por imagen.
Sitio Web Performace CSS Sprite Generador
Esto es lo mejor de todo en línea y fuera de línea del generador Sprite CSS. Te permite subir imágenes, ignorar las imágenes duplicadas, cambiar el tamaño de las imágenes , opción de salida de imágenes, etc
Esto es bastante simple pero potente herramienta de generación en línea CSS Sprites, le permite crear sencillos sprites CSS Imágenes
css sprites
Este generador le permite ignorar las imágenes duplicadas, cambiar el tamaño de las imágenes de origen, definir horizontal y vertical, definir color de fondo y la transparencia, asignar prefijos de clase CSS y otras cosas.
Esta herramienta le permite cargar una imagen y crear el código CSS para áreas seleccionadas del sprite.
Otra herramienta simple de CSS, te permite subir imágenes y crear el código CSS para el área seleccionada.
SpriteMe : Con un solo clic CSS sprites generador
Cuando se invoca, SpriteMe identifica automáticamente las imágenes posibles que se agrupan en un sprite, le da un clic a través de la creación de sprites csscoolrunnings.com y re-inserta el nuevo sprite en su sitio sobre la marcha para la prueba.
