Generador de sprites CSS
Agrega tus iconos o imágenes y obtén un sprite sheet optimizado más las clases CSS que muestran cada imagen con background-position. Elige diseño empaquetado, horizontal, vertical o en cuadrícula, el margen y la escala retina; todo se ejecuta en tu navegador.
Última actualización:
Imágenes 0
Cómo usar Generador de sprites CSS
- Agrega imágenes: elige o suelta tus iconos (PNG, JPG, GIF, WebP o SVG). Se cargan iconos de ejemplo para que puedas probarlo de inmediato.
- Elige un diseño (Empaquetado da el sprite más pequeño) y define el margen entre imágenes.
- Define el prefijo de clase y el nombre del archivo del sprite usado en url() del CSS.
- Activa Retina @2x si tus imágenes son del doble de tamaño, para que el CSS las muestre a la mitad y nítidas en pantallas de alta densidad.
- Descarga el PNG del sprite y el CSS, o el ZIP que también incluye una página de demostración.
Cómo usar el CSS del sprite
Sube el PNG junto a tu hoja de estilos (o cambia el nombre del archivo por su ruta real), pega el CSS y agrega ambas clases a un elemento en línea vacío:
<span class="icon icon-home" role="img" aria-label="Home"></span>
/* change the image on hover */
.button:hover .icon-star { background-position: -52px -2px; }Cada imagen conserva su propio ancho y alto, y background-position mueve el sprite para que solo se vea esa imagen. Los valores son negativos porque el sprite se desplaza hacia arriba y a la izquierda.
Cómo elegir las opciones correctas
| Opción | Cuándo usarla |
|---|---|
| Empaquetado | Imágenes de tamaños mixtos; produce el sprite más pequeño con un algoritmo de empaquetado en árbol binario. |
| Horizontal / vertical | Fotogramas de animación (recórrelos con steps()) o iconos del mismo tamaño que deben mantener su orden. |
| Cuadrícula | Conjuntos de iconos y banderas de tamaño similar; cada imagen queda centrada en una celda igual. |
| Margen de 2-4px | Evita que se cuelen las imágenes vecinas cuando la página se amplía o se escala. |
| Retina @2x | Tus imágenes de origen tienen el doble de resolución; el CSS las muestra a la mitad de tamaño con background-size. |
Consejo: comprime el PNG descargado con un optimizador de PNG antes de publicarlo; los sprites con grandes áreas transparentes suelen reducirse entre un 30 y un 70%.
Preguntas frecuentes
¿Qué es un sprite CSS?
Un sprite CSS es una sola imagen que contiene muchas imágenes pequeñas, como iconos. Cada elemento muestra el mismo archivo como fondo, y background-position lo desplaza para que solo se vea la parte correcta. Reduce el número de solicitudes de imágenes y evita parpadeos cuando cargan las imágenes de hover.
¿Los sprites CSS siguen siendo útiles con HTTP/2?
HTTP/2 abarata muchas solicitudes pequeñas, así que los sprites importan menos que antes. Aun así son prácticos para gráficos de juegos, conjuntos de emojis o banderas, estados hover que deben aparecer al instante y entornos de correo electrónico o heredados. Para iconos simples de un solo color, los iconos SVG suelen ser mejor opción.
¿Por qué agregar margen entre imágenes?
Cuando un sprite se escala, se amplía o se renderiza en posiciones de píxeles fraccionarias, el navegador puede tomar píxeles de la imagen vecina y mostrar líneas finas en los bordes. Unos pocos píxeles de margen transparente evitan esta mezcla.
¿Cómo funciona background-position en un sprite?
La posición es negativa: para mostrar un icono que está a 64px de la izquierda y 32px de la parte superior del sprite, usa background-position: -64px -32px con el elemento del ancho y el alto del icono.
¿Qué hace la opción Retina @2x?
Supone que tus imágenes de origen tienen el doble del tamaño con el que deben verse. El sprite conserva la resolución completa, mientras que el CSS reduce a la mitad cada ancho, alto y posición y define background-size a la mitad del tamaño del sprite, para que los iconos se vean nítidos en pantallas de alta densidad.
¿Qué diseño debo elegir?
Empaquetado crea el sprite más compacto para tamaños mixtos. Las tiras horizontales o verticales son fáciles de leer y funcionan bien para iconos del mismo tamaño o fotogramas de animación. Cuadrícula coloca celdas iguales en filas y columnas, lo que conviene a los conjuntos de iconos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.