Los sprites de imágenes CSS le permiten reducir drásticamente la cantidad de solicitudes HTTP en un sitio combinando muchas o todas las imágenes de su sitio en un solo archivo. Este archivo se puede usar junto con el posicionamiento de fondo CSS para implementar imágenes individuales.
El inconveniente de esta técnica es que es un proceso minucioso y complicado que requiere que usted combine manualmente sus imágenes y juegue con el CSS para que cada imagen se muestre correctamente. Afortunadamente, hay una serie de herramientas en línea gratuitas que automatizan completamente este proceso. Hoy tenemos una impresionante colección de doce de estas herramientas, cada una con su propia versión única del proceso de generación de sprites. Ya sea que esté buscando crear un sprite desde una carpeta de imágenes o convertir un sitio existente, tenemos las herramientas para ayudarlo a hacer el trabajo en segundos.
CSS Sprite Generator: Project Fondue
Un buen generador con muchas opciones. Subes un .ZIP de todas las imágenes que te gustaría convertir en un sprite y se encarga del resto. ¿Escupe una imagen y todas las diversas? Posiciones de fondo? Valores que necesitas.
Generador de Sprites CSS
Ugly and buggy, este generador de sprites te obliga a subir cada imagen individualmente. Pruébelo para ver lo que piensa, pero honestamente, hay mejores alternativas en esta lista.
CSS Sprites - CSS Sprite Builder / Generador en línea
Este es bastante bonito. Puede cargar fácilmente un montón de imágenes a la vez, elegir el tipo de archivo de salida e incluso obtener el código Sass y CSS como resultado. También hay algunas opciones ingeniosas para generar automáticamente efectos de desplazamiento como desaturado y volteado. En general bastante impresionante, asegúrese de comprobarlo.
Spritebox - Crea CSS desde Sprite Images
Esta toma una ruta diferente, ligeramente menos automatizada. En lugar de crear una imagen de sprite para usted, le permite cargar su sprite ya creado y definir áreas específicas para generar el CSS resultante. Una gran herramienta si prefiere crear sprites en Photoshop y solo quiere ayuda con el código.
Lienzo: CSS Sprites Generator
Si estás subiendo imágenes para esta, debes hacerlo de una en una, lo que es un poco molesto. Si tienes enlaces, puedes simplemente pegarlos en una lista con los nombres de clase correspondientes y listo. Las opciones incluyen relleno y colores de fondo. Funcionó bien en mis pruebas, definitivamente vale la pena echarle un vistazo.
Stitches - Un generador de hojas de sprites HTML5.
Este le permite arrastrar imágenes, lo cual es impresionante después de usar todos los descargadores incómodos que otros desarrolladores han creado. Después de eso, simplemente puede hacer clic en un botón para obtener la imagen y otro para tomar el CSS. Prácticamente no hay opciones y solo funciona en Chrome y Firefox, pero es perfecto si solo quieres una solución rápida y sencilla.
Spritemapper
Este es solo para super nerds, es un generador de sprites descargable que se ejecuta desde la línea de comandos. Sin embargo, la implementación es realmente sencilla, simplemente apunta a tu archivo CSS existente y hace el resto del trabajo. Esto hace que el problema de la administración de sprites a largo plazo sea un problema, ya que puede aferrarse a sus archivos de imágenes y css originales y reprocesarlos cuando haya un cambio.
SpriteMe
SpriteMe es una herramienta increíble que le permite mantener completamente intacto su proceso de desarrollo típico. Solo construye tu página como lo harías normalmente usando imágenes individuales. Luego, una vez que hayas terminado, abre la página en un navegador y presiona el bookmarklet SpriteMe. Esto toma todas las imágenes de la página, crea un sprite y genera el CSS. Esto es especialmente útil si estás convirtiendo un sitio que sale.
Spritefy
Spritefy es otra opción que te permite simplemente arrastrar un montón de archivos al navegador para procesarlos. Al igual que con Stitches, realmente no hay opciones, pero definitivamente es una forma súper rápida de ponerse en marcha con sprites (solo Chrome y Firefox).
CSS Sprite Generator
Este tiene algunos pasos innecesarios en el proceso de generación y configuración, por lo que demora unos segundos más que la mayoría de las otras alternativas, pero tiene una tonelada de salida de código que incluye CSS y HTML, junto con varios fragmentos de código para agregar cada imagen a Un div o span, insertando enlaces, etc.
SpriteMeister - CSS automático Sprite Generator
SpriteMeister se parece mucho a SpriteMe, pero es menos automatizado. En lugar de usar un bookmarklet, carga manualmente cada imagen y su archivo CSS actual y luego recibe una descarga con el código actualizado y una sola imagen.
Sprite Creator 2.0
Este funciona igual que Spritebox arriba. Subes la imagen de sprite que creaste en otro lugar y usas un proceso de selección simple para generar automáticamente el CSS apropiado para cada imagen.
¿Quiéralo? ¡Compártelo!
Si disfrutaste de la colección de regalos de esta semana, comparte el amor y envía un enlace a tus sitios favoritos. ¡Aquí hay un fragmento de código conveniente para que puedas copiar y pegar a tu gusto!
12 generadores de Sprite CSS gratis: http://goo.gl/NhLNR