DevToolPal
ES

Generador de sprites CSS

Combina iconos en una sola hoja de sprites PNG y obtén las clases CSS con background-position para cada imagen.

Se ejecuta en local, nunca se sube

Opciones

Imágenes de origen

Imágenes (0)

Añade imágenes PNG, SVG, GIF o JPG. No se sube nada.

Sprite

CSS

Qué hace esta herramienta

El generador de sprites CSS combina un conjunto de iconos o imágenes pequeñas en una sola hoja de sprites y escribe el CSS para mostrar cada una. Añade archivos PNG, SVG, GIF o JPG, elige cómo distribuirlos y descarga el PNG del sprite junto con una hoja de estilos que tiene una clase por imagen.

Los nombres de clase salen de los nombres de archivo: Home Icon.png se convierte en .icon-home-icon, y los nombres duplicados reciben un número. La disposición Compacta usa bin packing para colocar imágenes de distintos tamaños en la hoja más pequeña posible; Vertical, Horizontal y Cuadrícula dan posiciones predecibles.

Cómo se usa

  1. Pulsa Añadir imágenes… y selecciona tus iconos (o empieza con el conjunto de ejemplo).
  2. Elige una Disposición y una Separación. Un poco de separación evita que los iconos vecinos se mezclen cuando el navegador los escala.
  3. Define el Prefijo de clase y el Nombre del archivo del sprite que se usa en background-image.
  4. Elige @2x si tus imágenes están dibujadas al doble de tamaño para pantallas retina.
  5. Pulsa Descargar PNG y Descargar CSS (o Copiar imagen para pegar el sprite en una herramienta de diseño o un chat), sube ambos archivos y usa las clases: <span class="icon icon-home"></span>.

Ejemplo

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Consejos

  • Agrupa en un mismo sprite los iconos que cambian a la vez; regenerar la hoja cambia todas las posiciones.
  • Para iconos de un solo color que deban cambiar de color con CSS, una fuente de iconos SVG o SVG en línea puede encajar mejor.

Preguntas frecuentes

› ¿Qué es un sprite CSS?

Una sola imagen que contiene muchas imágenes pequeñas. Cada icono se muestra poniendo el sprite como fondo de un elemento y desplazándolo con background-position, así que la página necesita una petición en lugar de decenas.

› ¿Siguen siendo útiles los sprites con HTTP/2?

Menos que antes, pero siguen ayudando con muchos iconos diminutos, plantillas de correo, juegos y proyectos heredados, y evitan el parpadeo de iconos que se cargan uno a uno.

› ¿Qué hace la opción @2x?

Si tus imágenes de origen están dibujadas al doble del tamaño de visualización, el CSS divide a la mitad cada ancho, alto y posición y añade background-size, para que los iconos se vean nítidos en pantallas de alta densidad.

› ¿Se suben mis imágenes?

No. El sprite se dibuja en tu navegador con un canvas y el CSS se genera en local.