Generador de Sprite CSS
Herramienta gratuita de generación de sprite CSS en línea
Que es un CSS Sprite?
Un sprite CSS combina multiples imagenes pequenas en un unico archivo de imagen (hoja de sprites). Luego se usa CSS background-position para mostrar imagenes individuales desde el archivo combinado. Esto reduce el numero de solicitudes HTTP, mejorando el rendimiento de carga de la pagina.
Como crear un CSS Sprite
Sube multiples imagenes. Elige un diseno (horizontal, vertical o cuadricula). La herramienta las combina en una unica hoja de sprites y genera el CSS con los valores de background-position para cada imagen.
▶Los sprites CSS siguen siendo utiles?
Con la multiplexacion de HTTP/2, el beneficio de rendimiento de los sprites ha disminuido. Sin embargo, los sprites aun ayudan al servir muchos iconos pequenos o al usar sistemas de iconos que necesitan cache de un solo archivo.
▶Cual es el mejor diseno para sprites?
El diseno horizontal es compacto para pocas imagenes. El diseno de cuadricula funciona bien para muchos iconos de tamano similar. El diseno vertical es util cuando todas las imagenes tienen el mismo ancho.
▶Como uso el CSS generado?
El CSS usa background-image en la hoja de sprites y background-position para cada icono. Aplica las clases generadas a tus elementos HTML.
Si este herramienta le ha sido útil, considere comprarme un café.
Compra un café para mí.