Generador de Sprite CSS

Haz clic para subir una imagen

Formatos compatibles: PNG, JPG, WebP

Diseño

Espaciado de imagen: 10px

050

Sube imagen para previsualizar sprite

Fusiona varios iconos pequeños en una hoja de sprite CSS online. El procesamiento en el navegador local significa cero subidas, y se genera el código CSS de background-position en diseños horizontal, vertical y cuadrícula.

Relacionado

Generador ICO

Compresor de Imágenes

Convertir Imagen

Redimensionar Imágenes

Recortar Imagen

Rotar y Voltear Imágenes

¿Qué es un sprite CSS?

Un sprite CSS combina varias imágenes pequeñas en una imagen más grande y usa background-position para mostrar cada icono por separado. El término sprite proviene de las consolas de juegos antiguas, que empaquetaban varios frames de animación en una sola imagen grande y los iban alternando. La web tomó prestada la idea y la usa para cargar muchos iconos pequeños en una sola petición.

**¿Por qué necesitamos sprites?** En la era de HTTP/1.1, cada archivo de imagen generaba una petición distinta, con handshake TCP, handshake TLS y cabeceras de petición. Cien iconos significaban cien peticiones. Un sprite coloca todos los iconos en una sola imagen, completando la carga de iconos con una única petición y acelerando el primer pintado. El multiplexing de HTTP/2 reduce parte de esa ventaja, pero los sprites siguen ayudando con el caché en CDN, la compresión gzip y la compatibilidad con HTTP/1.1.

**Cómo funciona:** imagina un sprite de 200x60 con tres iconos de 60x60 en fila. Para mostrar el primero, define un elemento de 60x60 con `background: url(sprite.png); background-position: 0 0;`. Cambia a -60px 0 para el segundo y a -120px 0 para el tercero. Esta herramienta genera todas esas coordenadas por ti.

**Alternativas modernas:** SVG + use o symbol (recomendado, vectorial, con color y animable), Icon Font (gran compatibilidad, multiplataforma), HTTP/2 server push e iconos en fuente web. Cada opción tiene sus puntos fuertes: elige en función de las necesidades de tu proyecto.

Casos de uso

Proyectos web con muchos iconos pequeños que conviene fusionar en un sprite para reducir peticiones HTTP y acelerar el primer pintado
Desarrolladores frontend que necesitan centralizar los iconos del proyecto y generar automáticamente el código CSS de background-position
Equipos que desean generar en lote el sprite más el CSS y entregarlo listo para integrar
Tras fusionar, pasa la imagen combinada por la [herramienta de compresión de imágenes](/image/compress/) para reducir el tamaño total y mejorar la métrica LCP
Aplicaciones, Electron o clientes de escritorio que necesitan empaquetar activos de iconos estáticos en una sola imagen
Plantillas HTML de email o blogs estáticos que necesitan varios iconos siendo compatibles con clientes de correo
Diseñadores que entregan los iconos en formato sprite para que los ingenieros frontend los integren con rapidez
Sprites 2x específicos para pantallas Retina, adaptados a pantallas 1x y 2x mediante background-size

Cómo Usar

Haz clic en el área de subida o arrastra varias imágenes (JPG, PNG, WebP y GIF son compatibles)
Reordena los iconos en la lista izquierda con el asa de arrastre o los botones arriba y abajo
Elige Horizontal, Vertical o Cuadrícula en la sección de disposición del panel izquierdo
Ajusta el deslizante de padding para definir el espacio en píxeles entre iconos (se recomienda 1-5 px)
Previsualiza el sprite en tiempo real a la derecha y, cuando estés conforme, pulsa Descargar para guardar el PNG y Copiar para llevarte el CSS

Características

Fusión de imágenes con un clic: sube varios iconos pequeños y combínalos en un solo sprite
Tres modos de disposición: horizontal, vertical y cuadrícula, conmutables según el uso
Padding ajustable: un deslizante de 0 a 50 px controla el espacio entre iconos
Reordenar arrastrando: arrastra los iconos de la lista para cambiar el orden, las coordenadas CSS se actualizan solas
Reordenación móvil: los botones arriba y abajo permiten reordenar en teléfonos y tablets
CSS generado automáticamente: el background-position, ancho y alto de cada icono se generan por ti
Vista previa en vivo: el sprite se regenera al instante ante cualquier cambio para una experiencia WYSIWYG
Copiar CSS con un clic: un botón integrado copia la hoja de estilos completa al portapapeles
Descarga de PNG con un clic: la imagen combinada se guarda en local como sprite.png
Procesamiento local en el navegador: la API Canvas fusiona los archivos en local, sin subidas
Múltiples formatos de entrada: JPG, PNG, WebP y GIF están soportados
Transparencia preservada: la salida PNG mantiene el fondo transparente original para composiciones limpias

Best Practices

Adaptación Retina 2x: usa archivos fuente 2x

Si tus usuarios usan pantallas Retina (Mac, iPhone, Windows HiDPI), sube archivos fuente con resolución 2x (por ejemplo, iconos de 32x32) y genera el sprite a partir de ellos. Después, usa background-size: 32px auto en CSS para escalar de vuelta a 16x16. Así las pantallas 1x y 2x se ven nítidas con un solo sprite.

Los sprites siguen siendo útiles en proyectos con HTTP/2

El multiplexing de HTTP/2 elimina gran parte del cuello de botella por número de peticiones, pero los sprites aún ganan en cuatro escenarios: reutilización de caché en CDN, compresión gzip o Brotli, paso por proxies internos y compatibilidad con HTTP/1.1. Las intranets corporativas, los sistemas bancarios o gubernamentales y las plantillas HTML de email siguen funcionando principalmente con HTTP/1.1, donde los sprites son insustituibles.

PNG-8 frente a PNG-24: elige la profundidad de color adecuada

La herramienta genera un PNG fijo, pero tú eliges la profundidad del archivo fuente. Los iconos planos o de un solo color deberían ser PNG-8 (transparencia sin pérdida, un 60-80% más pequeño que PNG-24). Los iconos con degradados, sombras o brillos necesitan PNG-24. La herramienta acepta cualquier formato, así que optimiza las fuentes con una herramienta de compresión PNG antes de fusionarlas.

Estrategia de caché CDN: usa hash en el nombre de archivo

Evita un nombre fijo sprite.png. Renómbralo con un hash de contenido (por ejemplo sprite.a3f2b1.png) y configura Cache-Control: max-age=31536000 para caché permanente. El navegador lo descarga una vez y luego lo sirve desde caché local, ahorrando más ancho de banda que HTTP/2 por sí solo. La herramienta genera sprite.png por defecto; puedes renombrarlo tras la descarga.

La compresión gzip o Brotli hace los sprites aún más pequeños

Un sprite combinado tiene mayor continuidad de píxeles que muchas imágenes pequeñas dispersas, por eso gzip o Brotli lo comprimen mucho mejor. Nginx con gzip nivel 1 reduce los sprites entre un 60% y un 80%, y Brotli alcanza el 85% o más. Con Content-Encoding activado, un sprite de 1 MB puede transmitirse como 200-300 KB. Es la ventaja más infravalorada de los sprites.

CSS Modules o Vue scoped CSS: envuelve con :global()

Si tu proyecto usa CSS Modules o Vue scoped CSS, los nombres de clase .icon-home y .sprite que genera esta herramienta serán hasheados localmente y dejarán de funcionar. Envuelve las clases compartidas con :global(.sprite) { ... } en tu .module.css, o prescinde de CSS Modules y usa una nomenclatura BEM.

Combina con Icon Font: iconos UI clave en font, complejos en sprite

El patrón más estable en producción es el mix. Usa Icon Font para los iconos UI universales (ajustes, cerrar, buscar, usuario), porque admiten color, son vectoriales y multiplataforma. Usa sprites para los iconos complejos en color (logos de producto, iconos de banners). Las dos estrategias se complementan y evitan el coste de mantenimiento de apostar solo por una.

Usa spritesmith en proyectos de ingeniería y esta herramienta en prototipos

Para proyectos de larga duración, integra spritesmith (Webpack) o gulp.spritesmith en el pipeline de build: los cambios regeneran el sprite, se emiten nombres con hash y se generan variables SCSS o LESS automáticamente. Esta herramienta está pensada para prototipos sin dependencias y entregas pequeñas; los plugins de build encajan mejor con pipelines CI/CD.

Los proyectos modernos pueden migrar del sprite al SVG symbol

Si tu proyecto admite navegadores modernos (Chrome, Safari, Firefox, Edge, además de IE 11+), considera migrar del sprite al SVG symbol: un único archivo gestiona todos los iconos, CSS controla el color y la animación, y no hay que mantener coordenadas de background-position. El sprite que genera esta herramienta es un activo de transición válido durante la migración.

Preguntas Frecuentes

¿Qué es un sprite CSS y por qué combinar imágenes en una sola?

Un sprite CSS combina varias imágenes pequeñas en una imagen más grande y usa background-position para mostrar cada icono por separado. Con sprites, el navegador hace una sola petición HTTP para cargar todos los iconos, lo que reduce mucho el número de peticiones y acelera el primer pintado en comparación con cargar decenas de archivos sueltos. Es una técnica clásica de optimización frontend.

¿Cómo combino varios iconos en un sprite online?

Sube tus imágenes y la herramienta las fusionará en la disposición elegida con vista previa en vivo. A la derecha, genera el código CSS de background-position (con ancho y alto) para cada icono, listo para pegar en tu hoja de estilos. El sprite resultante se exporta como PNG y puede descargarse con un solo clic.

¿Cómo se usa el código CSS generado?

Coloca sprite.png en tu proyecto (por ejemplo /img/sprite.png) y pega el CSS en tu hoja de estilos. Añade la clase .sprite y la clase .icon-xxx correspondiente a cualquier elemento que deba mostrar un icono, por ejemplo <i class="sprite icon-home"></i>. Los nombres de las clases se generan automáticamente a partir del nombre original del archivo.

¿Qué modos de disposición están soportados?

Tres modos: horizontal (iconos de izquierda a derecha en una fila), vertical (iconos apilados de arriba abajo en una columna) y cuadrícula (iconos organizados automáticamente en una matriz cuadrada; las columnas se calculan con la raíz cuadrada redondeada hacia arriba). Cambia de modo en el panel izquierdo para previsualizar el resultado.

¿Puedo ajustar el espacio entre los iconos?

Sí. El panel izquierdo incluye un control deslizante de padding de 0 a 50 px; se recomienda entre 1 y 5 px. Un padding razonable evita el sangrado de píxeles del borde al posicionar con CSS, pero no afecta al uso final. El padding vive dentro del sprite, mientras que el CSS solo usa las coordenadas precisas de background-position.

¿Puedo reordenar los iconos?

Sí. Cada elemento de la lista izquierda admite arrastrar y soltar con el asa de agarre, y los botones arriba/abajo funcionan en móvil. El sprite y las coordenadas CSS se regeneran automáticamente en cuanto cambia el orden.

¿Qué formatos de imagen se admiten?

Todos los formatos habituales: JPG, PNG, WebP, GIF y otros. La salida siempre es PNG (preserva la transparencia). Se recomienda PNG como entrada, porque los fondos transparentes se conservan tras la fusión en el sprite.

¿Siguen siendo útiles los sprites CSS en proyectos modernos?

El multiplexing de HTTP/2 reduce parte de la ventaja del sprite, pero los sprites siguen aportando valor gracias al caché en CDN, la compresión gzip y un primer pintado más rápido de los iconos clave. Si tienes menos de 10 iconos o necesitas color y animación, es preferible usar SVG symbol o Icon Font. Para muchos iconos PNG estáticos, el sprite sigue siendo una opción estable y fiable.

¿Los sprites se ven borrosos en pantallas Retina? ¿Cómo se soluciona?

Sí, pueden verse borrosos. Las pantallas Retina (Mac, iPhone, Windows HiDPI) tienen el doble o el triple de píxeles físicos, por lo que un sprite 1x se estira y se ve difuminado. La solución es subir archivos fuente 2x (32x32 en lugar de 16x16) y escalar el sprite de vuelta a 16x16 en CSS con background-size: 32px auto.

¿Fusionar iconos pierde calidad de imagen?

No. Fusionar simplemente coloca cada imagen en su posición sobre un lienzo grande. No se aplica remuestreo, compresión ni ajustes de color. El PNG de salida mantiene la calidad original. Si necesitas reducir aún más el archivo combinado, pásalo por la [herramienta de compresión de imágenes](/image/compress/).

¿Se suben mis imágenes del sprite a un servidor?

No. Toda la fusión ocurre en tu navegador local mediante la API Canvas. Los archivos nunca salen de tu dispositivo y se descartan al cerrar la página. Los iconos internos, los logos sin publicar y otros activos sensibles pueden procesarse con total tranquilidad.

¿Cómo descargo el sprite generado?

En cuanto se suben las imágenes, se genera una vista previa. Pulsa el botón Descargar del panel izquierdo para guardar sprite.png en local. El CSS también se genera automáticamente, y con un clic en Copiar lo llevas al portapapeles.

¿Puedo personalizar los nombres de las clases?

Los nombres de las clases se generan automáticamente a partir del nombre original del archivo con el prefijo .icon-. Por ejemplo, home.png se convierte en .icon-home. Usa nombres en inglés, dígitos y guiones para conseguir nombres de clase limpios y legibles.

¿Cómo elijo entre sprites, Icon Font y SVG symbol?

Depende del caso de uso. Muchos iconos PNG estáticos o necesidad de compatibilidad con IE antiguo: sprites. Iconos UI universales que cambian de color y deben ser multiplataforma: Icon Font. Proyectos modernos que necesitan color, animación y un único archivo: SVG symbol es la mejor opción. En la práctica, es habitual mezclarlos: Icon Font para los iconos UI clave y sprites para los iconos complejos en color.

¿Puedo reducir el sprite combinado con la herramienta de compresión?

Sí. Esta herramienta genera un PNG sin pérdidas, que puede ser grande. Un buen flujo de trabajo es: genera el sprite aquí, después usa la [herramienta de compresión de imágenes](/image/compress/) para reducir el PNG o convertirlo a JPG (si no necesitas transparencia) y, por último, usa el [conversor de imágenes](/image/convert/) para pasarlo a WebP si lo prefieres. Combinar las herramientas maximiza el rendimiento de carga.

Glosario

Sprite CSS: Técnica que combina muchas imágenes pequeñas en una imagen más grande y usa background-position para mostrar cada icono por separado. Una optimización clásica de rendimiento frontend.
background-position: Propiedad CSS que establece las coordenadas iniciales de la imagen de fondo. Los sprites usan valores negativos para desplazar el fondo a la izquierda o arriba hasta el icono deseado. Por ejemplo, background-position: -60px 0 muestra el icono con un desplazamiento de 60 px.
background-size: Propiedad CSS que controla el tamaño de renderizado de la imagen de fondo. La clave para la adaptación Retina: tras generar el sprite con fuentes 2x, usa background-size: 32px auto en CSS para escalar de vuelta a 1x y mantener nítidas las pantallas 1x y 2x.
Disposición en cuadrícula: El modo de cuadrícula de esta herramienta calcula automáticamente el número de columnas como la raíz cuadrada del total de iconos (redondeada hacia arriba) y los coloca por filas en un cuadrado. Nueve iconos se convierten en una cuadrícula 3x3.
Padding (espacio entre iconos): El espacio en píxeles entre subimágenes adyacentes dentro de un sprite. Se recomienda entre 1 y 5 px para evitar el sangrado de píxeles del borde. El padding vive dentro del sprite, mientras que el CSS solo usa las coordenadas precisas.
Transparencia PNG: PNG admite un canal alfa, por lo que los iconos pueden tener fondos transparentes. La salida del sprite conserva el formato PNG, de modo que los iconos transparentes siguen siéndolo tras la fusión.
Multiplexing HTTP/2: HTTP/2 procesa varias peticiones en paralelo sobre una sola conexión, lo que reduce parte de la ventaja del sprite. Aun así, HTTP/2 sigue quedándose por debajo de un sprite combinado en la configuración de CDN, la compatibilidad con navegadores antiguos y la compresión gzip.
SVG symbol: El elemento <symbol> de SVG con referencias <use>. Todos los iconos viven en un único archivo SVG y CSS controla fill, stroke y animación. La alternativa preferida al sprite en los proyectos modernos.
DPR (Device Pixel Ratio): La relación entre los píxeles físicos y los píxeles CSS. Las pantallas Retina tienen DPR = 2, por lo que un icono CSS de 16x16 necesita 32x32 píxeles físicos. El DPR es el parámetro clave para adaptar sprites a pantallas Retina.

Comparación de modos de disposición del sprite

Disposición	Regla de ordenación	Uso típico
Horizontal	Iconos colocados de izquierda a derecha en una fila	Barras de navegación, pestañas, barras horizontales
Vertical	Iconos apilados de arriba abajo en una columna	Menús verticales, prefijos de listas, estructuras verticales
Cuadrícula	Iconos organizados automáticamente en una matriz cuadrada según la cantidad	Uso general, mejor opción por defecto para cantidades desconocidas

Valores de padding recomendados para sprites

Padding (px)	Ideal para	Notas
`0px`	Bordes limpios, iconos con padding transparente propio	Máxima compacidad; los píxeles del borde pueden sangrar
`1-2px`	Iconos de alta calidad con margen de seguridad mínimo	Recomendado: equilibra compacidad y estabilidad
`3-5px`	Iconos estándar con sombras o trazos	Distancia segura, valor habitual en la industria
`6-10px`	Iconos con tamaños dispares o con trazos	Evita que los iconos grandes tapen a los pequeños
`10-50px`	Depuración o agrupación visual	No recomendado para producción

Referencia de adaptación del sprite Retina 2x

DPR de pantalla	Tamaño CSS	Tamaño del archivo fuente	background-size
`1x`	`16x16`	`16x16`	`auto`
`2x`	`16x16`	`32x32`	`32px auto`
`3x`	`16x16`	`48x48`	`48px auto`
`2x`	`24x24`	`48x48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Implementar sprites de imagen en CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> y <use>
ReferenceWeb.dev - Sustituir imágenes por CSS sprites
ReferenceWikipedia - Sprite (gráficos por computador)