Crea una hoja de sprites CSS en el Mac
Agrupa iconos en una sola imagen con el CSS para mostrar cada uno, además de una vista previa en HTML.
Generador de sprites en un Mac
Capturas de pantalla de la app, con archivos de ejemplo.
Cómo usar Generador de sprites
- 1
Arrastra tus iconos
Añade dos o más imágenes. Cada nombre de archivo se convierte en una clase CSS, así que ponles antes un buen nombre, por ejemplo “search.png” y “cart.png”.
- 2
Define el espacio y el prefijo
Elige el espacio entre iconos y el prefijo de clase CSS.
- 3
Marca iconos Retina
Si tus iconos son @2x, activa la opción Retina para que se muestren a la mitad de tamaño, con nitidez.
- 4
Haz clic en Crear hoja
Los iconos se agrupan en filas y se guardan como sprite.png, con sprite.css y una página preview.html, en una carpeta con fecha en Descargas › OneMacTools.
- 5
Úsalo en tu sitio
Pon sprite.png y sprite.css juntos, enlaza el CSS y añade las clases a los elementos. Abre preview.html para ver todas las clases.
Qué hace Generador de sprites
Los iconos de cualquier tamaño se agrupan de forma compacta en filas, cada uno recibe su propia clase CSS con la posición y el tamaño correctos, y una página de vista previa los muestra todos. Ajusta la separación entre iconos, el prefijo de clase y si los iconos son @2x para pantallas Retina nítidas.
Ideal para
- Carga un conjunto de iconos en una sola petición
- Crea una hoja de sprites para un juego
- Agrupar banderas o emoji para un sitio web
Opciones explicadas
- Espacio entre iconos
- 0, 2, 4 u 8 px; el valor predeterminado es 2 px. Un pequeño espacio evita que se cuelen los iconos vecinos al ampliar la página.
- Los iconos son @2x (se muestran a la mitad de tamaño para pantallas Retina nítidas)
- Desactivado por omisión. Si está activado, el CSS muestra cada icono a la mitad de su tamaño en píxeles y escala la hoja para que coincida, así que los iconos de doble resolución se ven nítidos en pantallas Retina.
- Prefijo de clase CSS
- El inicio de cada nombre de clase; “icon” si se deja vacío. Con el prefijo icon, “search.png” pasa a ser .icon-search.
Buenas prácticas
- Pon nombres a los archivos en minúsculas y con guiones antes de empezar. Los nombres de clase salen de ellos, y “@2x” se quita automáticamente.
- Usa iconos con fondo transparente para que la hoja funcione con cualquier color de página.
- Crea iconos Retina exactamente al doble del tamaño de visualización, con tamaños en píxeles pares, para que al dividirlos por la mitad queden píxeles enteros.
- Comprime después sprite.png con Comprimir PNG; un PNG con paleta suele ser mucho más pequeño en hojas de iconos.
- Usa una separación de 2 px o más si los iconos se van a escalar o mostrar con la página ampliada.
Funciona con
- En
- Dos o más imágenes, normalmente iconos PNG, de cualquier tamaño.
- Salida
- sprite.png (todos los iconos juntos), sprite.css (una clase por icono con su tamaño y posición) y preview.html.
- Los iconos de distintos tamaños se agrupan de forma compacta en filas, primero los más altos.
- Los archivos con el mismo nombre reciben clases numeradas, como -2, para que no se pierda ninguno.
Preguntas sobre Generador de sprites
¿Qué es una hoja de sprites CSS?
Una imagen que contiene muchos iconos, con CSS que muestra un solo icono por elemento desplazando el fondo. Carga todos tus iconos en una sola petición.
¿Cómo uso el sprite en mi web?
Sube sprite.png y sprite.css a la misma carpeta, enlaza el CSS en tu página y añade clases como class="icon icon-search" a un elemento.
¿Cómo se crean los nombres de las clases?
A partir del nombre de cada archivo, en minúsculas y con los espacios y símbolos convertidos en guiones, tras tu prefijo. “Shopping Cart.png” con el prefijo icon se convierte en .icon-shopping-cart.
¿Puedo usar iconos de distintos tamaños?
Sí. Cada icono conserva su propio tamaño, y su clase CSS recibe el ancho y el alto correspondientes.
¿Cómo hago que los sprites se vean nítidos en pantallas Retina?
Crea los iconos al doble del tamaño al que los vas a mostrar y activa la opción @2x. Así el CSS los muestra a la mitad de tamaño y se ven nítidos en pantallas de alta resolución.
¿Puedo usarlo para sprites de videojuegos?
Sí. sprite.css indica la posición y el tamaño de cada imagen en la hoja, y puedes leerlo desde un motor de juegos o desde código de canvas.
¿Generador de sprites sube mis archivos?
No. Generador de sprites funciona por completo en tu Mac, así que tus archivos nunca salen de él y funciona sin conexión.
¿Generador de sprites modificará mis archivos originales?
No. Los resultados se guardan como archivos nuevos en una carpeta con fecha en Descargas › OneMacTools, y tus originales se quedan exactamente como estaban, salvo que actives una opción que diga lo contrario.
¿Qué necesita Generador de sprites?
Solo un Mac con macOS 26 o posterior. No hay que instalar nada más.
Haz esto a continuación
Reduce los PNG un 60–80 % reduciendo los colores y conservando la transparencia: ideal para capturas de pantalla, logotipos e iconos.
Imagen a Base64Convierte imágenes en data URI Base64, listos para pegar en HTML, CSS o JSON.
Herramientas de Imágenes relacionadas
Convierte entre PNG, JPEG, HEIC, AVIF y TIFF. Lee WebP, RAW y más.
Comprimir imágenesReduce fotos para correo y web, con una vista previa del antes y el después en directo.
Convertir a WebPCrea imágenes WebP ligeras y listas para la web, con o sin pérdida, conservando la transparencia.
Redimensionar imágenesRedimensiona por el lado más largo, píxeles exactos, porcentaje o tamaño de impresión en cm, mm o pulgadas con los PPP que necesites.
Recortar imágenesRecorta a una proporción o a una zona exacta, o quita automáticamente los bordes lisos: una foto o una carpeta entera.
Girar y voltear imágenesGira o voltea fotos de una vez.
Generador de sprites y 150 más.
Una app. Un precio.
Las 151 herramientas. Descarga gratuita, un único pago por la licencia, y es tuya para siempre.