El problema que resuelve el tramado
Imagina que quieres dibujar un atardecer suave — un cielo que se apaga desde naranja intenso hasta amarillo pálido — pero tu paleta contiene solo dos colores: un naranja y un amarillo. Con esos dos bloques planos, el cielo mostraría una única línea dura donde el naranja encuentra el amarillo, nada parecido al degradado gradual que puedes ver. Esta es la limitación fundamental de cualquier paleta pequeña: no tiene colores "intermedios" para representar los tonos que caen entre los que almacena.
El tramado es la solución clásica. En vez de inventar un color nuevo, dispone los colores que ya tienes en un patrón fino para que, visto a una distancia normal, tu ojo los funda ópticamente en el tono ausente. Una región a medio camino entre naranja y amarillo se convierte en una mezcla fina de puntos naranjas y amarillos, y a distancia de brazo se lee como el tono intermedio que querías. El tramado es cómo los juegos Game Boy de cuatro colores renderizaban sombras convincentes y cómo los PC antiguos mostraban fotografías — y es central para el buen pixel art de hoy. Si quieres experimentar de forma práctica, nuestro Generador de Pixel Art ofrece los dos métodos que se describen abajo.
Por qué una paleta pequeña no puede mostrar degradados
Para entender el tramado primero hay que entender la cuantización — el acto de forzar cada píxel al color de paleta más cercano. Cuando reduces una foto a todo color a, digamos, ocho colores, cada píxel original se redondea al que de los ocho esté más cerca. Ese redondeo introduce un error: la diferencia entre el color que el píxel quería ser y el color al que se le forzó. En un degradado suave, miles de píxeles contiguos se redondean todos al mismo color de paleta hasta que el degradado cruza un umbral y todos saltan de golpe al siguiente. El resultado es el bandeado: franjas visibles donde el color plano cambia bruscamente. El tramado funciona tomando ese error de redondeo y haciendo algo inteligente con él en vez de tirarlo.
Método 1: Floyd–Steinberg (difusión de error)
El algoritmo Floyd–Steinberg, publicado por Robert Floyd y Louis Steinberg en 1976, es el método de difusión de error más famoso. Su idea es elegante: cuando un píxel se redondea al color de paleta más cercano, el error no se descarta — se empuja a los píxeles vecinos que aún no se han procesado. Esos vecinos se desplazan entonces ligeramente hacia el color que el píxel original no pudo expresar del todo, así que cuando les toca redondearse, es más probable que recojan el tono ausente.
En concreto, el algoritmo escanea la imagen de izquierda a derecha, de arriba abajo. Para cada píxel encuentra el color de paleta más cercano, calcula el error y distribuye ese error a cuatro vecinos aún no visitados en proporciones fijas — la mayor parte al píxel inmediatamente a la derecha, y partes menores a los tres píxeles de debajo. Los pesos exactos (7/16 a la derecha, y 3/16, 5/16, 1/16 en la fila de abajo) son lo que da al método su textura orgánica y dispersa característica. Como el error sigue fluyendo hacia delante, el color medio general de cualquier región coincide muy de cerca con la foto original, aunque cada píxel individual sea uno de tus pocos colores de paleta.
Cómo se ve
Floyd–Steinberg produce un grano suave, casi fotográfico. No hay patrón repetitivo obvio; los puntos parecen dispersos de forma natural, lo que hace que los degradados y los tonos de piel se vean suaves y realistas. Suele ser la mejor opción cuando quieres que el resultado siga leyéndose como una escena real — paisajes, retratos y cualquier cosa con sombreado sutil.
Sus contrapartidas
Como cada píxel depende de los anteriores, la difusión de error es inherentemente secuencial y puede introducir tenues artefactos de "gusano" o "serpiente" en zonas planas grandes. En animación, su inestabilidad entre fotogramas puede causar parpadeo, ya que un cambio mínimo en un píxel se propaga por toda la fila. Y en sprites muy pequeños, los puntos dispersos pueden leerse como ruido alrededor de detalles finos como los ojos, así que conviene usar una intensidad más suave en las caras.
La familia de la difusión de error
Floyd–Steinberg es el miembro más conocido de una familia mayor de filtros de difusión de error. Todos comparten la misma idea — redondear un píxel y luego repartir el error sobrante a los vecinos no procesados — y difieren solo en el núcleo: qué vecinos reciben error y en qué proporción. Los núcleos más anchos reparten el error entre más píxeles, lo que suaviza el resultado pero cuesta más cálculo. Nuestro Generador de Pixel Art implementa el núcleo de Floyd–Steinberg para la difusión de error; los demás de abajo se describen para que reconozcas sus firmas en arte hecho con otras herramientas, no porque esta herramienta los incluya.
El núcleo de Floyd–Steinberg reparte el error a cuatro vecinos, dividiendo entre 16. La X marca el píxel actual; los números son la fracción del error que recibe cada vecino:
| Filtro | Fila | Pesos (denominador) |
|---|---|---|
| Floyd–Steinberg (÷16) | actual | — X 7 |
| debajo | 3 5 1 |
Atkinson, desarrollado por Bill Atkinson para el primer Apple Macintosh, difunde deliberadamente solo seis octavos del error (cada uno de seis vecinos recibe 1/8, y 2/8 simplemente se descarta). Tirar parte del error sube el contraste y mantiene nítidas luces y sombras — el clásico aspecto "Mac" de alto contraste — a costa de perder algo de detalle tonal en los medios tonos planos:
| Filtro | Fila | Pesos (cada uno ÷8) |
|---|---|---|
| Atkinson (÷8, solo 6/8 difundido) | actual | — X 1 1 |
| debajo | 1 1 1 | |
| 2 debajo | — 1 — |
Jarvis, Judice y Ninke (JJN, 1976) y el filtro Stucki, muy relacionado, usan núcleos mucho más anchos que empujan el error dos filas hacia abajo y dos columnas hacia fuera, dividiendo entre 48 y 42 respectivamente. Repartir el error entre doce vecinos produce degradados más suaves y menos artefactos de gusano que Floyd–Steinberg, pero el alcance extra los hace notablemente más lentos y puede difuminar el detalle fino. El núcleo JJN:
| Filtro | Fila | Pesos (÷48) |
|---|---|---|
| Jarvis–Judice–Ninke (÷48) | actual | — — X 7 5 |
| debajo | 3 5 7 5 3 | |
| 2 debajo | 1 3 5 3 1 |
La conclusión práctica: Floyd–Steinberg se sitúa en un punto óptimo de calidad frente a velocidad, y por eso es el predeterminado en la mayoría de herramientas, incluida esta. Los núcleos más anchos conviene conocerlos porque verás su textura más suave y blanda en arte retro hecho en otros sitios.
Método 2: tramado ordenado (Bayer)
El tramado ordenado adopta un enfoque completamente distinto. En vez de propagar el error entre píxeles, compara cada píxel con un mapa de umbral fijo — una matriz pequeña de valores repetida por toda la imagen — y usa esa comparación para decidir hacia qué lado redondear. El mapa de umbral definitivo es la matriz de Bayer, descrita por Bryce Bayer, de Kodak, en su artículo de 1973 "An Optimum Method for Two-Level Rendition of Continuous-Tone Pictures". La matriz de Bayer es especial porque sus valores están dispuestos para repartirse lo más uniformemente posible, y puede expandirse recursivamente a 4×4, 8×8 y más manteniendo esa distribución uniforme.
En la práctica, un pequeño desplazamiento de la matriz de Bayer se suma al valor de cada píxel antes de ajustarlo al color de paleta más cercano. Los píxeles en posiciones de "umbral alto" del mosaico tienen más probabilidad de redondear hacia arriba, y los de posiciones de "umbral bajo" hacia abajo, así que una región de un solo color intermedio se convierte en una mezcla regular y con patrón de los dos colores de paleta más cercanos.
Cómo se ve
El tramado ordenado tiene una textura distintiva y deliberada de trama cruzado o semitono — la rejilla regular de puntos que reconoces de los juegos de 8 bits, los gráficos de PC antiguos y la impresión de periódicos. Como el patrón es fijo y no depende de los píxeles vecinos, es estable y repetible: la misma entrada siempre trama a la misma salida, sin artefactos de gusano y sin parpadeo entre fotogramas en animación.
Sus contrapartidas
La misma regularidad que hace estable al tramado ordenado también hace su patrón más visible. Se ve menos como una fotografía real y más como un renderizado retro y estilizado — que a menudo es exactamente lo que quieres, pero no si buscas realismo fotográfico. A su favor, su independencia de los vecinos lo hace trivialmente paralelizable y perfectamente determinista.
Tamaños de la matriz de Bayer: 2×2 vs 4×4 vs 8×8
La matriz de Bayer viene en tamaños que se duplican recursivamente, y el tamaño que elijas cambia visibilidad del patrón por resolución tonal. Una matriz con más celdas ofrece más niveles de umbral distintos, así que puede representar más tonos intermedios entre dos colores de paleta — pero su mosaico repetido es más grande y, en algunos tamaños, más notorio.
- 2×2 — solo cuatro niveles de umbral. El patrón es diminuto y casi invisible, pero puede expresar muy pocos tonos intermedios, así que los degradados se ven toscos y en bloques.
- 4×4 — dieciséis niveles de umbral. Un equilibrio fuerte: suficientes pasos tonales para sombrear un degradado de forma creíble, con un patrón lo bastante pequeño como para mantenerse sutil a las escalas típicas del pixel art. Esta es la matriz que usa nuestro Generador de Pixel Art para el tramado ordenado.
- 8×8 — sesenta y cuatro niveles de umbral. El rango tonal más suave y un predeterminado común en el tramado de propósito general, a costa de un mosaico repetido más grande que se hace visible en zonas planas amplias.
No hay un tamaño universalmente correcto; 4×4 y 8×8 son las dos opciones más comunes porque caen donde el patrón es aceptable y el rango tonal es útil. Para las rejillas pequeñas típicas del pixel art, 4×4 mantiene el trama cruzado apretado y legible, y por eso esta herramienta se estandariza en él.
Vale la pena nombrar una alternativa moderna: el tramado de ruido azul sustituye la rejilla regular de Bayer por una textura de ruido precalculada cuya energía se concentra en las altas frecuencias, así que los puntos se dispersan de forma uniforme sin patrón repetido visible y sin los gusanos secuenciales de la difusión de error. Suele verse más limpio que el tramado ordenado, pero necesita una tabla de ruido precalculada y es un algoritmo distinto — esta herramienta no usa ruido azul; ofrece Floyd–Steinberg y Bayer ordenado de 4×4. Mencionarlo aquí solo ayuda a ubicar lo que ves cuando otras herramientas ofrecen una opción de "ruido azul".
Cara a cara: ¿cuál usar?
Ningún método es "mejor" — sirven a objetivos distintos:
- Elige Floyd–Steinberg cuando quieras resultados suaves y de aspecto natural: fotografías, retratos, degradados y cielos donde quieras que la reducción de paleta sea lo más invisible posible.
- Elige Ordenado (Bayer) cuando quieras un aspecto retro y con patrón intencionado; cuando necesites un resultado estable para animación; o cuando el trama cruzado visible sea parte de la estética que buscas.
- Elige sin tramado para logos, iconos y gráficos planos, donde los bloques sólidos y limpios de color se leen mejor y cualquier tramado solo añadiría textura no deseada.
Un buen hábito es convertir tu imagen una vez con cada ajuste y comparar. Como ambos métodos mantienen la salida estrictamente dentro de tu paleta elegida, puedes alternar entre ellos libremente sin cambiar tus colores — solo cambia la textura.
Intensidad del tramado
Además de elegir un método, normalmente puedes controlar la intensidad del efecto. A intensidad máxima el error (o desplazamiento de umbral) se aplica por completo, dando el patrón más pronunciado y los degradados aparentes más suaves. Bajarla aplica solo una fracción, produciendo una mezcla más sutil que se sitúa entre la "cuantización plana" y el "tramado completo". Las intensidades bajas son útiles en caras y sprites pequeños, donde una dispersión a máxima intensidad puede verse recargada; las intensidades altas ayudan en degradados grandes como cielos. Como con la paleta y el tamaño de rejilla, ajústala a pasos pequeños y observa la vista previa.
Qué tramado para qué trabajo
Elegir método es más fácil si lo atas al trabajo concreto y, sobre todo, al tamaño de tu paleta — porque el tramado importa mucho más con una paleta pequeña que con una grande. Con 256 colores, el error de cuantización ya es diminuto y el tramado es un pulido ligero; con 8 a 16 colores, el error es grande y el tramado hace el trabajo pesado de fingir los tonos ausentes. Unos casos concretos:
- Degradados fotográficos (cielos, piel, atardeceres) a 8–16 colores: Floyd–Steinberg. Su grano disperso oculta el bandeado donde la paleta es más débil.
- Sprites de juegos retro y arte de tiles: Bayer ordenado. El trama cruzado regular es parte de la estética, y su estabilidad entre fotogramas evita que las animaciones parpadeen.
- Logos, iconos y gráficos de interfaz planos: sin tramado. Los bloques sólidos y limpios se leen mejor; cualquier patrón solo enturbia los bordes.
- Paleta grande (128–256 colores): cualquier método, intensidad baja, o ninguno — el ojo apenas lo distingue, así que elige por textura, no por necesidad.
- Caras y detalles diminutos: cualquier método, intensidad más baja, para que el patrón no se lea como ruido alrededor de ojos y bocas.
El mejor hábito es renderizar la misma imagen con cada método y comparar al 100% de zoom, y luego otra vez alejado. Como ambos métodos mantienen cada píxel de salida estrictamente dentro de tu paleta elegida, alternar entre ellos nunca cambia tus colores — solo la textura — así que la comparación es rápida y segura.
El bandeado, y por qué el tramado lo arregla
Para ver exactamente qué te da el tramado, imagina un degradado horizontal de negro a la izquierda a blanco a la derecha, reducido a solo cuatro grises. Sin tramado, la cuantización ajusta cada píxel al más cercano de los cuatro grises, así que el degradado se convierte en cuatro franjas verticales planas con tres costuras duras entre ellas — el aspecto de manual del bandeado. Tu ojo va directo a esas costuras porque las escenas reales casi nunca contienen saltos tonales tan bruscos.
Activa el tramado y esas costuras se disuelven. Cerca de cada límite, los dos grises vecinos se entrelazan en un patrón fino — casi todo el gris más oscuro justo antes de la costura, pasando a casi todo el gris más claro justo después — así que la transición se lee como gradual en vez de escalonada. Floyd–Steinberg dispersa esa transición de forma orgánica; Bayer ordenado la renderiza como un trama cruzado regular; ambos sustituyen una costura visible por una zona mezclada suave. La paleta nunca creció — sigue habiendo solo cuatro grises — pero al mezclarlos espacialmente, el tramado fabrica la ilusión de las docenas de grises intermedios que la paleta no puede almacenar. Ese es todo el truco, y por eso incluso una paleta diminuta puede renderizar un degradado convincente.
Una breve historia
El tramado precede en décadas a los aficionados al pixel art. El método ordenado de Bayer surgió de la investigación de los años 70 sobre renderizar imágenes de tono continuo en dispositivos de dos niveles (blanco y negro), y los métodos de difusión de error como Floyd–Steinberg llegaron poco después. Estas técnicas impulsaron de todo, desde las primeras impresoras láser y fax hasta las pantallas limitadas de los ordenadores domésticos y las consolas portátiles. Lo que empezó como una necesidad de ingeniería — meter fotografías en hardware que solo podía mostrar unos pocos colores — se convirtió en una estética por derecho propio, y por eso el pixel art tramado a propósito sigue resultando tan evocador hoy.
Conclusión
El tramado es el arte de mentir de forma convincente sobre el color: mezclar los pocos tonos que tienes para sugerir los muchos que no. Floyd–Steinberg difunde el error de redondeo a los píxeles vecinos para una mezcla suave y orgánica, mientras que el tramado ordenado de Bayer usa una matriz de umbral fija para un aspecto retro estable y con patrón. Entender la diferencia te deja elegir la textura adecuada para cada imagen en vez de aceptar lo que te dé un filtro. Para ver ambos en acción sobre tus propias fotos, prueba nuestro Generador de Pixel Art — y si eres nuevo en todo el proceso, empieza por Cómo Convertir una Foto en Pixel Art. Las mismas ideas de reducción de paleta y tramado impulsan también las manualidades textiles: mira cómo se trasladan a un patrón de punto de cruz a partir de una foto, donde una paleta limitada de hilos afronta exactamente el problema de bandeado que el tramado resuelve.