¿Herramientas para hacer sprites CSS? [cerrado]

126

¿Hay alguna buena herramienta para hacer sprites CSS?

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

Al menos, me gustaría que tomara un directorio de imágenes y generara un sprite grande y el .css necesario para usar cada uno como fondo.

¿Hay buenos complementos de Photoshop o aplicaciones completas para hacer esto?

Simon_Weaver
fuente
¿Podría por favor elaborar un poco más? ¿Está tratando de compilar todos los sprites en una imagen más grande y luego usar css para mostrar la parte de la imagen que contiene el sprite correcto? (técnica de puertas correderas)
teh_noob
1
¿Hay alguna manera de cambiar el color de fondo para que pueda ver mis iconos blancos en el spritepad?
Jim
24
Realmente no entiendo por qué esto estaba cerrado? Parece que hay muchas buenas respuestas útiles. Podría decirse que esta debería ser una pregunta de Superusuario porque no menciono ningún lenguaje de programación en particular, pero me gustan las respuestas que obtuve y obviamente han sido útiles para muchos.
Simon_Weaver
3
Por favor, no elimine esta pregunta, es la lista más útil en Internet para este problema, y ​​ciertamente está relacionada con la programación (incluso si no es una pregunta de programación por decir) . Esta es definitivamente una llamada de juicio, y no debería haber sido forzada por los mods; para eso es el sistema de cierre de votos de la comunidad ...
BlueRaja - Danny Pflughoeft

Respuestas:

46

Esto hará el 90% del trabajo por usted: CSS Sprite Generator . 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.

Sophie Alpert
fuente
@ben perfecto! suponiendo que funcione ;-)
Simon_Weaver
1
Estoy un poco insatisfecho con esta herramienta, así que la elegí como mi respuesta seleccionada. terminó recortando mi imagen y no explica muy bien por qué deja grandes brechas entre las imágenes
Simon_Weaver
No me gusta esta solución, aunque supongo que funciona bien. SpriteMe parece funcionar mucho mejor.
Chuck Le Butt
2
El problema con esta herramienta es que las imágenes no tienen la máxima calidad.
Jim
50

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.

Brian Grinstead
fuente
1
Wow, que gran herramienta. ¡Gracias!
Vivian River
He usado tu herramienta para trabajar en algunos sitios web de producción desde que publicaste aquí. Es muy simple y fácil.
Vivian River
77
+1. Tu herramienta es mucho mejor que el resto que he probado.
Ed Bayiates
3
esta es la más intuitiva sin embargo ... gracias ... (aunque, debe incluir el diseño "inteligente" de sprites para minimizar los problemas de rendimiento)
kumarharsh
2
¡Gracias a todos! @Harsh, estoy de acuerdo con el diseño: comencé a experimentar con eso hace bastante tiempo, pero nunca lo hice
Brian Grinstead
31

Ahora está Sprite Me de Steve Souders. Simplemente 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/

Jauder Ho
fuente
2
+1 Esto es increíblemente fácil de usar: solo navega a la página que deseas y haz clic en el marcador de SpriteMe ... ¡Crea las imágenes y CSS automáticamente!
Chuck Le Butt
Es una buena herramienta, pero requiere un archivo ZIP de sus imágenes y el orden en que coloca sus sprites es el orden ZIP. La herramienta de Brian a continuación le permite cargar archivos y arrastrar y soltar para cambiar el orden.
Ed Bayiates
Me gusta que tiene código fuente disponible gratuitamente
lkraav
13

Esto parece prometedor:

http://csssprites.org/

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

También, aparentemente, el kit de herramientas web de Google tiene algo, por lo que si está utilizando eso, puede valer la pena echarle un vistazo.

Simon_Weaver
fuente
Parece que la página ya no funciona ...
Bob
smartsprites.osinski.name pasó a llamarse csssprites.org , así que lo edité para usted. Parece ser una de las pocas opciones que se pueden integrar en el proceso de construcción, por lo que he visto aquí.
ripper234
9

Prueba esto:

http://spritepad.wearekiss.com/

fénix
fuente
Esto es definitivamente legítimo. Los mapas de sprites guardados en mi humilde opinión son una clave, por lo que solo las imágenes y líneas de código relevantes tendrían que cambiar con el tiempo, en lugar de volver a calcular todo el conjunto de coordenadas con cada cambio en el contenido de la imagen.
lkraav
7

ZeroSprites es un generador de sprites CSS destinado a la minimización del área utilizando algoritmos de planificación de piso VLSI.

clyfish
fuente
6

Encontré esto bastante rápido, aunque ese límite de carga de 500K podría ser una molestia. el código fuente está disponible aquí

Scott Evernden
fuente
¿Por qué cargar 500kb sería un dolor? probablemente nunca querría subir> 100kb
Simon_Weaver
Dije que "podría" ser un dolor. ¿Depende de la aplicación no? .. Un archivo zip lleno de PNG de tamaño mediano, por ejemplo, en una cuadrícula considerable ~ ~ podría ~ ejecutarse cerca de este número. si todo son pequeños mapas de bits, entonces seguro / no hay problema.
Scott Evernden
1
Sí, pero el objetivo de los sprites CSS es evitar que se carguen muchas pequeñas imágenes con muchas solicitudes. si realmente tuviera tantos sprites pequeños, tardaría mucho tiempo en cargar, tiempo en el que no se mostraría ninguno. mejor mantenerlos, creo que como máximo 100kb. siempre puedes hacer varios
Simon_Weaver
Hago mucho trabajo con imágenes. tal vez no pequeños mapas de bits css. entonces tal vez por eso di la advertencia. tus necesidades son diferentes / ok 500kb llegarán en un segundo en la mayoría de las bandas anchas. Fui el primero en proporcionar la respuesta aceptada a su consulta y aquí estoy en contra ~ ¿voté y defendí mi idioma? lo que sea ...
Scott Evernden
Fue un dolor para mí, ya que las imágenes con las que comencé terminaron siendo un paquete de mayor tamaño que ese límite, por lo que tuve que recortar u optimizar antes de poder usarlo.
Kzqai
4

Todavía no está claro si entrará en el marco principal de ASP.NET, pero aquí hay un proyecto de codeplex de Microsoft para csssprites:

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

si te gusta, úsalo, o simplemente si te gusta la idea, agrega un comentario. Creo que esto sería una gran cosa para tener en el marco 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

Características agregadas en la segunda versión:

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

Características bajo consideración para futuras versiones:

  • Seleccionar automáticamente el color de fondo de sprite más eficiente
  • Minificar automáticamente el CSS renderizado
  • Compilando contra .NET 3.5
Simon_Weaver
fuente
4

Simplemente use http://sprites.scherpontwikkeling.nl/ también puede generar sprites a partir de las URL del sitio web ... puede integrar sus sprites después de desarrollar su sitio web. Es muy fácil de usar ;)

Juan
fuente
3

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


fuente
Un buen consejo, aunque principalmente estoy tratando de combinar encabezados de texto (1-2kb cada uno) en un solo archivo. No me preocupa demasiado por el espacio en blanco porque sé que va a comprimir a cabo - apenas no entiendo completamente por qué las herramientas para hacer sprites hacen gran parte de él
Simon_Weaver
Una advertencia para esto: si bien el espacio en blanco de la imagen se comprimirá para el transporte, se expande y ocupa memoria cuando se carga el navegador. El uso a ciegas de las herramientas automáticas de generación de sprites puede dar lugar a algunas imágenes enormes, que pueden aumentar el uso de memoria en esas páginas. Se necesita cierto cuidado al agrupar imágenes para formar hojas de sprites para mantener esto dentro de límites razonables.
Sam Foster,
Sam: cierto! Descubrí esto más tarde. Si la imagen del sprite es muy ancha o alta, ¡eso es algo a tener en cuenta! Especialmente para aplicaciones de telefonía móvil (menos memoria). Simon: el espacio en blanco probablemente se deba a las limitaciones de CSS. Incluso cuando use no repetir en un fondo, la imagen del sprite se mostrará a través de relleno, altura de línea y básicamente todo el área de fondo del elemento, excepto los márgenes y bordes. Digamos, por ejemplo, que tiene un icono para un enlace. Si el enlace abarcara varias líneas, entonces podrían aparecer otros íconos del sprite. Agregar suficiente espacio en blanco lo hace más "resistente".
@Simon_Weaver: según los comentarios de todos aquí, publiqué una herramienta de sprites que es simple stackoverflow.com/a/13281578/1162141
technosaurus
3

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

Salman von Abbas
fuente
2
Estoy sorprendido por la cantidad de personas que no usan Compass para Sprite Generation. Compass nació para esto ...
justnorris
2

Si te gusta Java, puedes usar GWT 1.5+ que viene con algo llamado " ImageBundle ". El compilador GWT se encargará de todos los detalles desagradables para usted. Ni siquiera tendrá que codificar una sola línea de JavaScript o escribir CSS.

Aaron Digulla
fuente
2

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

Stephen James
fuente
2

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

Github: http://bitly.com/eRTwU4

Utiliza un dsl de ruby ​​para definir tus sprites y luego haces "rake sprites" y se generan los sprites y las hojas de estilo correspondientes.

Es rad!

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
shwoodard
fuente
2

https://github.com/northpoint/SpeedySprite

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

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

Debido a que es dinámico, incluso puede crear sprites a partir de un conjunto dinámico de imágenes, como una página de miniaturas. Sin embargo, no admite JPEG, pero PNG y GIF funcionan bien.

Magnus
fuente
1

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

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

ingrese la descripción de la imagen aquí

bateristt
fuente
Vale la pena señalar, esta no es una aplicación gratuita o de código abierto, pero tiene un precio justo de $ 3.99. Está bien construido y tiene una buena compresión PNG.
t.mikael.d
Mac solo Bummer, este parecía prometedor.
Mahn
1

Ninguna de estas herramientas cumplió 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 debe hacer es pasarle un conjunto de imágenes como args (admite png, gif y jpeg) y generará un png rgb llamado sprite.png junto con los datos útiles de corte de imágenes para stdout. Lo uso en scripts de bash para acelerar un directorio completo de imágenes y generar los datos de corte para la generación automática de css (con la esperanza de que eventualmente sea capaz de reemplazar automáticamente las etiquetas img existentes con un poco de sed / awk creativo)

Los paquetes binarios para cachorros linux 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 está enlazado 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, así que no comentó los bits de tipo libre en la compilación estática)

siéntase libre de modificar para sus propias necesidades:

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

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; 
}
technosaurus
fuente
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 minimización de todos los CSS. También optimiza la imagen del sprite mediante la cuantización y la compresión sin pérdidas, y maneja el servicio de los archivos generados mediante ETags y encabezados Expires para garantizar un almacenamiento en caché óptimo del navegador. La configuración es trivial e implica un simple cambio web.config. Vea mi publicación de blog sobre su adopción por la galería de ejemplos de Microsoft Visual Studio y MSDN.

Matt Wrock
fuente
0

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

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

prestarocket
fuente
Vale la pena señalar, esta no es una aplicación gratuita o de código abierto, pero tiene un precio justo de $ 4.99. Está bien construido y tiene buena compresión PNG, más funcionalidad que el "Sprite Master Web" anterior.
t.mikael.d
Y también es mac también.
Mahn