Auditoría de artefactos de compresión 2025 — Qué mirar, cuándo empeora y cómo evitarlo

La compresión intercambia tamaño por calidad. Esta guía sistematiza cómo detectar regresiones rápidamente y preservar la calidad.

Nos enfocamos en vistas “rápidas de juzgar”: diferencias por formato, rutina de chequeo, patrones típicos de artefactos y mitigaciones. Incluye checklist breve para diseño/producción/entrega/QA.

Artefactos clave y dónde mirar

• Blocking (rejilla de macro‑bloques): obvio en JPEG de baja calidad; revisa cielos/piel
• Ringing (halos): alrededor de bordes fuertes; logos/texto/line art
• Banding (escalones en gradientes): especialmente en cielos/fondos desenfocados
• Sangrado de color/fringing de croma: líneas rojas/azules finas; bordes de color
• Ruido “mosquito”: ondulaciones alrededor de detalles; cabello/texturas

Referencia: Métricas de calidad de imagen SSIM/PSNR/Butteraugli — Guía práctica 2025

Consejos de observación (evita fallos)

• Zoom 200–300% alternando entre zonas planas y bordes (los artefactos saltan a la vista)
• Compara siempre contra el original con deslizador horizontal; menor carga cognitiva
• No juzgues con un solo patrón: verifica al menos 3 “riesgosos” (piel/cielo/madera/líneas finas)
• Compara a igual tamaño de archivo entre formatos para revelar fortalezas/debilidades

Condiciones que empeoran artefactos

1. Sobre‑compresión tras varias conversiones (re‑codificación)
2. Bajo bitrate + texturas de alta frecuencia (césped, pelo, tela)
3. Enfoque excesivo (sharpening)
4. Submuestreo 4:2:0 en líneas rojas/azules finas
5. Manejo incorrecto del espacio de color (cambios no deseados de gamut/gamma)

Tendencias por formato

• JPEG: blocking/ringing muy visibles; piel/cielo se ensucian rápido con calidad baja
• WebP (con pérdida): sangrado de croma en texto muy fino; bordes de color pueden “emborronarse” a alta saturación
• AVIF: suele ganar en fotos al mismo tamaño; a bitrate muy bajo, zonas de alto contraste pueden “embarrarse”

Flujo práctico (checks rápidos)

1. Empieza en Compresor de imágenes para fijar max‑width y calidad y obtener tamaño base
2. Compara con el original en Comparador y ejecuta los checks anteriores
3. Si hace falta, prueba variantes de submuestreo y espacio de color en Convertidor avanzado

Relacionado: Estrategia Definitiva de Compresión de Imágenes 2025 – Guía práctica para optimizar velocidad preservando la calidad

Umbrales heurísticos (aprox.)

• Texto/diagramas UI (líneas): en JPEG/WebP, mantén calidad media‑alta y compara AVIF al mismo tamaño; prueba 4:4:4 si hay fringing
• Fotografía (piel/cielo): prefiere AVIF; si hay halos, reduce sharpening y permite algo de ruido
• Visuales hero: apunta a 200–400 KB; elige el candidato con casi cero desajuste perceptual frente al original

Mitigaciones

• Evita recomprimir: exporta una vez desde la fuente de mayor calidad
• Revisa submuestreo: 4:4:4 para texto/líneas; 4:2:0 para fotos (por defecto)
• Añade ruido suave: reduce banding en gradientes propensos a posterización
• Define max‑width realista: entradas sobredimensionadas disparan carga y artefactos

CLI (puntos de partida)

JPEG (cjpeg)

# UI/line art (sin submuestreo + control moderado de saturación)
cjpeg -quality 82 -sample 1x1 -optimize -progressive -outfile out.jpg in.png

# Fotografía (4:2:0)
cjpeg -quality 78 -sample 2x2 -optimize -progressive -outfile out.jpg in.png

WebP (cwebp)

# Preservar line art
cwebp -q 82 -m 6 -alpha_q 90 -mt -o out.webp in.png

# Fotografía eficiente
cwebp -q 72 -m 4 -mt -o out.webp in.jpg

AVIF (avifenc)

# Equilibrio velocidad/calidad (speed 6, CQ 28)
avifenc --speed 6 --min 20 --max 35 --cq-level 28 -a tune=psnr -o out.avif in.png

# Line art: prueba 4:4:4
avifenc --speed 6 --min 18 --max 32 --cq-level 26 --yuv 444 -o out.avif in.png

Nota: Los umbrales reales varían por activo. Decide por comparación perceptual vs el original.

Checklist QA

• [ ] Sin blocks/banding en fondos planos
• [ ] Sin halos/sangrado en texto/logos
• [ ] Sin “mosquito noise” en patrones finos
• [ ] Espacio de color/gamut como se pretende (sRGB/P3)
• [ ] Dentro del presupuesto con umbrales claros por uso

Auditoría de 5 minutos

1. Prepara original y 2–3 candidatos (formato × calidad × tamaño)
2. Compara al 200% en orden: plano → bordes → líneas finas → piel → gradiente
3. Elige el menos objetable; si pesa mucho, reajusta y re‑verifica
4. Revisa a 1x/2x/3x antes de finalizar

FAQ

• P: ¿SSIM/PSNR bastan? R: Ayudan pero no sustituyen percepción. Halos/banding pueden discrepar de métricas.
• P: ¿WebP vs AVIF? R: AVIF tiende a ganar en fotos; WebP puede ser mejor en UI/líneas y velocidad.

Resumen

Define “qué mirar” y podrás garantizar calidad rápido. Usa comparación y menos recompressiones para evitar artefactos acumulados.

Apéndice A: mini UI de comparación

<div class="cmp">
  <img src="original.jpg" alt="original">
  <img class="top" src="candidate.avif" alt="candidate">
</div>
<input type="range" min="0" max="100" value="50" id="slider" />

<style>
  .cmp { position: relative; width: min(800px, 90vw); aspect-ratio: 4 / 3; }
  .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cmp img.top { clip-path: inset(0 0 0 calc(var(--split, 50%) )); }
  #slider { width: min(800px, 90vw); margin-top: 8px; }
</style>
<script>
  slider.addEventListener('input', (e) => {
    document.querySelector('.cmp img.top').style.setProperty('--split', e.target.value + '%');
  });
  slider.dispatchEvent(new Event('input'));
</script>

Apéndice B: texturas de prueba

• Gradientes (horizontales/radiales)
• Rejillas de líneas finas (con muestras rojo/azul/negro de alta frecuencia)
• Piel/cielo/madera/cabello/tela
• Texto/logos (bordes duros)

Prepara un set de imágenes “propensas a romperse” para decidir más rápido cada vez.