Compresor de sprites de imagen

• Compresión de sprites de imagen instantánea en tu navegador: comprime hojas de sprites CSS al instante en tu navegador mediante cuantización de paleta de color por corte de mediana, sin subidas a servidores, sin procesamiento en la nube y sin esperas. El compresor de sprites de imagen procesa tu PNG por completo en tu dispositivo en segundos.
• Compresor de sprites de imagen online seguro: tu hoja de sprites nunca sale de tu dispositivo. El compresor de sprites de imagen se ejecuta por completo en tu navegador: sin subidas a servidores, sin transmisión de datos y 100 % privado. Seguro para recursos de interfaz propietarios, conjuntos de iconos y hojas de sprites de producción.
• 5 opciones de tamaño de paleta para un control preciso: el compresor de sprites de imagen ofrece cinco tamaños de paleta, de 16 a 256 colores, para que elijas el equilibrio adecuado entre tamaño de archivo y calidad visual. Las hojas de sprites CSS con iconos planos suelen verse idénticas con 64-128 colores y una reducción del 30 al 60 %.
• Compresor de sprites de imagen online sin instalación: comprime hojas de sprites CSS directamente en tu navegador, sin descargas de software, sin plugins y sin cuenta. Funciona en cualquier navegador moderno en Windows, macOS y Linux.

• Optimización del rendimiento de sitios web heredados: comprime las hojas de sprites CSS usadas en sitios web antiguos para reducir el tamaño de la carga de las peticiones HTTP. El compresor de sprites de imagen reduce el tamaño del archivo PNG de sprites entre un 30 y un 60 % mediante cuantización de paleta, mejorando los tiempos de carga sin cambiar el diseño de los sprites ni los valores CSS background-position.
• Optimización de sprites de temas de WordPress: comprime las hojas de sprites usadas en temas y plugins de WordPress para mejorar las puntuaciones de PageSpeed Insights. El compresor de sprites de imagen funciona con cualquier sprite PNG: sube el sprite, elige un tamaño de paleta y sustituye el archivo original en la carpeta de recursos de tu tema.
• Compresión de sprites de iconos de temas de Shopify: reduce el tamaño de las hojas de sprites de iconos usadas en temas de Shopify para mejorar la velocidad de carga de la tienda. El compresor de sprites de imagen es ideal para sprites de iconos de color plano: 64 colores suelen producir una salida visualmente idéntica con un archivo entre un 40 y un 50 % más pequeño.
• Optimización de recursos de bibliotecas de componentes de interfaz: comprime las hojas de sprites de iconos usadas en bibliotecas de componentes y sistemas de diseño antes de publicarlas en npm. El compresor de sprites de imagen reduce el tamaño de descarga de los recursos de imagen de tu paquete sin necesidad de un pipeline de procesamiento de imágenes en la compilación.
• Compresión de hojas de sprites para juegos: comprime hojas de sprites para juegos basados en navegador y aplicaciones interactivas para reducir el tiempo de carga inicial. El compresor de sprites de imagen conserva la transparencia y las dimensiones de la imagen: el sprite comprimido funciona como sustituto directo del original.
• Migración de configuraciones de sprites heredadas: comprime las hojas de sprites CSS existentes como parte de una auditoría de rendimiento antes de migrar a iconos SVG o fuentes de iconos. El compresor de sprites de imagen te ayuda a cuantificar el ahorro de tamaño alcanzable con el enfoque actual de sprites frente al esfuerzo de una migración completa.

Una hoja de sprites CSS es una única imagen PNG que contiene varias imágenes más pequeñas (iconos, botones, elementos de interfaz) dispuestas en una cuadrícula. Las reglas CSS background-position muestran cada sprite individual desplazando la imagen de fondo. Las hojas de sprites reducen las peticiones HTTP, pero pueden ser archivos PNG grandes. Nuestro compresor de sprites de imagen reduce el tamaño de la hoja de sprites mediante cuantización de paleta de color por corte de mediana, un algoritmo que reduce el número de colores únicos de la imagen de millones a una paleta fija (16-256 colores) y luego recodifica el PNG. Es la misma técnica que usan herramientas como pngquant e ImageOptim, implementada por completo en tu navegador con la API Canvas.

1. 1. Sube tu hoja de sprites: arrastra y suelta tu hoja de sprites PNG en la zona de carga o haz clic para explorar. La imagen se carga en la API Canvas del navegador: no se envían datos a ningún servidor. Se admiten formatos PNG, GIF, BMP y WebP.
2. 2. Elige un tamaño de paleta y haz clic en «Comprimir sprite»: el compresor muestrea píxeles de la imagen, construye una paleta de color óptima con cuantización por corte de mediana, asigna cada píxel al color de paleta más cercano y recodifica el resultado como PNG. El procesamiento se ejecuta por completo en tu navegador.
3. 3. Descarga el sprite comprimido: el PNG comprimido se descarga automáticamente. El panel de resultados muestra el tamaño original, el tamaño comprimido y el porcentaje de reducción. Usa «Descargar de nuevo» si lo necesitas. Sustituye el archivo de sprite original en tu proyecto: no se requieren cambios en el CSS.

• Paleta de color: el número de colores únicos se reduce de millones (PNG de 24 bits) al tamaño de paleta seleccionado (16-256 colores). Cada píxel se asigna al color de paleta más cercano usando la distancia euclídea en el espacio RGB.
• Codificación PNG: el PNG recodificado usa el modo de color indexado (basado en paleta) en lugar de color verdadero, lo que comprime mucho mejor con DEFLATE, el algoritmo de compresión que se usa dentro de los archivos PNG.
• Transparencia conservada: los valores del canal alfa se conservan durante la cuantización: los píxeles transparentes y semitransparentes del sprite original se mantienen en la salida comprimida.
• Dimensiones sin cambios: el ancho y el alto de la imagen son idénticos a los originales: el sprite comprimido es un sustituto directo que funciona con las reglas CSS background-position existentes sin ningún cambio.

Para sprites de iconos de color plano (iconos de interfaz, de navegación, de redes sociales), 64 colores suele producir una salida visualmente idéntica con un archivo entre un 40 y un 50 % más pequeño. Para sprites con degradados o basados en fotos, usa 128 o 256 colores para evitar bandas de color visibles. Si ves artefactos de color en la salida comprimida, aumenta el tamaño de la paleta. El compresor de sprites de imagen muestra el ahorro exacto en bytes para cada tamaño de paleta, así puedes encontrar el ajuste óptimo para tu hoja de sprites concreta.