# Compresión de imágenes sin estropear los degradados [Canonical HTML page](https://gradiently.design/es/guide/image-compression) Las fotos aguantan una compresión fuerte. Los degradados, no. Aquí verás por qué una fusión suave se convierte en franjas y los ajustes exactos que la mantienen suave con un archivo ligero. ## The short version - La compresión de imágenes reduce el tamaño de los archivos sin pérdida, guardando los mismos píxeles de forma más eficiente, o con pérdida, descartando detalle. - Los degradados suaves son los que más sufren la compresión con pérdida, porque los colores vecinos se fusionan en bandas y bloques visibles. - Los degradados oscuros y sutiles son los primeros en mostrar bandas, porque una imagen de 8 bits tiene muy pocos valores distintos entre dos colores oscuros cercanos. - Una capa ligera de grano o tramado oculta las bandas mejor que cualquier ajuste de calidad, porque rompe los escalones. - Para gráficos con degradados, exporta en PNG o WebP sin pérdida, o usa JPG con calidad 90 o superior y el submuestreo de croma desactivado. La **compresión de imágenes** reduce un archivo de una de dos formas. La compresión sin pérdida guarda exactamente los mismos píxeles de forma más eficiente, como comprimir un documento en zip. La compresión con pérdida descarta el detalle que prevé que no notarás. Las fotografías disimulan bien esa pérdida porque están llenas de textura. Los degradados suaves no disimulan nada: comprime demasiado una fusión suave y se romperá en franjas, manchas y bloques. La solución es una mezcla del formato adecuado, el ajuste de calidad adecuado y un poco de grano. ## Por qué se rompen los degradados al comprimirlos Una imagen estándar guarda 256 niveles para el rojo, el verde y el azul. Parece mucho hasta que miras una fusión oscura y sutil. Al pasar de `#14101f` a `#2a2147` en una cabecera de 1920 píxeles de ancho, el canal rojo solo sube 22 niveles. Cada nivel tiene que estirarse unos 87 píxeles, así que ya estás a un paso de las bandas visibles antes de cualquier compresión. Una fusión con muy pocos pasos: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)` Colores oscuros cercanos en una superficie amplia: el riesgo clásico de bandas. En una buena pantalla quizá ya veas aquí escalones verticales tenues. Después, la compresión con pérdida simplifica la imagen en pequeños bloques y fusiona los colores casi iguales. En una foto, los píxeles cercanos rara vez son iguales, así que cambia poco. En un degradado, casi todos los vecinos son casi iguales, así que tramos enteros de color se reducen a uno solo. Eso son [las bandas en los degradados](https://gradiently.design/es/guide/gradient-banding), y las fusiones oscuras y pastel son las que más las muestran. ### Hace bandas con facilidad - Fusiones oscuras entre colores cercanos - Pasteles pálidos en una superficie grande - Superficies digitales perfectamente limpias - Formatos anchos como una cabecera de 1920×1080 ### Aguanta bien - Fusiones vivas con paradas de color lejanas - Degradados con grano o textura - Fotos e ilustraciones cargadas de detalle - Imágenes pequeñas con tramos cortos de color ## Los ajustes de calidad que importan Cada formato tiene un control principal y algunos ocultos. Estos puntos de partida son prudentes para gráficos con degradados y texto; las fotos normalmente admiten valores más bajos. Juzga siempre al 100% de zoom en una buena pantalla, nunca en una miniatura. | Formato | Ajuste para gráficos con degradados | Ajuste para fotos | Notas | | --- | --- | --- | --- | | PNG | Sin pérdida, color completo | Rara vez la mejor opción | Evita reducir a 256 colores en degradados | | JPG | Calidad 90 a 95, submuestreo desactivado (4:4:4) | Calidad 80 a 85 | Nunca edites y guardes un JPG una y otra vez | | WebP | Sin pérdida, o con pérdida 85 a 90 | Con pérdida 75 a 80 | La mejor opción por defecto para tu propia web | | AVIF | Con pérdida a calidad alta, prueba con cuidado | Calidad media | Los archivos más pequeños, más lento de codificar | Los números de calidad no son comparables entre formatos ni siquiera entre herramientas, así que tómalos como puntos de partida para probar. ### Submuestreo de croma La mayoría de los codificadores JPG guardan el color a la mitad de resolución que el brillo, lo que se escribe 4:2:0. En las fotos el ojo apenas lo nota, pero las letras de color y los degradados saturados acaban con bordes blandos y emborronados. Muchas herramientas lo esconden en una opción avanzada; desactivarlo (4:4:4) cuesta un poco de tamaño y mantiene nítidos los bordes de color. ### Cuantización de PNG Los optimizadores de PNG suelen reducir los archivos limitándolos a una paleta de 256 colores o menos. Es excelente para logotipos planos y terrible para degradados, que necesitan miles de matices. Si un PNG comprimido de repente muestra bandas, la cuantización es casi siempre la causa. ## El grano: la mejor solución contra las bandas Añadir una capa fina de ruido suena al revés, pero es el remedio más fiable. El grano dispersa píxeles un poco más claros y más oscuros, así que el ojo funde los escalones en una rampa suave, y el compresor tiene textura que conservar en lugar de tramos planos que fusionar. Además, hace que un degradado digital se sienta como una superficie. [Los degradados con grano](https://gradiently.design/es/guide/grainy-gradients) muestra cuánto usar. Una cabecera web ancha y oscura con un degradado suave y un titular corto, que ilustra el riesgo de bandas Una fusión oscura y limpia a 1920×1080 es la imagen con más probabilidades de mostrar bandas tras la compresión. Una cabecera web ancha con un degradado texturizado y con grano detrás del mismo titular Con un grano fino en la superficie, el mismo tipo de fusión sobrevive a la compresión y se lee como un material. En la web puedes añadir el grano con CSS o SVG en lugar de incrustarlo en una imagen grande, lo que mantiene la descarga diminuta. Consulta [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture). Los Marks de Gradiently llevan el grano como parte de su material, así que un diseño hecho con uno ya tiene la textura que le ayuda a sobrevivir a la recompresión de una plataforma. ## Un método para comprimir cualquier imagen 1. **Redimensiona al tamaño de visualización** El mayor ahorro son los píxeles que nunca necesitaste. Una publicación de Instagram de 1080×1350 debe exportarse a 1080×1350, no a 4000 píxeles de ancho. 2. **Elige el formato según el contenido** Texto, logotipos y degradados: PNG o WebP sin pérdida. Fotos: JPG, WebP o AVIF. [PNG frente a JPG](https://gradiently.design/es/guide/png-vs-jpeg) y [WebP frente a PNG y JPG](https://gradiently.design/es/guide/webp-images) profundizan más. 3. **Pon una calidad alta y luego bájala** Empieza en 90, baja de cinco en cinco y compara al 100%. Detente en el paso anterior a ver un cambio en el degradado más oscuro. 4. **Comprime una vez, desde el original** Guarda un original sin comprimir. Cada nueva exportación sale de él, nunca de un JPG anterior. 5. **Revisa el archivo final donde va a vivir** Sube una publicación de prueba o abre la página en un móvil. Las plataformas y las CDN pueden volver a comprimir. ## Herramientas de compresión fiables La aplicación web Squoosh de Google te deja comparar formatos y ajustes lado a lado con un deslizador, que es la forma más rápida de aprender qué hace cada control. Para carpetas de imágenes, los codificadores de línea de comandos hacen el mismo trabajo en lote. ```bash # JPG at quality 92 with full colour resolution (ImageMagick) magick hero.png -quality 92 -sampling-factor 4:4:4 hero.jpg # Lossless WebP for a gradient graphic cwebp -lossless hero.png -o hero.webp # Lossy WebP for a photo cwebp -q 78 photo.png -o photo.webp ``` Ejecútalos sobre un original sin comprimir, nunca sobre un archivo que ya haya pasado por una compresión con pérdida. Si tu degradado es el fondo de una web, la imagen más ligera es no tener imagen: un degradado CSS no cuesta ninguna descarga y nunca hace bandas por compresión, aunque aún puede mostrar escalones de 8 bits en fusiones oscuras y anchas. [Los fondos CSS](https://gradiently.design/es/guide/css-background-image) muestra cómo superponer degradados con una textura de grano diminuta, y [optimizar imágenes para la web](https://gradiently.design/es/guide/lighthouse-image-performance) explica qué busca Lighthouse. ## FAQ ### ¿Cómo comprimo imágenes sin perder calidad? Redimensiona al tamaño en que se muestra la imagen, usa PNG o WebP sin pérdida para gráficos y JPG, WebP o AVIF con pérdida a calidad alta para fotos. Compara al 100% de zoom antes de bajar el ajuste. ### ¿Por qué la compresión provoca bandas en los degradados? La compresión con pérdida fusiona colores casi idénticos, y un degradado suave está hecho casi por completo de vecinos casi idénticos, así que los tramos de color se reducen a franjas visibles. ### ¿Cuál es el mejor ajuste de calidad JPEG? Entre 80 y 85 para fotografías y entre 90 y 95 para gráficos con texto o degradados. Los números de calidad varían entre herramientas, así que revisa el resultado al 100% de zoom. ### ¿Añadir grano reduce de verdad las bandas? Sí. Un grano fino rompe los escalones entre colores para que el ojo lea una rampa suave, y da al compresor textura que conservar en lugar de zonas planas que fusionar. ### ¿Debo comprimir los archivos PNG? La optimización de PNG sin pérdida siempre es segura. Evita reducir un PNG con degradado a una paleta de 256 colores, porque provoca bandas.