Herramientas para hacer sprites de CSS

¿Hay alguna buena herramienta para hacer sprites css?

IDEALMENTE me gustaría darle un directorio de imágenes y un archivo .css existente que se refiere a esas imágenes y hacer que cree una imagen grande optimizada con todas las pequeñas imágenes Y cambie mi archivo .css para referirse a esas imágenes.

Por lo menos, me gustaría que tomara un directorio de imágenes y generara un gran sprite y el .css necesarios para usar cada uno como fondo.

¿Hay algún buen plugin de photoshop o aplicaciones completas para hacer esto?

Esto hará el 90% del trabajo para usted: http://spritegen.website-performance.org/ . Aún necesitará editar las reglas usted mismo, pero la herramienta le dará los fragmentos de código que necesita para el nuevo archivo CSS.

Instant Sprite es un generador de sprites CSS en el navegador en el que estoy trabajando. Es realmente rápido, pero no tiene tantas características como algunas de las otras. Actualmente solo funciona en Firefox o Chrome, ya que utiliza JavaScript FileReader y HTML Canvas para generar los sprites dentro del navegador web sin cargas.

Ahora hay Sprite Me de Steve Souders. Solo lo prueba y parece funcionar bastante bien.

Aquí está el enlace http://spriteme.org/ y aquí está la publicación del blog que lo anuncia.

http://www.stevesouders.com/blog/2009/09/14/spriteme/

Esto parece prometedor:

http://csssprites.org/

También encontré este artículo que contiene información útil, e incluso algunos comentarios de lectores que vale la pena leer.

Además, al parecer, el conjunto de herramientas web de google tiene algo, por lo que, si lo usa, podría valer la pena visitarlo.

ZeroSprites es un generador de sprites de CSS dirigido a la minimización de área usando algoritmos de planificación de piso VLSI.

encontró esto bastante rápido, aunque el límite de carga de 500K podría ser un problema. el código fuente está disponible aquí

Tonttu es una aplicación basada en Adobe AIR que proporciona una interfaz sencilla para crear potentes imágenes CSS Sprites. Puede especificar FiledWidth y FieldHeight u ordenar imágenes.
Crea imágenes CSS Sprites con la herramienta de escritorio Tonttu

Aún no está claro si se convertirá en el núcleo de la estructura ASP.NET, pero aquí hay un proyecto codeplex de Microsoft para csssprites:

http://aspnet.codeplex.com/releases/view/50869

si te gusta, úsalo, o simplemente como la idea, luego agrega un comentario. Creo que esto sería una gran cosa en el marco de ASP.NET. No lo he usado personalmente (tuve que inventar la rueda yo mismo) pero tiene buenas críticas.


Incluye los siguientes componentes:

  • API para generar automáticamente sprites e imágenes en línea
  • Controles y ayudantes que proporcionan una forma conveniente de llamar a la API

Funciones agregadas en la segunda versión:

  • Un control de enlace de CSS para formularios web (selecciona el archivo CSS correcto para el navegador del usuario, pero no muestra una imagen)
  • Usar rutas de carpetas personalizadas que no sean App_Sprites
  • Cambiar la dirección de mosaico de las imágenes de sprites
  • Fusionando el CSS generado con un CSS propio del usuario

Características que se consideran para lanzamientos futuros:

  • Seleccionando automáticamente el color de fondo del sprite más eficiente
  • Minería automática del CSS procesado
  • Comstackndo contra .NET 3.5

Simplemente use http://sprites.scherpontwikkeling.nl/ , puede generar sprites desde la URL del sitio web también … puede integrar sus sprites luego de desarrollar su sitio web. Es muy fácil de usar 😉

No es una respuesta directa, pero para mis compañeros desarrolladores e integradores web, considere simplemente alinear cada sprite con potencias de dos; por ejemplo, una cuadrícula de 16 píxeles o 32 píxeles. Hace el cálculo de compensaciones en el archivo CSS mucho más fácil. No importa todo el espacio en blanco, ya que los formatos gifd y png lo comprimen muy bien.

Compass CSS Framework tiene generación automática de sprites .

Si le gusta Java, puede usar GWT 1.5+ que viene con algo llamado ” ImageBundle “. El comstackdor GWT se encargará de todos los detalles desagradables para usted. Ni siquiera tendrá que codificar una sola línea de JavaScript o escribir ningún CSS.

Aquí hay un script que combina imágenes a través de una secuencia de comandos de Photoshop en sprites de CSS . No hará un mapa de sprites como lo pidió, pero combinará imágenes en múltiplos de dos (2, 4, 8) si son del mismo tamaño. Prefiero combinar imágenes similares (normal, desplazado, seleccionado, principal de seleccionado) que tener todas las imágenes en un archivo.

si está usando ruby ​​on rails, hay una biblioteca fácil de instalar para generar sprites css.

http://github.com/aberant/spittle

Hay una nueva herramienta llamada ActiveSprites, parte de la gem active_assets.

Github: http://bitly.com/eRTwU4

Usas un ruby ​​dsl para definir tus sprites y luego haces “sprites” y se generan los sprites y las hojas de estilo correspondientes.

¡Es genial!

Aquí hay un código de muestra,

# config/sprites.rb Rails.application.sprites do sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do _'sprite_images/sprite1/1.png' => 'a.one' _'sprite_images/sprite1/2.png' => 'span.two' end end 

https://github.com/northpoint/SpeedySprite

Esta herramienta tiene un enfoque novedoso ya que ensambla sus imágenes solicitadas sobre la marcha como un servicio http. Esto hace que todo el proceso sea bastante simple (no requiere preprocesamiento, cambie las imágenes en cualquier momento): inicia el servicio y luego referencia las imágenes que desee en su HTML:

  

Debido a que es dynamic, puede incluso crear sprites a partir de un conjunto dynamic de imágenes, como una página de miniaturas. No es compatible con JPEG, pero PNG y GIF funcionan bien.

Te sugiero que uses Sprite Master Web . Genero hojas de sprites automáticamente y exporto código CSS para usted. Siempre trata de generar hojas de sprites más pequeñas con algoritmos avanzados.

Aquí hay una captura de pantalla y un video de youtube

enter image description here

Ninguna de estas herramientas cumplía con mis requisitos, así que escribí una que usa la pequeña biblioteca de imágenes de Mark Tylers, mtpixel (ahora parte de mtcelledit ). No es muy extensa pero es fácilmente extensible a través de las funciones integradas de mtpixel que incluyen: escala de grises, inversión de color , rotación, nitidez, cuantización, posterización, volteo (vertical y horizontal), transformación, rgb-> indexado, indexado-> rgb, detección de bordes, relieve, dibujo de polígonos, texto y más.

Todo lo que haces es pasarle un conjunto de imágenes como args (admite png, gif y jpeg) y generará un rgb png llamado sprite.png junto con los útiles datos de corte de imágenes para stdout. Lo uso en scripts bash para spritify un directorio completo de imágenes y salida de los datos de corte para la generación automática de css (con la esperanza de eventualmente hacerlo capaz de reemplazar las tags de img existentes automágicamente con un poco de sed / awk creativo)

Los paquetes binarios para Linux para cachorros estarán aquí:

http://murga-linux.com/puppy/viewtopic.php?t=82009

Mi caso de uso solo requería empalmar las imágenes verticalmente en un nuevo png, así que eso es todo lo que hace, pero mi código fuente es de dominio público y la biblioteca mtcelledit es gpl3. Con mtpixel enlazado estáticamente, el binario es <100kb (solo unos pocos kb cuando se vincula dinámicamente) y las únicas otras dependencias son libpng, libjpeg y libgif (y freetype con el mtpixel oficial, pero no necesitaba el soporte de texto, entonces comentado los bits de freetype en la construcción estática)

siéntete libre de modificar para tus propias necesidades:

 #include  #include  #include  #include  int main( int argc, char *argv[] ){ int i=0,height=0,width=0,y=0; mtpixel_init(); mtImage *imglist[argc]; argc--; do{ imglist[i] = mtpixel_image_load( argv[i+1] ); height+=imglist[i]->height; if (imglist[i]->width > width) width=imglist[i]->width; } while (++i < argc); imglist[argc]=mtpixel_image_new_rgb(width,height); imglist[argc]->palette.trans=0; i=0; do{ if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); y+=imglist[i]->height; mtpixel_image_destroy( imglist[i] ); }while (++i < argc); mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); mtpixel_quit(); return 0; } 

Si está utilizando .net, consulte http://www.RequestReduce.com . No solo crea el archivo sprite automáticamente, sino que lo hace sobre la marcha a través de un HttpModule junto con la fusión y minificación de todo el CSS. También optimiza la imagen de sprite mediante la cuantización y la compresión sin pérdida, y maneja el servicio de los archivos generados utilizando los encabezados ETags y Expires para garantizar un almacenamiento en caché óptimo del navegador. La configuración es trivial y solo implica un simple cambio de web.config. Consulte la publicación de mi blog sobre su adopción por parte de Microsoft Visual Studio y la galería MSDN Samples.

Recientemente encontré estas herramientas: SpriteRight http://spriterightapp.com/

SpriteRight es un generador de hojas de estilo de CSS para Mac que le permite importar sus imágenes o hojas de estilo existentes. Haga que sus sitios carguen más rápido, reduzca los costos de ancho de banda y ahorre tiempo. SpriteRight incluso genera código CSS sobre la marcha.