Mire de cerca una foto de periódico y se desmorona en puntos negros de diferentes tamaños. Mire una captura de pantalla del primer Macintosh y un cielo gris resultará ser una dispersión de píxeles blancos y negros. Mire un duende de Game Boy y cuatro tonos de verde de alguna manera dibujan una cara. Ninguna de esas pantallas o prensas podría mostrar un gradiente suave, y todas fingen de la misma manera: al organizar algunos colores disponibles en patrones, el ojo vuelve a tener un tono promedio.
Esa técnica es vacilante. Esta guía explica por qué existe, en qué se diferencian los algoritmos principales en la aritmética que utilizan, qué cambian las configuraciones en una herramienta de vacilación y cómo obtener resultados limpios para la pantalla o la impresión. Los ejemplos trabajados utilizan el Herramienta de tramado de imágenes Toolz, y los números provienen de las mismas fórmulas que ejecuta.
TL;Dr: El tramado reproduce una imagen de tono continuo con una paleta pequeña, a menudo de solo dos colores, colocando puntos en patrones que el ojo mezcla en tonos intermedios. El tramado ordenado (Bayer) compara cada píxel con una matriz de umbral fijo y proporciona una rayada cruzada regular. La difusión de errores (Floyd-Steinberg, Atkinson) empuja cada píxel 's redondeando el error a sus vecinos para obtener un grano más orgánico. El semitono varía el tamaño de los puntos a lo largo de una pantalla rotada, como la impresión. El Herramienta de tramado de imágenes ofrece seis modos, paletas retro, exportación PNG de hasta 8x y SVG vectorial verdadero, todo del lado del cliente, gratis, sin registro.
¿qué es el vacilante de la imagen?
El tramado de imágenes es una forma de mostrar tonos que una paleta no puede representar directamente, mezclando los colores que puede representar en pequeños patrones. Una impresora en blanco y negro no puede imprimir un 50% de gris, pero puede imprimir un tablero de ajedrez con puntos blancos y negros que se ve gris desde una distancia de visualización normal.
El problema que resuelve se llama cuantificación. Cada píxel debe redondearse al color más cercano en la paleta disponible. Sin tramado, una fotografía reducida a blanco y negro mantiene sólo una silueta dura: todo lo más claro que el gris medio se vuelve blanco y todo lo más oscuro se vuelve negro. El gradiente ha desaparecido. Con el tramado, el redondeo todavía ocurre píxel a píxel, pero el error se distribuye o compensa mediante un patrón, por lo que la densidad de puntos oscuros en cada área rastrea qué tan oscura era esa área en el original.
Diferentes algoritmos difunden ese error de diferentes maneras, y el patrón que cada uno deja atrás es su firma visual. Por eso "dithered" puede significar el impecable rayado de un viejo juego de PC, la textura granulada de MacPaint o los puntos redondos de un póster serigrafiado.
¿en qué se diferencian los algoritmos de tramado?
Hay dos familias. Dithering ordenado decide cada píxel de forma independiente comparándolo con una posición en un patrón de umbral fijo. Difusión de errores decide los píxeles en secuencia y lleva cada error de redondeo a píxeles aún no procesados. Halftoning es un relativo derivado de la impresión que cambia el tamaño de los puntos en lugar de la ubicación de los puntos.
| Modo en la herramienta | Familia | como decide | Mirar | bueno por |
|---|---|---|---|---|
| Bayer 4x4 | Ordenado | Compare el tono con una matriz de umbral de 4x4 | Patrón visible y rayado cruzado regular | Juego retro y estilo temprano para PC, carteles |
| Atkinson | Difusión de errores | Empuje 3/4 del error a seis vecinos | Altos contrastes, reflejos ampliados | El look de Macintosh de 1984, retratos con fuerza |
| Floyd-Steinberg | Difusión de errores | Empuje todo el error a cuatro vecinos | Grano orgánico fino, tono muy fiel | Fotografías donde el detalle importa |
| Medio tono | Pantalla de amplitud modulada | El radio del punto crece con la oscuridad, en una cuadrícula rotada | Puntos redondos en ángulo | Carteles estilo estampado, cómic y arte pop |
| Fallo cibernético | Palette snap más desplazamiento | Color de paleta más cercano por bloque, líneas de escaneo desplazadas | Bloques coloridos con lágrimas horizontales | Arte multicolor estilizado |
| Duro de 1 bit | Umbral | Oscuro si el tono es inferior a 128 | Sin tonterías, pura silueta | Logotipos, arte lineal, plantillas |
Las siguientes secciones recorren la aritmética con números reales, comenzando con el valor del tono que comparte cada modo.
¿cómo se calcula el tono de un píxel 's antes del tramado?
Antes de aplicar cualquier patrón, cada píxel se convierte a un único valor de brillo de 0 (negro) a 255 (blanco). La herramienta utiliza los pesos luma de Recomendación UIT-R BT.601, que pesa más verde porque la visión humana es más sensible a él:
luma = 0.299 R + 0.587 G + 0.114 B + brightness
curved = ((luma / 255 - 0.5) x contrast + 0.5) x 255 clamped to 0..255
El control deslizante Brillo desplaza cada píxel de -100 a +100. El control deslizante de curva de contraste, de 0,5 a 3 con un valor predeterminado de 1,4, extiende los tonos del gris medio.
Ejemplo trabajado: un RGB de píxel gris medio (100, 100, 100) en la configuración predeterminada.
luma = 0.299(100) + 0.587(100) + 0.114(100) + 0 = 100
curved = ((100 / 255 - 0.5) x 1.4 + 0.5) x 255
= ((0.39216 - 0.5) x 1.4 + 0.5) x 255
= (-0.15098 + 0.5) x 255
= 89.0
Entonces, el contraste predeterminado empuja este gris más oscuro, de 100 a aproximadamente 89. Un píxel exactamente en 128 apenas se mueve y un píxel en 180 se mueve más claro. El aumento del contraste amplía esa extensión, lo que significa menos tonos medios y patrones de puntos más atrevidos.
¿cómo ordena Bayer el trabajo de tramado?
Bayer difumina mosaicos una pequeña matriz de umbrales a lo largo de la imagen y marca un píxel oscuro cuando su tono cae por debajo del umbral en su posición. La matriz está dispuesta de manera que los umbrales se distribuyan lo más uniformemente posible a lo largo del mosaico, disposición publicada por Bryce Bayer en 1973. La herramienta utiliza la versión 4x4, escalada a 0-255:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
Tome un área plana donde cada píxel tenga el tono curvo de 89 del ejemplo anterior. Una celda está oscura cuando 89 está por debajo de su umbral. Los umbrales superiores a 89 son 96, 112, 128, 144, 160, 176, 192, 208, 224 y 240: diez de los dieciséis. Entonces 10 de cada 16 celdas obtienen tinta, que tiene una cobertura del 62,5%, cercana al tono 's oscuridad de 1 - 89/255 = 65%.
Cada área con el mismo tono tiene exactamente el mismo patrón, y esa repetición es el look de Bayer. Nunca produce grano aleatorio, se teja limpiamente y se comprime bien como PNG. Su debilidad son las bandas: un gradiente lento atraviesa como máximo 17 patrones distintos.
¿cómo funciona la difusión de errores de Floyd-Steinberg?
Floyd-Steinberg procesa la imagen de izquierda a derecha, de arriba a abajo. Cada píxel se redondea a blanco o negro, y la diferencia entre su tono y el valor al que se redondeó se divide entre cuatro vecinos que aún no han sido procesados, utilizando pesos que suman 16/16. Robert Floyd y Louis Steinberg lo publicaron en 1976.
current 7/16
3/16 5/16 1/16
Ejemplo trabajado con el tono de 89. Está por debajo del límite de 128, por lo que el píxel se vuelve negro (0). El error es 89 - 0 = 89, que se transmite:
| Vecino | Compartir | Agregado a su tono |
|---|---|---|
| Correcto | 7/16 | 38,9 |
| Abajo a la izquierda | 3/16 | 16.7 |
| Abajo | 5/16 | 27,8 |
| Abajo a la derecha | 1/16 | 5.6 |
| Total | 16/16 | 89,0 |
El píxel del momento ahora tiene 89 + 38,9 = 127,9, justo debajo del límite, por lo que probablemente también se vuelva negro y pase por su propio error más pequeño. Un poco más adelante, el error acumulado inclina un píxel sobre 128 y se vuelve blanco. En un área, la proporción de píxeles blancos y negros coincide con el tono original y, como la elección depende de los vecinos, el grano parece irregular en lugar de mosaico.
Debido a que se mantiene todo el error, Floyd-Steinberg conserva mejor el tono general, razón por la cual es la elección para la fidelidad fotográfica.
¿por qué el vacilante de Atkinson parece tan contrastante?
El tramado de Atkinson, escrito por Bill Atkinson para el Apple Macintosh original, extiende el error pero pierde deliberadamente parte del mismo. Cada uno de los seis vecinos recibe 1/8 del error, por lo que sólo se transmite 6/8 (tres cuartos):
current 1/8 1/8
1/8 1/8 1/8
1/8
Con el mismo tono de 89 y un error de 89, cada vecino obtiene 11,125, para un total de 66,75 transmitidos, y 22,25 simplemente se elimina. El error de caída empuja las áreas casi blancas al blanco puro y las áreas casi negras al negro puro, por lo que las luces explotan, las sombras se bloquean y los tonos medios mantienen una textura nítida y abierta. Es menos preciso que Floyd-Steinberg y, a menudo, más atractivo, especialmente en rostros y pantallas pequeñas.
¿cómo funciona el modo semitono?
El semitono varía el tamaño de los puntos en lugar de su ubicación. La herramienta coloca una cuadrícula de puntos de muestra girados hacia el ángulo de la pantalla, lee el tono en cada punto y dibuja un círculo cuyo radio crece a medida que el tono se oscurece:
radius = (1 - tone / 255) x (pixel scale / 2) x 1.3 capped at pixel scale / 2
dots with a radius of 0.4px or less are not drawn
Con la escala de píxeles predeterminada de 4px:
| Tono | Radio | Resultado |
|---|---|---|
| 0 (negro) | 2.6, limitado a 2.0 px | Puntos que se tocan, oscuridad sólida |
| 89 | (0,651) x 2 x 1,3 = 1,69 px | Punto medio |
| 200 | (0,216) x 2 x 1,3 = 0,56 px | Punto pequeño |
| 230 | (0,098) x 2 x 1,3 = 0,25 px | Saltado, se lee en papel |
El ángulo predeterminado es de 45 grados, la convención para una pantalla de un solo color porque una cuadrícula diagonal es menos perceptible para el ojo que las filas alineadas con los bordes de la página. Los ángulos cercanos a 0 o 90 producen líneas horizontales o verticales visibles. El control deslizante de ángulo solo afecta este modo.
¿qué cambian la escala de píxeles, las paletas y la configuración de inversión?
Escala de píxeles (2 a 32 px, predeterminado 4) establece el tamaño de cada bloque o celda de puntos. La herramienta toma muestras de un píxel por celda en lugar de promediar la celda, por lo que los detalles muy finos más pequeños que una celda pueden desaparecer o producir patrones de muaré en telas y rejillas. Las celdas más grandes dan un póster más gráfico y grueso; las celdas más pequeñas contienen más detalles y producen archivos SVG más grandes.
Paletas establece los colores. Se incluyen cinco ajustes preestablecidos: Brutal Paper (papiro, amarillo peligro, carbón), Mac OS 1984 (blanco, gris, negro), Gameboy Classic (cuatro verdes), Cyberpunk Neon y Synthwave 80s, además de colores personalizados con su propio fondo y primer plano. Cinco de los seis modos son de dos tonos y utilizan sólo el primer y último color de paleta. Es por eso que Gameboy Classic muestra solo sus verdes más claros y oscuros en Bayer o Floyd-Steinberg. Cyber Glitch es el único modo que se asigna a cada color de la paleta.
Invertir intercambia fondo y primer plano por puntos claros en un campo oscuro.
¿qué tamaño puedes exportar y cuándo debes usar SVG?
La foto primero se coloca en un escenario fijo, por lo que un archivo de cámara de 6000 px se representa tan rápido como uno pequeño. Arrastra dentro del lienzo para reposicionar el cultivo.
| proporción de este | Etapa (1x) | 2x (predeterminado) | 4x | 8x |
|---|---|---|---|---|
| Original | 840 píxeles de ancho | 1680 de ancho | 3360 de ancho | 6720 de ancho |
| 1:1 cuadrado | 840 x 840 | 1680 x 1680 | 3360 x 3360 | 6720 x 6720 |
| Paisaje 16:9 | 1120 x 630 | 2240 x 1260 | 4480 x 2520 | 8960 x 5040 |
| 9:16 vertical | 630 x 1120 | 1260 x 2240 | 2520 x 4480 | 5040 x 8960 |
| 4:3 clásico | 1040 x 780 | 2080 x 1560 | 4160 x 3120 | 8320 x 6240 |
Una exportación PNG no amplía la vista previa. Vuelva a dibujar la fuente en el tamaño de destino y ejecute el tramado nuevamente con la escala de píxeles multiplicada por la escala de exportación, por lo que a 4x un punto de 4px se convierte en un punto nítido de 16px en lugar de una ampliación borrosa. La renderización se realiza con el API de lienzo HTML, que contiene mapas de bits grandes en la memoria; si falla una exportación de 8x con "Error en la exportación. Pruebe una escala de exportación más pequeña." haz eso.
La exportación SVG escribe cada punto como real <rect> investigaciones operacionales <circle> elemento, siguiendo el Especificación W3C SVG, entonces el póster escala a cualquier tamaño de impresión sin volver a muestrear y se abre en un editor vectorial. El texto de la tarjeta del póster permanece como texto editable. La compensación es el tamaño del archivo. Una escala de 4px en una etapa de 840 x 1120 tiene 210 x 280 = 58.800 celdas, y una imagen en modo recto oscuro puede escribir la mayoría de ellas como elementos separados de aproximadamente 55 caracteres cada uno, lo que se acerca a los 3 MB. Duplicar la escala de píxeles a 8 reduce el recuento de celdas a un cuarto. Utilice SVG para imprimir y editar, PNG para la web.
El efecto de línea de escaneo CRT nunca llega a una exportación; es solo una superposición de vista previa. La superposición de la tarjeta de póster, por otro lado, es parte de la exportación y está activada de forma predeterminada con el encabezado del marcador de posición "DITHERED // 2026"; desmarcar "Mostrar superposición de tarjetas de póster" si quieres la imagen sola.
¿Están subidas mis imágenes?
No. El archivo se abre como una URL de objeto local, se dibuja en un lienzo y se difumina en la misma pestaña del navegador. Ninguna solicitud transporta datos de imágenes, por lo que las fotos inéditas o los recursos del cliente permanecen en su dispositivo y la herramienta sigue funcionando con la red apagada una vez cargada. Pegar desde el portapapeles con Ctrl+V o Cmd+V también funciona.
Las muestras incorporadas (Earthrise, Blue Marble y una huella de bota lunar) son fotografías de la NASA. Las obras del gobierno federal de EE. UU. no están sujetas a derechos de autor 17 USC 105, por eso pueden enviarse como muestras. Para sus propias cargas, la herramienta no agrega marcas de agua ni reclama derechos; los límites habituales son los derechos que tenga en la imagen fuente.
¿Con qué errores puedes encontrarte?
| Mensaje o síntoma | Causa | Arreglar |
|---|---|---|
| "Ese archivo no es una imagen." | El tipo file's no es una imagen | Conviértalo primero, por ejemplo con un convertidor de formato de imagen |
| "Esa imagen no se pudo decodificar." | El navegador no puede leer ese formato, como HEIC fuera de Safari | Convierta a JPG o PNG |
| "Export falló. Pruebe una escala de exportación más pequeña." | El navegador no pudo asignar el lienzo grande | Elija 4x o 2x |
| "La lectura del portapapeles fue bloqueada..." | El navegador negó el acceso al portapapeles al botón | En su lugar, presione Ctrl+V o Cmd+V en la página |
| La paleta muestra sólo dos colores | Los modos de dos tonos utilizan el primer y el último color | Cambie a Cyber Glitch o establezca colores personalizados |
| Moire o patrones brillantes | Detalle fino y regular más pequeño que la escala de píxeles | Primero aumente la escala de píxeles o desdibuje ligeramente la fuente |
| SVG mucho más grande que PNG | Un elemento por punto | Suba la escala de píxeles o exporte PNG |
Las áreas transparentes en un PNG se colocan en blanco antes de vacilar, por lo que se leen como papel.
Alternativas para vaciar una imagen
| herramienta | Cómo | notas |
|---|---|---|
| GIMP | Imagen, Modo, Indexado, con Floyd-Steinberg vacilando | Basado en paletas, sin ángulo de pantalla de medios tonos |
| Photoshop | Escala de grises, luego modo de mapa de bits con pantalla de medios tonos o tramado de difusión | Orientado a la impresión, pagado |
| ImagenMagick | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
Con secuencias de comandos, muchos mapas de umbral |
| ImagenMagick | magick in.jpg -dither FloydSteinberg -monochrome out.png |
Difusión de errores al blanco y negro |
| La imagen de Toolz vacila | Seis modos, paletas, vector SVG | Del lado del cliente, vista previa mientras arrastras |
Las herramientas de línea de comandos ganan por lotes. Una herramienta interactiva gana cuando la apariencia depende del contraste y el tamaño de los puntos mientras se observa el resultado.
Si el PNG difuminado se dirige a un sitio web, el Guía de compresión de imágenes cubre cómo reducirlo aún más; Las imágenes con sólo dos colores se comprimen extremadamente bien como PNG. Para convertir la salida a otro formato, el Guía de conversión de formato de imagen explica cuándo encaja PNG, WebP o GIF. El conjunto completo vive en el centro de herramientas de imagenși tu poți pruebe la herramienta de tramado con una de las muestras de la NASA antes de cargar tu propia foto.
