Generador de Sprites CSS Gratis

El Generador de Sprites es una herramienta online gratuita que combina varias imágenes en una única hoja de sprites con el código CSS correspondiente para optimizar la web.

Sí, es completamente gratis y no requiere registro. Toda la generación de sprites se realiza del lado del cliente, en tu navegador.

Los sprites CSS reducen las solicitudes HTTP al combinar varias imágenes en un solo archivo, lo que mejora la velocidad de carga de la página y el rendimiento general del sitio web.

Por supuesto. El Generador de Sprites CSS procesa todo del lado del cliente, en tu navegador. No se sube ni se almacena ningún dato en servidor alguno. Tu contenido permanece privado en tu dispositivo en todo momento.

Sí, el Generador de Sprites CSS es totalmente responsivo y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita cuenta ni registro. Simplemente abre el Generador de Sprites CSS en tu navegador y empieza a usarlo de inmediato. No hay muros de registro ni restricciones de uso.

El Generador de Sprites CSS admite formatos de imagen comunes, incluidos PNG, JPG/JPEG, WebP y GIF. Algunas funciones también pueden admitir SVG y BMP según la herramienta específica.

Simplemente introduce tu entrada en el campo indicado, ajusta las opciones a tu gusto y la herramienta la procesará al instante. Luego puedes copiar el resultado al portapapeles o descargarlo.

El Generador de Sprites CSS funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

La distribución decide cómo se organizan tus imágenes en la hoja, lo que afecta a su tamaño final. Horizontal alinea todas las imágenes en una sola fila, y vertical las apila en una sola columna — ambas son simples y predecibles, pero pueden desperdiciar espacio cuando los tamaños de las imágenes varían. Cuadrícula (grid) coloca las imágenes en celdas uniformes con el número de columnas que elijas, por lo que se ve ordenada cuando los iconos tienen tamaños similares. Empaquetada (packed) es la opción más inteligente: usa un empaquetado por estantes, ordenando las imágenes por altura y ajustándolas en el rectángulo más pequeño razonable, lo que normalmente produce la hoja más compacta y el archivo más ligero. Si tus iconos tienen tamaños mixtos, empieza con empaquetada; si quieres un conjunto ordenado y espaciado de forma uniforme, usa cuadrícula. Prueba un par de distribuciones arriba y compara las dimensiones de la hoja generada antes de decidirte.

Una hoja de sprites es una sola imagen que contiene muchos gráficos más pequeños, y la propiedad CSS background-position desplaza esa imagen detrás de una caja de tamaño fijo para que solo se vea el recorte que quieres. Cada clase generada establece la hoja como fondo, fija el ancho y el alto del elemento a las dimensiones del icono, y luego desplaza la imagen con coordenadas negativas — por ejemplo, background-position: -48px -16px desplaza la hoja hacia arriba y hacia la izquierda para que el icono en ese punto caiga dentro de la caja. El navegador carga la hoja completa una sola vez y la reutiliza para cada icono, por lo que una sola petición puede servir docenas de gráficos. Esta herramienta escribe esos desplazamientos exactos por ti, nombrando una clase por cada archivo de origen para que solo tengas que añadir la clase a un elemento. Genera tu hoja arriba para obtener el código de posicionamiento listo para pegar.

Las pantallas retina, o de alta densidad de píxeles (high-DPI), empaquetan dos o tres píxeles de dispositivo en cada píxel CSS, por lo que un sprite estándar puede verse borroso en ellas. Activar retina genera versiones @2x y @3x de tu hoja al doble y al triple de resolución junto a la normal, y escribe las media queries min-resolution correspondientes en el CSS para que cada dispositivo cargue automáticamente la hoja más nítida que necesita. Actívalo cuando tus iconos deban verse nítidos en teléfonos, tabletas y portátiles modernos de alta densidad de píxeles — que es la mayoría de los sitios en producción hoy en día. La contrapartida son archivos más grandes, ya que los recursos @3x tienen nueve veces el área de píxeles, así que para gráficos puramente decorativos o poco vistos la hoja estándar suele ser suficiente. Marca la opción retina arriba y la herramienta se encarga de las hojas adicionales y las media queries por ti.

Junto con el CSS, el generador produce un manifiesto JSON en el formato hash de TexturePacker, que registra el nombre, la posición y el tamaño de cada fotograma en la hoja. Los motores de juegos y de canvas leen este atlas para recortar fotogramas individuales de una sola textura en tiempo de ejecución, en lugar de cargar muchas imágenes separadas. El formato es compatible con Phaser, PixiJS y otras librerías que aceptan atlas de sprites en JSON, así que puedes cargar la hoja y el manifiesto juntos y referenciar los fotogramas por sus nombres de archivo originales. Esto hace que la herramienta sea útil más allá del CSS web — funciona para arte de videojuegos HTML5, animaciones y conjuntos de tiles (tile sets), no solo para iconos de interfaz. Usa Descargar todo arriba para obtener la hoja de sprites, tu hoja de estilos y el manifiesto JSON en un solo paso, de modo que el atlas y la imagen permanezcan sincronizados.

Elige el formato según lo que contengan tus sprites. PNG no tiene pérdida y conserva la transparencia total, por lo que es la opción segura por defecto para iconos, logotipos y gráficos de interfaz que necesitan bordes limpios o canal alfa. WebP normalmente ofrece el archivo más ligero con la misma calidad visual y sigue admitiendo transparencia, por lo que es la mejor opción de rendimiento cuando no necesitas dar soporte a navegadores muy antiguos. JPEG es adecuado para contenido fotográfico pero no tiene transparencia y puede mostrar artefactos en líneas nítidas, así que evítalo para iconos planos. Para WebP y JPEG la herramienta ofrece un control deslizante de calidad de 10 a 100 por ciento, que te permite equilibrar el tamaño del archivo frente a la fidelidad. Para la mayoría de los conjuntos de iconos, WebP con un ajuste de calidad alto da resultados nítidos y la hoja más ligera — elige tu formato arriba y compara el tamaño de salida.