Dithering online

Dithering online para representar una imagen con pocos colores y una distribución de píxeles controlada. Compara algoritmos, ajusta el tamaño y descarga PNG gratis. La imagen se procesa localmente, sin registro.

Gratis · Sin cuenta · Se procesa en tu dispositivo
La misma ilustración con dithering y la paleta PICO-8
Ilustración a color con una esfera naranja sombreada, antes del dithering
Original
Resultado
Arrastra para comparar

Probar un ejemplo

Ajustes

Cómo el efecto dithering representa tonos intermedios

El efecto dithering permite comparar cómo se distribuyen los colores. Una paleta de blanco y negro puede sugerir gris sin almacenar ningún píxel gris. Lo consigue distribuyendo ambos colores en proporciones distintas entre píxeles vecinos. El ojo combina ese conjunto al verlo desde cierta distancia. La distribución importa: una matriz regular tiene un ritmo visible, la difusión crea otra textura y el umbral produce límites más duros. No se trata solo de reducir colores, sino de decidir cómo se presenta esa reducción.

El proceso empieza promediando bloques según el tamaño de píxel elegido. Luego se aplican brillo, contraste y gamma, y finalmente se seleccionan colores de la paleta. La transparencia de entrada se compone sobre blanco, de modo que el PNG resultante es opaco. Si buscas conservar o transformar la cobertura alfa de un diseño, utiliza el modo DTF del generador de semitonos; esta página está dedicada a cuantizar colores.

Los métodos de difusión calculan la diferencia entre el color actual y el elegido, y la envían a píxeles que todavía no se han procesado. Un búfer Float32 mantiene las fracciones de error hasta la cuantización final. La selección usa la distancia ponderada 2ΔR² + 4ΔG² + 3ΔB², con más peso para el verde. No es una conversión completa a un espacio perceptual de color ni una simulación de impresión.

Esfera sombreada antes y después del dithering: los grises se convierten en un patrón de píxeles blancos y negros

Cómo aplicar dithering de imagen en cuatro pasos

Carga una fuente fácil de evaluar

Selecciona una imagen local, arrástrala o pégala desde el portapapeles. La esfera en escala de grises ayuda a comparar degradados; la composición de color permite probar paletas. Puedes cargar archivos de hasta 60 MB y 64 megapíxeles decodificados. Los formatos con animación se interpretan como una imagen fija. Conviene empezar por un ejemplo antes de ajustar simultáneamente muchos parámetros en una foto compleja.

Elige la paleta antes del algoritmo

Hay blanco y negro, cuatro grises, Game Boy, CGA, PICO-8 y Mac Classic. La opción personalizada admite de dos a dieciséis colores; la automática extrae entre dos y sesenta y cuatro. Revisa que existan diferencias útiles de brillo y tono. Ningún algoritmo puede representar un contraste amplio con una paleta cuyos colores son casi idénticos. La salida siempre utiliza entradas reales de esa paleta.

Compara sin cambiarlo todo

Mantén la misma paleta y el mismo tamaño de píxel al alternar entre Floyd–Steinberg, Atkinson y Bayer. Así podrás atribuir las diferencias al algoritmo. Después modifica brillo, contraste o gamma si desaparecen detalles importantes. En los métodos de difusión, baja la fuerza para reducir el error propagado o desactiva el recorrido serpenteante para que todas las filas se calculen en la misma dirección.

Guarda la cuadrícula que necesitas

Para un recurso pequeño de pixel art, exporta la cuadrícula reducida en 1:1. Para conservar las dimensiones de colocación, amplíala al tamaño de salida mediante vecino más cercano. PNG evita la compresión con pérdidas de JPG. Revisa las dimensiones descargadas y evita suavizar después el escalado, porque eso mezcla colores fuera de la paleta y modifica los bordes cuadrados generados por la herramienta.

Dithering online: algoritmos y paletas

Los algoritmos de dithering online trabajan sobre la cuadrícula de píxeles. En dithering online manda la paleta. Floyd–Steinberg reparte el error entre cuatro posiciones cercanas y es la opción inicial. Atkinson utiliza seis posiciones, pero transmite solo tres cuartas partes del error; por eso puede cambiar también el equilibrio de luces y sombras. Jarvis–Judice–Ninke y Stucki utilizan vecindarios más amplios. Burkes trabaja con dos filas. Sierra, Sierra Two-row y Sierra Lite aportan otras tres distribuciones. Son núcleos distintos, no versiones más fuertes o suaves de un mismo filtro.

La fuerza de difusión va de cero a cien por ciento. A cero, cada píxel elige su color más cercano sin enviar error a los vecinos. El recorrido serpenteante invierte la dirección en filas alternas y refleja horizontalmente el núcleo. Estos controles solo afectan a los métodos de difusión. No se muestran con matrices, umbral o ruido, para que la interfaz no sugiera un efecto de parámetros que esos métodos no usan.

Bayer ofrece matrices recursivas de 2×2, 4×4 y 8×8. Las pequeñas repiten su patrón de forma más evidente; las grandes incluyen más posiciones dentro de cada bloque repetido. Umbral no añade dithering. Ruido aleatorio perturba la decisión con una secuencia pseudoaleatoria repetible, así que una actualización no inventa un ruido completamente diferente cada vez. Todos los modos mantienen los colores de salida dentro de la paleta seleccionada.

La paleta automática utiliza corte mediano sobre una copia de la fuente de hasta 256 píxeles en su lado mayor. Se conserva en caché por imagen y número de colores. Cambiar algoritmo, brillo o difusión no vuelve a extraer colores, lo que ayuda a comparar resultados. Cambiar el número solicitado sí genera otra extracción. Una fuente con pocos colores distintos puede devolver menos de los pedidos. La paleta personalizada permite modificar, añadir y borrar entradas directamente.

Usos del dithering en pixel art e ilustración

Esfera y degradado de grises con dithering Floyd–Steinberg en blanco y negro

Dithering Floyd–Steinberg

Blanco y negro, píxeles de 3 px, difusión al 100 % y recorrido serpenteante.

Esfera con luces limpias y dithering Atkinson en blanco y negro

Dithering Atkinson

Blanco y negro, píxeles de 3 px, ajuste de difusión al 100 % y recorrido serpenteante.

Esfera y degradado de grises con un patrón regular de dithering Bayer

Dithering Bayer 8×8

Blanco y negro, píxeles de 3 px y matriz Bayer ordenada de 8×8.

Esfera sombreada convertida a cuatro tonos verdes con dithering y la paleta Game Boy

Paleta Game Boy

Esfera sombreada, Floyd–Steinberg, cuatro verdes, píxeles de 4 px, difusión al 100 % y recorrido serpenteante.

El dithering pixel art produce una imagen estática para ilustraciones y gráficos. En ilustración monocroma, examina las superficies tranquilas además de las líneas exteriores. La difusión puede conservar el tono medio y producir una textura demasiado activa para el diseño. Un umbral puede mejorar la contundencia de la silueta y perder una sombra necesaria. Decide si necesitas continuidad tonal o una separación gráfica dura. No hay un método que sea siempre superior para todas las fotografías y tamaños de presentación.

Para referencias de videojuegos clásicos, las paletas son restricciones visuales, no emuladores. Game Boy proporciona cuatro verdes; CGA ofrece una selección de cuatro colores; PICO-8 utiliza dieciséis colores concretos; Mac Classic es blanco y negro. La herramienta no impone dimensiones de pantalla, límites de sprites ni formatos propios de una consola. Si el recurso se usará en un proyecto real, comprueba esos requisitos por separado.

En ejercicios de pixel art, aumentar el tamaño de píxel simplifica primero las formas. Una imagen de 1600×1200 con tamaño cuatro produce una cuadrícula de 400×300 para exportar en 1:1. Cuando una dimensión no es divisible, el último bloque recoge los píxeles restantes. Al volver al tamaño original, la cuadrícula se mapea por vecino más cercano. No se aplica una pasada de suavizado que añada colores de transición entre bloques.

En una composición con colores limitados, dos objetos pueden acabar en la misma entrada de paleta y perder separación. Antes de cambiar continuamente de algoritmo, añade un color contrastante o prueba la extracción automática. Para varias imágenes procesadas por separado que deban compartir aspecto, usa la misma paleta personalizada. La selección automática depende de cada fuente y no garantiza una combinación idéntica entre archivos diferentes.

Dithering de imagen frente a editores de escritorio

El dithering de imagen conserva los colores de la paleta al pasar el resultado a un editor. Photoshop incluye retoque amplio y flujos de color indexado; Illustrator se orienta al dibujo vectorial y la composición. Esta herramienta se concentra en comparar métodos, controlar la paleta y descargar un PNG con píxeles definidos. No produce vectores ni conserva un documento editable por capas. Puedes llevar la imagen resultante a un proyecto más grande para añadir textos, máscaras u otros elementos que no forman parte de esta conversión.

Una salida pequeña en 1:1 es práctica si tu aplicación trabaja sobre una cuadrícula explícita. Una salida con las dimensiones de la fuente facilita encajar la imagen en una composición existente. En ambos casos, un escalado posterior con suavizado puede cambiar la paleta. Incluso el navegador puede mezclar visualmente píxeles a ciertos niveles de zoom. Para revisar el patrón exacto, utiliza una ampliación entera y consulta el archivo descargado.

La vista previa tiene un lado mayor de hasta 1000 píxeles y se recalcula tras 80 milisegundos sin cambios. La difusión depende de la cuadrícula y de las decisiones anteriores, por lo que una resolución reducida no predice cada punto del archivo final. La descarga se calcula nuevamente desde la fuente. El tiempo mostrado describe ese cálculo de vista previa en tu equipo; no es una garantía universal de velocidad.

Preguntas sobre el efecto dithering

Carga una imagen, elige una paleta y un algoritmo de dithering y descarga el resultado en PNG. Ajusta el tamaño de píxel para conseguir una textura más fina o más gruesa y compárala con el original antes de guardar. El PNG contiene únicamente los colores de la paleta elegida; con una paleta blanca y negra no hay píxeles grises.


Elige Floyd–Steinberg para degradados fotográficos suaves, Atkinson para luces limpias, Bayer para patrones regulares y Threshold para gráficos de bordes duros. Atkinson reparte tres cuartas partes del error, aumenta el contraste y recuerda al Mac clásico. Bayer aporta una cuadrícula estable de aire retro. Threshold no añade dithering. Compara los algoritmos con la misma paleta y tamaño de píxel.


Atkinson distribuye tres cuartas partes del error, mientras que Floyd–Steinberg transmite el error completo dentro de su núcleo, salvo los límites de imagen. Esto modifica tanto la distribución como el comportamiento tonal. Compara con la misma fuente, paleta y tamaño antes de corregir el brillo para favorecer uno de los resultados.


Entre dos y dieciséis. Los selectores permiten cambiar cada color y los botones añaden o eliminan entradas. La coincidencia se calcula con distancia RGB ponderada. Muchas entradas casi iguales pueden aportar poca separación visual. Una variedad útil de luminosidad y tono suele ser más importante que llenar la paleta hasta su máximo.


La vista previa se limita a 1000 píxeles en el lado mayor. La exportación recalcula el algoritmo a las dimensiones de salida. La difusión depende de su cuadrícula y del error acumulado, de modo que cambian algunas posiciones. Utiliza la vista previa para decidir el estilo y la descarga para valorar el patrón definitivo.


El procesamiento ocurre dentro del navegador, normalmente en un Worker. Si no está disponible, se utiliza un cálculo por filas que cede tiempo al hilo principal. Los eventos estadísticos no incluyen datos de imagen ni nombres. Abrir un ejemplo descarga un recurso estático del sitio; no sube la imagen local que hayas elegido.


Prueba el dithering online gratis

Empieza con un ejemplo de dithering online, selecciona la paleta y compara una difusión con una matriz regular. Decide si necesitas el pequeño raster 1:1 o un PNG del tamaño de la fuente. Después carga tu imagen y guarda también el original. Anota la paleta y el tamaño de píxel si quieres repetir el mismo criterio en otros diseños.

Dithering online gratis — efecto dithering en fotos