Sumá velocidad y orden usando sprites para íconos e imágenes repetidas

¿Tenés muchos íconos o pequeñas imágenes que se repiten por todo el sitio? Agrupalos en un solo archivo sprite y hacé que tu web cargue más rápido con menos pedidos al servidor.

¿Qué es un sprite?

Un sprite es una imagen que contiene varias gráficas más pequeñas dentro de sí: íconos, flechas, logos, decorativos... En lugar de hacer un pedido HTTP por cada imagen, el navegador descarga una sola y vos elegís qué parte mostrar con CSS.

¿Cuándo conviene usar sprites?

Cuando tenés muchos íconos pequeños distribuidos por todo el sitio.
Cuando usás las mismas imágenes varias veces (check, estrella, corazón, etc.).
Cuando querés reducir la cantidad de archivos que carga el navegador.

¿Cómo se usa un sprite clásico (PNG)?

Creás una imagen grande que contenga todos tus íconos.
Con CSS, usás background-image y ajustás la posición con background-position para mostrar solo la parte que necesitás.

/* Sprite completo: sprite.png contiene 4 íconos en línea */
.icon {
  width: 32px;
  height: 32px;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-check { background-position: 0 0; }
.icon-star { background-position: -32px 0; }
.icon-heart { background-position: -64px 0; }

¿Y con SVG? ¡Todavía mejor!

Los sprites SVG te permiten mantener la calidad vectorial y acceder a cada ícono por ID:

<svg style="display:none">
  <symbol id="icon-check" viewBox="0 0 20 20">
    <path d="..." />
  </symbol>
</svg>

<svg class="icon">
  <use href="#icon-check" />
</svg>

También podés cargar un sprite SVG externo:

<use href="sprite.svg#icon-check"></use>

Ventajas de usar sprites

Reducís la cantidad de pedidos HTTP.
Centralizás los íconos en un solo archivo, más fácil de mantener.
Mejorás la performance de carga inicial.
Con SVG, mantenés calidad, accesibilidad y posibilidad de animaciones.

Herramientas para generarlos

csssprites.com para PNG
IcoMoon para crear sprites SVG personalizados
svgstore.dev para armar tus propios sets

¿Cuándo no usar sprites?

Si ya usás una librería moderna de íconos tipo Font Awesome, Heroicons, Material Icons vía CDN o componentes JS/SVG individuales, no hace falta usar sprites. Pero si querés performance pura y control total, son una gran opción.

Conclusión

Los sprites siguen siendo una técnica poderosa para sitios que buscan optimizar al máximo. Si tenés muchos íconos o gráficos repetidos, agrupalos en uno solo y mostralos estratégicamente con CSS o SVG. Menos archivos, más velocidad y orden en tu proyecto.