Generador de sprites CSS gratuito en línea: combina imágenes y genera CSS automáticamente
Crea hojas de sprites CSS optimizadas a partir de múltiples imágenes con nuestro generador de sprites gratuito en línea. Sube tus iconos o imágenes, elige la dirección del diseño (horizontal, vertical o en cuadrícula), establece el relleno y obtén al instante una hoja de sprites combinada junto con el código CSS exacto con las posiciones de fondo correctas. Los sprites CSS reducen las solicitudes HTTP al agrupar muchas imágenes pequeñas en una, mejorando la velocidad de carga de tu sitio web. Perfecto para conjuntos de iconos, elementos de interfaz de usuario y estados de botones. Todo el procesamiento se realiza localmente en tu navegador.
Sube varias imágenes (iconos, botones o elementos de interfaz) para combinarlas en una hoja de sprites.
Elige una dirección de diseño (horizontal, vertical o en cuadrícula) y ajusta el relleno entre imágenes.
Previsualiza la hoja de sprites, copia el código CSS generado y descarga la imagen del sprite.
Consejos para crear sprites CSS
- Usa imágenes de tamaño similar para obtener los mejores resultados. Las grandes diferencias de tamaño pueden hacer que el posicionamiento sea menos predecible.
- El diseño en cuadrícula es ideal para conjuntos de iconos con tamaños uniformes. El horizontal funciona bien para estados de botones y elementos de navegación.
- Mantén un relleno de al menos 2-4px entre imágenes para evitar superposiciones visuales al usar el sprite en producción.
Preguntas frecuentes: Generador de sprites CSS
¿Qué es un sprite CSS?
Un sprite CSS es un archivo de imagen único que combina varias imágenes más pequeñas (iconos, botones, etc.) en una sola. Al usar background-position en CSS, muestras solo la parte de la hoja de sprites que necesitas. Esto reduce las solicitudes HTTP y mejora la velocidad de carga de la página.
¿El generador de sprites CSS es gratuito?
Sí, completamente gratis. Sin registro, sin cargos ocultos y sin marcas de agua. Todo el procesamiento se realiza localmente en tu navegador.
¿Qué formatos de imagen son compatibles?
La herramienta admite todos los formatos de imagen comunes, incluidos JPG, PNG, WebP, GIF, BMP, AVIF, SVG y más. Se recomienda PNG para sprites para preservar la transparencia.
¿Cómo uso el código CSS generado?
Copia el código CSS y pégalo en tu hoja de estilos. Coloca la imagen del sprite descargada en la carpeta de activos de tu proyecto y actualiza la ruta de la URL de background-image para que coincida con la estructura de tu proyecto.
¿Qué diseño debo elegir?
El diseño horizontal coloca las imágenes en fila: ideal para estados de botones y elementos de navegación. El diseño vertical las apila: excelente para menús desplegables y listas. El diseño en cuadrícula las organiza en una cuadrícula compacta: mejor para conjuntos de iconos con tamaños uniformes.
¿La herramienta admite imágenes de alta DPI (Retina)?
La herramienta conserva las dimensiones originales de tu imagen. Para soporte Retina, sube imágenes al doble de tamaño y usa background-size en CSS para escalarlas en tu hoja de estilos.
¿Puedo reordenar las imágenes en el sprite?
Las imágenes se organizan en el orden en que las subes. Para cambiar el orden, simplemente elimínalas y vuelve a subirlas en el orden deseado.