Sobre esta herramienta
Una hoja de sprites CSS empaqueta todo un conjunto de imágenes pequeñas —iconos, glifos de interfaz, emojis— en un único archivo de imagen más grande, y luego usa background-position de CSS para mostrar justo el fragmento correcto para cada elemento. Antes de la multiplexación de HTTP/2, esto era un truco de rendimiento significativo: un navegador que abría una docena de conexiones separadas para una docena de archivos de iconos diminutos era más lento que abrir una sola conexión para una imagen combinada, y esa diferencia todavía puede importar en conexiones HTTP/1.1, límites estrictos de número de solicitudes de un CDN, o simplemente al reducir las solicitudes de recursos que bloquean el renderizado en una red lenta.
Esta herramienta construye ambas mitades por ti, totalmente en tu navegador: suelta tus archivos de iconos, elige si se colocan en una sola fila o columna y cuánto espaciado transparente los separa, y ella los dibuja en un único lienzo, lo codifica como PNG (para preservar la transparencia) y genera la regla CSS background-position exacta para cada uno — cópiala directamente en tu hoja de estilos. Dicho esto, los sprites son una técnica antigua: para la mayoría de proyectos nuevos, el SVG en línea o una fuente de iconos SVG suele ser más simple de mantener y escala mejor a cualquier tamaño, así que trátalo como una herramienta más del kit y no como la única respuesta correcta — recurre a él cuando ya tengas un conjunto de iconos rasterizados (PNG, no vectores) y quieras reducir el número de solicitudes.
Preguntas frecuentes
¿Los sprites CSS siguen siendo relevantes, o debería usar iconos SVG en su lugar?
Para la mayoría de los proyectos nuevos, el SVG en línea o una fuente/sprite de icono SVG suele ser la opción más moderna (nítido en cualquier nivel de zoom, fácilmente recoloreable con CSS, sin problemas de alineación de cuadrícula de píxeles fijos). Los sprites CSS siguen siendo genuinamente útiles para conjuntos de iconos fotográficos/rasterizados que no pueden representarse como formas vectoriales, para bases de código heredadas ya construidas en torno a la técnica, o simplemente como una forma rápida y sin dependencias de agrupar un pequeño conjunto de iconos con solicitudes HTTP mínimas. Usa lo que se ajuste a tus restricciones reales; esta herramienta está aquí para cuando una hoja de sprites rasterizada es la herramienta adecuada para el trabajo, no una afirmación de que siempre es la mejor opción.
¿Por qué no se añade relleno final después de la última imagen?
Esto mantiene el tamaño total de la hoja lo más pequeño posible; el ajuste de relleno existe para evitar el sangrado de textura ENTRE iconos adyacentes cuando la hoja se escala/amplía, lo cual solo es una preocupación para los bordes compartidos por dos iconos; el propio borde exterior de la hoja no tiene un icono vecino al otro lado, así que el espacio adicional ahí no serviría a ese propósito y solo desperdiciaría tamaño de archivo, además de añadir una inconsistencia en qué tan lejos está cada icono del borde absoluto de la hoja según su posición.