Olhe atentamente para uma foto de jornal e ela se desfaz em pontos pretos de tamanhos diferentes Olhe para uma captura de tela do primeiro Macintosh e um céu cinza acaba sendo uma dispersão de pixels em preto e branco Olhe para um sprite Game Boy e quatro tons de verde de alguma forma desenhar um rosto Nenhuma dessas exibições ou prensas poderia mostrar um gradiente suave, e todos eles fingir um da mesma maneira: organizando algumas cores disponíveis em padrões que o olho médias de volta em tom.
Essa técnica é pontilhamento Este guia explica por que ele existe, como os principais algoritmos diferem na aritmética que eles usam, quais as configurações em uma ferramenta de pontilhamento mudar, e como obter saída limpa para tela ou impressão Os exemplos trabalhados usam o Ferramenta de pontilhamento de imagem Toolz, e os números vêm das mesmas fórmulas que ele executa.
tl;dr: O pontilhamento reproduz uma imagem de tom contínuo com uma pequena paleta, muitas vezes apenas duas cores, colocando pontos em padrões que o olho mistura em tons intermediários O pontilhamento ordenado (Bayer) compara cada pixel a uma matriz de limite fixa e dá uma hachura cruzada regular A difusão de erros (Floyd-Steinberg, Atkinson) empurra cada pixel' s arredondamento erro em seus vizinhos para um grão mais orgânico O meio-tom varia o tamanho do ponto ao longo de uma tela girada, como a impressão Ferramenta de pontilhamento de imagem oferece seis modos, paletas retro, exportação PNG até 8 x e SVG vetorial verdadeiro, tudo do lado do cliente, gratuito, sem inscrição.
O que é pontilhamento de imagem?
O pontilhamento de imagens é uma forma de mostrar tons que uma paleta não pode representar diretamente, misturando as cores que ela pode representar em pequenos padrões Uma impressora em preto e branco não pode imprimir 50% de cinza, mas pode imprimir um tabuleiro de xadrez de pontos em preto e branco que parece cinza a uma distância normal de visualização.
O problema que resolve é chamado de quantização Todo pixel tem que ser arredondado para a cor mais próxima na paleta disponível Sem pontilhamento, uma fotografia reduzida a preto e branco mantém apenas uma silhueta dura: tudo mais claro que o cinza médio fica branco e tudo mais escuro fica preto O gradiente se foi Com o pontilhamento, o arredondamento ainda acontece pixel por pixel, mas o erro é espalhado ou compensado por um padrão, de modo que a densidade de pontos escuros em cada área rastreia o quão escura essa área estava no original.
Diferentes algoritmos espalham esse erro de maneiras diferentes, e o padrão que cada um deixa para trás é a sua assinatura visual É por isso que o & quot; dithered" pode significar o hachurado puro de um antigo jogo para PC, a textura granulada do MacPaint ou os pontos redondos de um pôster impresso em tela.
Como os algoritmos de pontilhamento são diferentes?
Há duas famílias. Dithering ordenado decide cada pixel independentemente comparando-o com uma posição em um padrão de limite fixo. Difusão de erros decide pixels em sequência e leva cada erro de arredondamento para frente para pixels ainda não processados Halftoning é um parente derivado de impressão que altera o tamanho do ponto em vez da colocação do ponto.
| Modo na ferramenta | Família | Como decide | Olhar | bom para |
|---|---|---|---|---|
| Bayer 4x4 | Ordenado | Compare o tom com uma matriz limite 4x4 | Crosshatch regular, padrão visível | Jogo retro e estilo inicial de PC, pôsteres |
| Atkinson | Difusão de erros | Empurre 3/4 do erro para seis vizinhos | Alto contraste, destaques estourados | O look Macintosh de 1984, retratos com ponche |
| Floyd-Steinberg | Difusão de erros | Empurre todo o erro para quatro vizinhos | Grão orgânico fino, tom mais fiel | Fotografias onde o detalhe importa |
| Meio-tom | Tela modulada em amplitude | O raio do ponto cresce com a escuridão, em uma grade girada | Pontos redondos em ângulo | Cartazes em estilo impresso, quadrinhos e pop art |
| Falha Cibernética | Estalo de paleta mais deslocamento | Cor mais próxima da paleta por bloco, linhas de varredura deslocadas | Blocos coloridos com rasgos horizontais | Arte multi-cor estilizada |
| Difícil 1 bit | Limiar | Escuro se o tom estiver abaixo de 128 | Sem pontilhamento, pura silhueta | Logotipos, arte de linha, estênceis |
As próximas seções percorrem a aritmética com números reais, começando com o valor do tom que cada modo compartilha.
Como um pixel' s tom calculado antes do pontilhamento?
Antes de qualquer padrão ser aplicado, cada pixel é convertido em um único valor de brilho de 0 (preto) a 255 (branco) A ferramenta usa os pesos luma de Recomendação UIT-R BT.6010, que pesam mais verde porque a visão humana é mais sensível a ele:
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
O controle deslizante Brilho desloca cada pixel em - 100 a + 100 O controle deslizante da curva Contraste, 0,5 a 3 com um padrão de 1,4, estende os tons para longe do cinza médio.
Exemplo trabalhado: um pixel cinza médio RGB (100, 100, 100) nas configurações padrão.
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
Então o contraste padrão empurra esse cinza mais escuro, de 100 a cerca de 89 Um pixel exatamente em 128 mal se move, e um pixel em 180 se move mais claro Elevar o contraste amplia essa propagação, o que significa menos tons médios e padrões de pontos mais ousados.
Como é que a Bayer ordenou que o pontilhamento funcionasse?
O pontilhamento Bayer ladrilha uma pequena matriz de limiares através da imagem e marca um pixel escuro quando seu tom cai abaixo do limiar em sua posição A matriz é organizada de modo que os limiares sejam espalhados o mais uniformemente possível através da ladrilho, o arranjo publicado pela Bryce Bayer em 1973 A ferramenta usa a versão 4x4, dimensionada para 0-255:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
Pegue uma área plana onde cada pixel tem o tom curvo de 89 do exemplo acima Uma célula é escura quando 89 está abaixo do seu limiar Os limiares acima de 89 são 96, 112, 128, 144, 160, 176, 192, 208, 224 e 240: dez dos dezesseis Então 10 de cada 16 células obtêm tinta, que é 62,5% de cobertura, perto do tom & #39; s escuridão de 1 - 89/255 = 65%.
Toda área com o mesmo tom obtém exatamente o mesmo padrão, e essa repetição é o visual da Bayer Nunca produz granulação aleatória, ladrilha de forma limpa e comprime bem como PNG Sua fraqueza é a bandagem: um gradiente lento atravessa no máximo 17 padrões distintos.
Como funciona a difusão de erros Floyd-Steinberg?
Floyd-Steinberg processa a imagem da esquerda para a direita, de cima para baixo Cada pixel é arredondado para preto ou branco, e a diferença entre seu tom e o valor para o qual foi arredondado é dividida entre quatro vizinhos que ainda não foram processados, usando pesos que somam 16/16. Robert Floyd e Louis Steinberg publicaram em 1976.
current 7/16
3/16 5/16 1/16
Exemplo trabalhado com o tom de 89. está abaixo do corte 128, então o pixel fica preto (0).O erro é 89 - 0 = 89, que é entregue:
| Vizinho | Compartilhar | Adicionado ao seu tom |
|---|---|---|
| Direita | 16/07 | 38,9 |
| Abaixo esquerda | 16/03 | 16,7 |
| Abaixo | 16/05 | 27,8 |
| Abaixo à direita | 16/01 | 5.6 |
| Total | 16/16 | 89,0 |
O pixel à direita agora tem 89 + 38,9 = 127,9, logo abaixo do corte, então provavelmente fica preto também e passa por seu próprio erro menor Um pouco mais adiante, o erro acumulado inclina um pixel sobre 128 e fica branco Sobre uma área, a proporção de pixels em preto e branco corresponde ao tom original, e como a escolha depende dos vizinhos, o grão parece irregular em vez de ladrilhado.
Como o erro total é mantido, Floyd-Steinberg preserva melhor o tom geral, e é por isso que é a escolha para a fidelidade fotográfica.
Por que o pontilhamento de Atkinson parece tão contrastante?
Atkinson dithering, escrito por Bill Atkinson para o Apple Macintosh original, espalha o erro mais amplo, mas deliberadamente perde um pouco. Cada um dos seis vizinhos recebe 1/8 do erro, então apenas 6/8 (três quartos) é repassado:
current 1/8 1/8
1/8 1/8 1/8
1/8
Com o mesmo tom de 89 e um erro de 89, cada vizinho recebe 11,125, para um total de 66,75 passados, e 22,25 é simplesmente descartado Erro de queda empurra áreas quase brancas para áreas brancas puras e quase pretas para preto puro, então destaques explodem, sombras bloqueiam e tons médios mantêm uma textura nítida e aberta É menos preciso que Floyd-Steinberg e muitas vezes mais atraente, especialmente em rostos e telas pequenas.
Como funciona o modo de meio-tom?
O meio-tom varia o tamanho dos pontos em vez de sua colocação A ferramenta coloca uma grade de pontos de amostra girados para o ângulo da tela, lê o tom em cada ponto e desenha um círculo cujo raio cresce à medida que o tom escurece:
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
Com a escala de pixels padrão de 4 px:
| Tom | Raio | Resultado |
|---|---|---|
| 0 (preto) | 2,6, limitado a 2,0 px | Pontos tocantes, sólido escuro |
| 89 | (0,651) x 2 x 1,3 = 1,69 px | Ponto médio |
| 200 | (0,216) x 2 x 1,3 = 0,56 px | Ponto pequeno |
| 230 | (0,098) x 2 x 1,3 = 0,25 px | Ignorado, lê como papel |
O ângulo padrão é de 45 graus, a convenção para uma tela de cor única porque uma grade diagonal é menos perceptível aos olhos do que linhas alinhadas com as bordas da página Ângulos próximos a 0 ou 90 produzem linhas horizontais ou verticais visíveis O controle deslizante de ângulo afeta apenas esse modo.
O que a escala de pixels, paletas e configurações de inversão mudam?
Escala pixel (2 a 32 px, padrão 4) define o tamanho de cada bloco ou célula de ponto A ferramenta amostra um pixel por célula em vez de calcular a média da célula, então detalhes muito finos menores que uma célula podem desaparecer ou produzir padrões moire em tecidos e grades Células maiores dão um pôster mais robusto e gráfico; células menores contêm mais detalhes e produzem arquivos SVG maiores.
Paletas defina as cores Cinco predefinições estão incluídas: Brutal Paper (papyrus, hazard yellow, charcoal), Mac OS 1984 (branco, cinza, preto), Gameboy Classic (quatro verdes), Cyberpunk Neon e Synthwave 80, além de Custom Colors com seu próprio fundo e primeiro plano Cinco dos seis modos são bicolores e usam apenas a primeira e última paleta de cores É por isso que Gameboy Classic mostra apenas suas verduras mais claras e escuras na Bayer ou Floyd-Steinberg Cyber Glitch é o único modo que mapeia para cada cor na paleta.
Inverter troca o fundo e o primeiro plano, por pontos claros num campo escuro.
Que tamanho você pode exportar, e quando você deve usar SVG?
A foto é primeiro encaixada em um palco fixo, de modo que um arquivo de câmera de 6000 px renderiza tão rápido quanto um pequeno Arraste dentro da tela para reposicionar a colheita.
| proporção | Estágio (1x) | 2x (padrão) | 4x | 8x |
|---|---|---|---|---|
| Original | 840 px de largura | 1680 de largura | 3360 de largura | 6720 de largura |
| 1:1 quadrado | 840x840 | 1680x1680 | 3360x3360 | 6720x6720 |
| 16:9 paisagem | 1120x630 | 2240x1260 | 4480x2520 | 8960x5040 |
| 9:16 vertical | 630x1120 | 1260x2240 | 2520x4480 | 5040x8960 |
| 4:3 clássico | 1040x780 | 2080x1560 | 4160x3120 | 8320x6240 |
Uma exportação PNG não aumenta a visualização Ele redesenha a fonte no tamanho alvo e executa o dither novamente com a escala de pixels multiplicada pela escala de exportação, de modo que em 4 x um ponto de 4 px se torna um ponto nítido de 16 px em vez de uma ampliação borrada A renderização é feita com o API de tela HTML, que contém bitmaps grandes na memória; se uma exportação 8 x falhar com o & quot; Export falhou Tente uma escala de exportação menor.", faça isso.
A exportação SVG escreve cada ponto como real <rect> ou <circle> elemento, seguindo o Especificação W3C SVG0, assim o cartaz escala para qualquer tamanho de impressão sem reamostragem e abre em um editor de vetores O texto do cartão de cartaz permanece como texto editável O trade-off é o tamanho do arquivo Uma escala de 4 px em um estágio de 840 x 1120 tem 210 x 280 = 58.800 células, e uma imagem escura de modo reto pode escrever a maioria delas como elementos separados de cerca de 55 caracteres cada, que se aproxima de 3 MB A duplicação da escala de pixels para 8 corta a contagem de células para um quarto Usar SVG para impressão e edição, PNG para a web.
O efeito de scanline CRT nunca atinge uma exportação; é apenas uma sobreposição de antevisão A sobreposição do cartão de cartaz, por outro lado, faz parte da exportação e está ligada por omissão com o cabeçalho do espaço reservado & quot; DITHERED // 2026 & quot;; untick & quot; Mostrar sobreposição e quot do cartão de cartaz; se você quiser apenas a imagem.
Minhas imagens são carregadas?
Não. O arquivo é aberto como uma URL de objeto local, desenhado em uma tela e pontilhado na mesma guia do navegador Nenhuma solicitação carrega dados de imagem, então fotos inéditas ou ativos de cliente permanecem no seu dispositivo, e a ferramenta continua trabalhando com a rede desligada uma vez carregado. Cole da área de transferência com Ctrl+V ou Cmd+V também funciona.
As amostras embutidas (Earthrise, Blue Marble e uma bootprint lunar) são fotografias da NASA Obras do governo federal dos EUA não estão sujeitas a direitos autorais sob 17 USC 105, e é por isso que eles podem enviar como amostras Para seus próprios uploads, a ferramenta não adiciona marca d'água e não reivindica direitos; os limites usuais são quaisquer direitos que você detém na imagem de origem.
Que erros você pode encontrar?
| Mensagem ou sintoma | Causa | Consertar |
|---|---|---|
| O & quot; esse ficheiro não é uma imagem." | O tipo de arquivo's não é uma imagem | Converta-o primeiro, por exemplo, com um conversor de formato de imagem |
| O & quot; essa imagem não pôde ser descodificada." | O navegador não consegue ler esse formato, como HEIC fora do Safari | Converter para JPG ou PNG |
| O & quot; Export falhou Tente uma escala de exportação mais pequena." | O navegador não conseguiu alocar a tela grande | Escolha 4 x ou 2x |
| O & quot; A leitura da área de transferência foi bloqueada..." | O navegador negou o acesso da área de transferência ao botão | Pressione Ctrl+V ou Cmd+V na página |
| Paleta mostra apenas duas cores | Os modos de dois tons usam a primeira e a última cores | Mude para Cyber Glitch ou defina cores personalizadas |
| Moire ou padrões cintilantes | Detalhe regular fino menor que a escala de pixels | Eleve a escala de pixels ou desfoca a fonte um pouco primeiro |
| SVG muito maior que PNG | Um elemento por ponto | Eleve a escala de pixels ou exporte PNG |
As áreas transparentes em um PNG são colocadas em branco antes do pontilhamento, para que sejam lidas como papel.
Alternativas para pontilhar uma imagem
| ferramenta | Como | notas |
|---|---|---|
| GIMP | Imagem, modo, indexado, com pontilhamento de Floyd-Steinberg | Baseado em paleta, sem ângulo de tela de meio-tom |
| Photoshop | Escala de cinza, depois modo Bitmap com tela de meio-tom ou pontilhamento de difusão | Imprimir-orientado, pago |
| ImageMagick | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
Roteirizável, muitos mapas de limiar |
| ImageMagick | magick in.jpg -dither FloydSteinberg -monochrome out.png |
Difusão de erros para preto e branco |
| Pontilhamento de imagem Toolz | Seis modos, paletas, SVG vetorial | Lado do cliente, visualize enquanto arrasta |
As ferramentas de linha de comando ganham para lotes Uma ferramenta interativa ganha quando o visual depende do contraste de cutucada e do tamanho do ponto enquanto assiste ao resultado.
Se a PNG hesitante estiver indo para um site, o Guia de compressão de imagens abrange como encolhê-lo ainda mais; imagens com apenas duas cores comprimem extremamente bem como PNG Para transformar a saída em outro formato, o Guia do conversor de formato de imagem explica quando PNG, WebP ou GIF se encaixam O conjunto completo vive no hub de ferramentas de imagem, e você pode experimente a ferramenta de pontilhamento com uma das amostras da NASA antes de carregar sua própria foto.
