Generador de sprites CSS

Funciones

• Suelta varias imágenes a la vez y obtén un único PNG empaquetado
• Genera el CSS de cada icono: background-position más ancho y alto
• Tres disposiciones: automática y compacta, una fila, una columna
• Hueco ajustable, para que los vecinos no se sangren al escalar
• El modo @2x reduce a la mitad las posiciones y los tamaños y escribe background-size
• Nombres de clase derivados de los archivos, saneados a selectores válidos
• Los nombres duplicados reciben un sufijo, así dos iconos nunca comparten una regla
• El CSS llega como salida de texto aparte: cópialo o descárgalo como .css
• Las imágenes nunca se suben; funciona sin conexión

Cómo se usa

1. Suelta varios iconos en la zona de puntos (o elige varios archivos)
2. Elige la disposición y el hueco; marca @2x si los iconos son recursos 2×
3. Descarga el PNG empaquetado y copia el CSS generado
4. Pon el PNG en tu proyecto y apunta el url() a su ruta real

Preguntas frecuentes

¿Siguen teniendo sentido los sprites?

Depende. HTTP/2 y HTTP/3 abarataron mucho las peticiones extra, y los iconos SVG pueden incrustarse como un único conjunto de `<symbol>`. Pero cuando hay muchos iconos diminutos en mapa de bits (interfaces de juego, paneles de administración antiguos, barras de herramientas), los sprites siguen siendo la forma más sencilla de ganar: una petición en lugar de decenas, sin tocar tu compilación. Al contrario, con una docena de iconos, el SVG plano es más claro y mucho más fácil de recolorear.

¿Por qué dejar un hueco de 1–2px?

Porque escalar todo el sprite con `background-size` (la forma habitual de soportar pantallas de alta densidad) hace que el navegador interpole: al muestrear el borde de un icono arrastra también el del vecino, lo que aparece como una franja de color equivocado. Uno o dos píxeles totalmente transparentes cortan ese camino. A escala 1×, cero es perfectamente válido.

¿Qué hace exactamente el modo @2x?

Trata las entradas como recursos 2×: el `width` / `height` y el `background-position` de cada icono se reducen a la mitad en el CSS, y la clase base recibe un `background-size` con la mitad de las dimensiones del sprite. Los iconos se muestran entonces a su tamaño lógico en pantallas normales y a toda la densidad de píxeles en las de alta densidad. Equivocarse se nota como iconos al doble de tamaño (sin reducir) o como un pequeño fragmento de la esquina superior izquierda (sin background-size).

¿Cómo se deciden los nombres de clase?

El nombre del archivo pierde su extensión y se sanea a letras minúsculas, dígitos y guiones, y luego se añade tu prefijo. Sanear no es opcional: los nombres de clase entran en el CSS y en el HTML, y los caracteres CJK, los espacios o las comillas de un nombre de archivo romperían el selector o escaparían de un atributo. Un nombre que se queda sin nada usable (un archivo todo en CJK, por ejemplo) pasa a ser icon-1 por posición, y dos iconos que chocan en un nombre reciben un sufijo numérico (-2, -3), para que sus reglas no se sobrescriban.