La versión corta
- 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.
En esta página
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.
linear-gradient(90deg, #14101f 0%, #2a2147 100%)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, 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.
Ajuste para fotos
Notas
Ajuste para fotos
Notas
Ajuste para fotos
Notas
Ajuste para fotos
Notas
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 muestra cuánto usar.
Una fusión oscura y limpia a 1920×1080 es la imagen con más probabilidades de mostrar bandas tras la compresión.
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. 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 y WebP frente a PNG y JPG 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.
# 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.webpSi 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 muestra cómo superponer degradados con una textura de grano diminuta, y optimizar imágenes para la web explica qué busca Lighthouse.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil