¿Hojas de sprites vs. sprites SVG vs. fuentes de iconos?

Los sprites PNG aún ganan cuando la fuente es un ráster real (arte de juego, miniaturas de fotos). Para iconografía UI prefiere sprites SVG (` ` + ` `) — escalan y responden a currentColor. Las fuentes de iconos son ahora mayormente un fallback legacy.

¿Qué pasa con la transparencia?

Si mantienes el fondo transparente, el PNG se guarda con alfa (el tablero de ajedrez que ves en la vista previa es solo para hacer visible el área transparente). Si eliges blanco o negro, esos se hornean en la hoja.

Generador de Hoja de Sprites de Imágenes

Imagen

Combina muchas imágenes pequeñas (iconos, estados UI, frames de personaje) en un PNG descargable y emite un bloque CSS que coloca cada uno por `background-position`. Reduce las peticiones HTTP cuando una fuente de iconos, un sprite SVG o un pipeline real de hoja de sprites no es una opción. El layout es franja horizontal, franja vertical, o una grid de columnas fijas; la hoja se dimensiona para ajustar el ítem más grande en cada fila o columna. Los archivos se procesan completamente en el lado del cliente vía canvas — tus iconos nunca salen del navegador.

—

Cómo usar

Suelta o elige las imágenes. Aparecen en el orden que el OS las entrega.
Elige layout: franjas horizontal/vertical son las más simples, grid es más densa. Configura padding para evitar sangrado.
Descarga el PNG, copia el CSS, envíalos juntos — coincide el nombre de clase que pusiste en el prefijo CSS.

Preguntas frecuentes

¿Hojas de sprites vs. sprites SVG vs. fuentes de iconos?: Los sprites PNG aún ganan cuando la fuente es un ráster real (arte de juego, miniaturas de fotos). Para iconografía UI prefiere sprites SVG (`<symbol>` + `<use>`) — escalan y responden a currentColor. Las fuentes de iconos son ahora mayormente un fallback legacy.
¿Qué pasa con la transparencia?: Si mantienes el fondo transparente, el PNG se guarda con alfa (el tablero de ajedrez que ves en la vista previa es solo para hacer visible el área transparente). Si eliges blanco o negro, esos se hornean en la hoja.