Generador de sprite CSS (juntar íconos en una imagen)

Generador de sprite CSS (juntar íconos en una imagen): para qué sirve

Un sprite junta varios íconos en una sola imagen, y el CSS muestra el fragmento correcto en cada lugar con background-position. El navegador hace una petición en lugar de diez y los íconos de hover no parpadean.

Elige los íconos, la disposición (cuadrícula, fila o columna), el espacio entre ellos y el formato. Descarga el sprite y copia el CSS con una clase por ícono (el nombre del archivo se convierte en el nombre de la clase), ancho, alto y posición. La opción retina muestra a la mitad los íconos hechos al doble de tamaño, nítidos en pantallas de alta densidad.

Cómo usar

1. Elige los íconos.
2. Ajusta la disposición, el espacio y el formato.
3. Descarga el sprite y copia el CSS.

Cuándo usar

• Íconos de redes sociales con hover.
• Banderas e insignias.
• Sprites de juegos en HTML.

Preguntas frecuentes

¿Para qué sirve un sprite?

En lugar de que el navegador descargue diez íconos por separado, descarga una sola imagen, y el CSS muestra el fragmento correcto en cada lugar con background-position. Esto reduce el número de peticiones al servidor y evita íconos parpadeando al pasar el mouse, porque el estado de hover ya está cargado.

¿Todavía vale la pena usar sprites con HTTP/2?

Con HTTP/2 el costo de muchos archivos pequeños bajó bastante, así que la ganancia es menor que antes. Los sprites siguen siendo útiles para conjuntos de íconos de hover, banderas, insignias y juegos en canvas, y para quien no puede usar SVG en línea.

¿Qué es la opción retina?

Si tus íconos se hicieron con el doble del tamaño en que se muestran, marca la opción: el CSS muestra cada uno a la mitad con background-size, y se ven nítidos en pantallas de alta densidad, como las de celulares y Macs.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares