Dithering ordenado: calidad y rendimiento

Si trabajas con gráficos, seguro ya viste este problema: tienes una imagen con pocos colores, la conviertes a una paleta reducida y de pronto aparecen bandas, manchas raras o un resultado plano. Eso pasa mucho en pixel art, exportación para web, herramientas de preview, filtros retro y pipelines donde cada byte cuenta. El dithering ordenado existe justamente para suavizar esa pérdida, pero no todos los métodos se comportan igual cuando miras calidad visual y costo de cómputo.

La revisión del algoritmo de Yliluoma vuelve a poner el tema sobre la mesa porque combina dos cosas que suelen pelearse entre sí: una salida visual más limpia y una implementación que no se va al suelo en rendimiento. Si haces tooling gráfico, shaders, conversión de assets o incluso generadores de arte, vale la pena entender qué resuelve, dónde brilla y dónde todavía conviene usar otra cosa.

Qué problema resuelve el dithering ordenado

Cuando reduces una imagen a una paleta corta, cada píxel original necesita “caer” en un color cercano. Si haces esa asignación de forma directa, aparecen saltos visibles entre tonos. En una foto de cielo, por ejemplo, pasar de 256 niveles a 16 puede dejar franjas muy marcadas. En un retrato, los degradados de piel se rompen. En una UI con iconos o ilustración, los bordes suaves se ensucian.

El dithering intenta engañar al ojo con patrones de error controlado. En vez de elegir siempre el color más cercano, distribuye el error espacialmente. El resultado no es una copia exacta del original, pero sí una imagen que, vista a cierta distancia o en una pantalla pequeña, conserva mejor la sensación de gradiente y volumen.

El dithering ordenado usa una matriz fija de umbrales. Esa matriz decide qué píxeles se “empujan” antes hacia un color u otro. A diferencia de técnicas de error diffusion como Floyd-Steinberg, aquí el patrón es predecible. Eso tiene dos ventajas claras: es fácil de implementar y su comportamiento es estable. También tiene una desventaja: si la matriz es mala o demasiado obvia, el patrón salta a la vista.

Ordenado vs. error diffusion

No son rivales absolutos, pero sí sirven para contextos distintos. El error diffusion suele dar una apariencia más orgánica en imágenes fotográficas, aunque puede introducir ruido direccional y cuesta más paralelizarlo. El dithering ordenado, en cambio, es más amigable para pipelines deterministas y para entornos donde quieres resultados repetibles píxel a píxel.

Si haces exportación en lote, previews en tiempo real o procesos que deben correr igual en CPU y GPU, el patrón fijo ayuda mucho. También es útil cuando quieres un look intencional, como en pixel art, interfaces retro o visualizaciones con estética de impresión antigua.

En la práctica, la pregunta no es “cuál es mejor”, sino “qué tipo de degradación toleras”. Si prefieres menos artefactos en movimiento y no te importa un poco más de costo, error diffusion puede ganar. Si priorizas velocidad, consistencia y control, el dithering ordenado tiene mucho sentido.

Qué propone Yliluoma y por qué sigue siendo relevante

El algoritmo de Yliluoma se hizo conocido porque no se limita a un umbral fijo por canal o a una matriz simple. La idea general es elegir, para cada píxel, la mejor combinación posible de colores de la paleta considerando el patrón espacial y la percepción del error. Eso permite que el resultado final tenga menos bloques evidentes y transiciones más suaves que un ordered dither clásico de libro.

La revisión de 30fps.net pone el foco en algo que muchas veces se ignora cuando se habla de algoritmos visuales: el equilibrio entre calidad y costo real. Un método puede verse bien en un ejemplo estático, pero si tarda demasiado en una imagen grande o si su implementación complica el pipeline, deja de ser útil para producción.

Yliluoma importa porque ataca un punto medio interesante. No busca el máximo realismo, sino una salida visual más sólida que el dithering ordenado básico sin llegar al costo y al comportamiento más caótico de otras técnicas. Para devs gráficos y creativos, eso abre una puerta práctica: convertir assets con una estética cuidada sin sacrificar tanto tiempo de cómputo.

La idea central en términos simples

La versión revisada del algoritmo trabaja con una noción de mezcla de colores sobre una matriz de patrón. En vez de decidir cada píxel de forma aislada, evalúa cómo se distribuyen los colores dentro de una celda de dithering. Eso mejora la percepción de tonos intermedios porque el ojo termina integrando la mezcla espacial.

Dicho sin marketing: no inventa información que no existe, pero distribuye mejor la que sí tienes. En imágenes con paletas limitadas, eso puede marcar una diferencia visible en sombras, cielos, piel, metal o fondos con gradientes suaves.

La revisión también pone atención en el cálculo de distancia de color. No basta con comparar RGB de forma ingenua si quieres una mejor decisión perceptual. Según el caso, conviene usar espacios o métricas que reflejen mejor cómo vemos diferencia entre tonos, aunque eso también sube el costo de cálculo.

En qué casos vale la pena

Hay tres escenarios donde este enfoque tiene sentido de verdad:

1. Conversión de imágenes a paletas reducidas para pixel art o estilos retro.
2. Generación de previews rápidas donde quieres una percepción de calidad superior sin usar técnicas más pesadas.
3. Pipelines de assets que deben mantenerse consistentes entre plataformas y resoluciones.

En cambio, si tu objetivo es fotografía de alta fidelidad o impresión profesional, probablemente quieras otra estrategia. El dithering ordenado mejora la percepción, pero no reemplaza una buena gestión de color, una paleta bien elegida ni una conversión pensada para el medio final.

Calidad visual: dónde mejora y dónde falla

La principal ventaja del algoritmo revisado es que reduce ciertos patrones incómodos típicos de matrices ordenadas simples. En degradados largos, por ejemplo, la transición puede sentirse menos escalonada. En zonas con textura fina, el patrón resultante puede parecer más uniforme y menos “cuadriculado”.

Pero no hay magia. Si la paleta es muy pobre, el algoritmo no puede inventar tonos intermedios reales. Solo puede repartir mejor el error. En un fondo con solo 4 colores, una piel humana seguirá viéndose limitada, aunque el patrón final sea más amable que un threshold duro.

También hay que considerar el tamaño de la celda de dithering. Celdas pequeñas suelen ser más discretas, pero pueden dejar ruido visible. Celdas más grandes pueden suavizar mejor, aunque a costa de introducir estructuras más notorias. Elegir bien ese tamaño depende del contenido y de la distancia de visualización.

Casos donde se nota la diferencia

En pruebas visuales típicas, la mejora suele verse en:

• Cielos y fondos con gradientes largos.
• Sombras suaves en ilustración digital.
• Superficies metálicas o plásticas con brillo sutil.
• Retratos estilizados con paletas de 8 a 32 colores.

En cambio, en imágenes con mucho detalle de alta frecuencia, como follaje denso o ruido fotográfico, la ventaja puede ser menor. Allí el patrón de dithering compite con la propia textura de la escena y el beneficio se vuelve menos obvio.

La clave es entender que el algoritmo no busca esconder todo. Busca que la reducción de color se vea menos agresiva. Si tu fuente ya tiene mucho contraste o bordes duros, el impacto puede ser moderado. Si tu fuente depende de transiciones suaves, la diferencia sí se nota.

Tabla comparativa rápida

Esta tabla no pretende cerrar el debate, pero sí te da una guía práctica. Si estás construyendo una herramienta, el costo de implementación y el costo por frame importan tanto como el resultado final.

Rendimiento: lo que de verdad importa en producción

El rendimiento no se mide solo por “cuántas operaciones hace el algoritmo”. También importa cómo se comporta en memoria, si se puede vectorizar, si escala bien con múltiples hilos y si se integra sin fricción en tu pipeline. Un método que se ve bien pero obliga a reescribir media aplicación no siempre conviene.

En dithering ordenado, una ventaja tradicional es que no necesitas propagar error entre píxeles como en error diffusion. Eso facilita paralelizar por bloques, usar CPU multihilo o incluso mover parte del trabajo a GPU. La revisión de Yliluoma sigue siendo interesante porque intenta mejorar la salida sin perder esa propiedad estructural.

Si trabajas con imágenes grandes, el tamaño de la paleta y el costo de búsqueda del color más cercano pesan bastante. Ahí conviene pensar en estructuras de datos y atajos prácticos, no solo en la teoría del algoritmo.

Tres decisiones que afectan el rendimiento

1. Búsqueda de color en la paleta: una búsqueda lineal puede ser suficiente para 16 o 32 colores, pero empieza a doler con paletas más grandes. Para 256 colores, ya conviene indexar o reducir candidatos.
2. Espacio de color: calcular distancias perceptuales más complejas mejora calidad, pero sube el costo. Si haces procesamiento en lote, tal vez te convenga precomputar parte de esa información.
3. Tamaño de bloque y caché: si procesas por tiles, puedes mejorar localidad de memoria y facilitar paralelización.

En una herramienta de escritorio o una web app, esos detalles se traducen en tiempos reales. Una conversión que tarda 40 ms por imagen puede sentirse instantánea. Una que tarda 400 ms ya empieza a molestar si el usuario prueba varias variantes seguidas.

Cómo implementarlo sin complicarte de más

No necesitas reescribir todo tu pipeline para probar este enfoque. Puedes empezar con una versión pequeña, medir y luego decidir si vale la pena llevarla a producción. Lo más útil es separar la lógica de selección de color de la lógica de patrón, así puedes iterar sobre cada parte sin romper el resto.

Un flujo razonable sería este:

1. Define la paleta objetivo y el espacio de color que vas a usar.
2. Precalcula, si puedes, las distancias entre colores de la paleta.
3. Elige una matriz de dithering o la variante del algoritmo que quieras probar.
4. Procesa una imagen de prueba con degradados, piel y bordes duros.
5. Mide calidad visual y tiempo de ejecución en imágenes pequeñas y grandes.
6. Ajusta el tamaño de celda, la métrica de distancia y el orden de evaluación.

Si lo implementas en TypeScript para tooling web, una estructura simple podría verse así:

type RGB = { r: number; g: number; b: number };

type Palette = RGB[];

function distanceSq(a: RGB, b: RGB): number {
  const dr = a.r - b.r;
  const dg = a.g - b.g;
  const db = a.b - b.b;
  return dr * dr + dg * dg + db * db;
}

function nearestColor(pixel: RGB, palette: Palette): number {
  let bestIndex = 0;
  let bestDist = Infinity;

  for (let i = 0; i < palette.length; i++) {
    const d = distanceSq(pixel, palette[i]);
    if (d < bestDist) {
      bestDist = d;
      bestIndex = i;
    }
  }

  return bestIndex;
}

Esto no es Yliluoma completo, pero sí te deja ver la parte más cara de la operación: buscar el color más cercano. A partir de ahí puedes introducir la lógica de patrón y comparar resultados con una imagen de referencia.

Si quieres contrastar con documentación de técnicas de imagen y color, estas fuentes son útiles:

• MDN Canvas API
• W3C Color on the Web
• OpenCV image processing overview

Dónde encaja para devs gráficos y creativos

Si haces herramientas para ilustradores, animadores o artistas de pixel art, este algoritmo te sirve para ofrecer una opción de exportación más cuidada. No todos quieren el mismo look: algunos prefieren ruido más agresivo, otros quieren preservar degradados, y otros solo necesitan una conversión rápida para redes o prototipos.

También encaja en flujos de trabajo donde el estilo visual importa tanto como la fidelidad. Piensa en portadas, mockups de estilo retro, visualizaciones de datos con paleta limitada o assets para juegos con estética deliberadamente reducida. En esos contextos, un buen dithering no es un adorno; es parte del lenguaje visual.

Para equipos técnicos, además, hay una ventaja operativa: puedes exponer el algoritmo como preset. Eso permite que diseño pruebe varias salidas sin tocar código. Si documentas bien los parámetros, el equipo puede iterar con menos ida y vuelta.

Qué conviene exponer como parámetros

• Tamaño de celda de dithering.
• Métrica de distancia de color.
• Tamaño de la paleta.
• Modo de evaluación: rápido o calidad.
• Semilla o determinismo, si aplica a tu implementación.

No hace falta abrir veinte knobs. Con cuatro o cinco controles bien elegidos ya puedes cubrir la mayoría de casos reales. Menos fricción suele significar más uso real.

Tabla resumen

La lectura práctica es simple: si tu producto trabaja con reducción de color, no des por muerto al dithering ordenado. Hay espacio para técnicas clásicas cuando están bien afinadas y se aplican con criterio. La revisión de Yliluoma recuerda que un algoritmo viejo puede seguir siendo útil si se mira con ojos de producción, no solo de laboratorio.