Lote Generador de Sprites CSS
Combina múltiples iconos o imágenes en un solo archivo para reducir las solicitudes HTTP y aumentar la velocidad de tu sitio web. Genera código CSS perfecto automáticamente.
Suelta iconos aquí para generar sprites
Admite PNG, JPG, WebP, AVIF. Combina múltiples imágenes en una hoja de sprites CSS.
Probar con Ejemplos
Galería cargada
Sprite Studio
Vista Previa de Hoja de Sprites
Iconos Individuales
| Icono | Nombre de clase | Posición | Tamaño | Acción |
|---|
Opciones de Sprite
Aplicar por lotes
Regeneración Automática al Cambiar
Generación profesional de sprites CSS
Optimiza tus recursos web combinando múltiples imágenes pequeñas en una sola hoja de sprites. Reduce la latencia, ahorra ancho de banda y simplifica tu flujo de trabajo CSS.
Acelerar la Velocidad del Sitio
Menos solicitudes HTTP significan cargas de página más rápidas. Al combinar 50 iconos en una hoja de sprites, eliminas 49 viajes de ida y vuelta al servidor.
CSS Generado Automáticamente
No más conteo manual de píxeles. Nuestra herramienta calcula automáticamente las posiciones y dimensiones del fondo para cada icono en tu hoja.
Diseños Inteligentes
Elige entre diseños de cuadrícula vertical, horizontal u optimizada. Ajusta el relleno para evitar el "desbordamiento" entre iconos durante el escalado.
Cómo crear una hoja de sprites CSS
Sube tus iconos
Arrastra y suelta todas las imágenes pequeñas o iconos que quieras fusionar. Admitimos PNG, JPG, WebP y AVIF.
Configurar Ajustes de Sprite
Elige el estilo de diseño, ajusta el relleno y establece tu prefijo de clase CSS. La vista previa se actualiza al instante.
Exportar Sprite y CSS
Descargar la hoja de sprites final y el código CSS correspondiente como un archivo ZIP. Simplemente copia y pega en tu proyecto.
Preguntas Frecuentes
¿Por qué debería usar CSS sprites?
Los sprites CSS son una técnica clásica de optimización. Reducen el número de solicitudes HTTP, lo que es especialmente beneficioso en conexiones lentas o sitios con muchos recursos pequeños como iconos o elementos de interfaz.
¿Qué diseño debo elegir?
Los diseños verticales y horizontales son los más fáciles de depurar. El diseño en cuadrícula es el más eficiente para minimizar el área final de la imagen y el tamaño del archivo.
¿Qué pasa con las pantallas de alta densidad de píxeles (Retina)?
Puedes generar una hoja de sprites con iconos de doble tamaño y usar "background-size" en tu CSS para escalarlos hacia abajo y obtener una representación nítida en pantallas de alta densidad de píxeles.