Guarda da vicino una foto di giornale e cade a pezzi in punti neri di diverse dimensioni Guarda uno screenshot del primo Macintosh e un cielo grigio si rivela essere una manciata di pixel in bianco e nero Guarda uno sprite per Game Boy e quattro sfumature di verde in qualche modo disegnano un volto Nessuno di quei display o presse potrebbe mostrare un gradiente fluido, e tutti falsificano uno allo stesso modo: disponendo alcuni colori disponibili in motivi l'occhio torna in tono.
Quella tecnica è dithering Questa guida spiega perché esiste, come i principali algoritmi differiscono nell'aritmetica che usano, cosa cambiano le impostazioni in uno strumento dithering e come ottenere un output pulito per lo schermo o la stampa Gli esempi lavorati utilizzano il Strumento di dithering delle immagini Toolz, e i numeri provengono dalle stesse formule che esegue.
tl; dr: Il dithering riproduce un'immagine a toni continui con una piccola tavolozza, spesso solo due colori, posizionando punti in motivi che l'occhio fonde in toni intermedi Il dithering ordinato (Bayer) confronta ogni pixel con una matrice a soglia fissa e dà un normale crosshatch La diffusione dell'errore (Floyd-Steinberg, Atkinson) spinge ogni pixel's errore di arrotondamento sui suoi vicini per un grano più organico Il mezzitoni varia la dimensione dei punti lungo uno schermo ruotato, come la stampa Strumento di dithering dell'immagine offre sei modalità, palette retrò, esportazione PNG fino a 8x e SVG vettoriale vero, tutto lato client, gratuito, senza iscrizione.
Che cosa è il dithering dell'immagine?
Il dithering delle immagini è un modo per mostrare toni che una tavolozza non può rappresentare direttamente, mescolando i colori che può rappresentare in piccoli motivi Una stampante in bianco e nero non può stampare il 50% di grigio, ma può stampare una scacchiera di punti in bianco e nero che sembra grigia da una normale distanza di visualizzazione.
Il problema che risolve si chiama quantizzazione Ogni pixel deve essere arrotondato al colore più vicino nella tavolozza disponibile Senza dithering, una fotografia ridotta in bianco e nero mantiene solo una silhouette dura: tutto più chiaro del grigio medio diventa bianco e tutto più scuro diventa nero Il gradiente è sparito Con il dithering, l'arrotondamento avviene ancora pixel per pixel, ma l'errore è distribuito o compensato da un modello, quindi la densità dei punti scuri in ogni area tiene traccia di quanto fosse scura quell'area nell'originale.
Diversi algoritmi diffondono quell'errore in modi diversi, e il modello che ognuno lascia dietro di sé è la sua firma visiva Ecco perché & quot; dithered" può significare il crosshatch ordinato di un vecchio gioco per PC, la trama granulosa di MacPaint o i punti rotondi di un poster serigrafato.
In cosa sono diversi gli algoritmi di dithering?
Ci sono due famiglie. Dithering ordinato decide ogni pixel in modo indipendente confrontandolo con una posizione in uno schema di soglia fisso. Diffusione dell'errore decide i pixel in sequenza e trasporta ogni errore di arrotondamento in avanti ai pixel non ancora elaborati Il mezzitoni è un parente derivato dalla stampa che modifica la dimensione del punto anziché il posizionamento del punto.
| Modalità nello strumento | Famiglia | Come decide | Guarda | bene per |
|---|---|---|---|---|
| Bayer 4x4 | Ordinato | Confronta il tono con una matrice di soglia 4x4 | Tracolla regolare, motivo visibile | Gioco retrò e primo stile PC, poster |
| Atkinson | Diffusione dell'errore | Spingere 3/4 dell'errore a sei vicini | High contrasto, blown-out highlights | Il look Macintosh del 1984, ritratti con punch |
| Floyd-Steinberg | Diffusione dell'errore | Spingi tutto l'errore a quattro vicini | Grano organico fine, tono più fedele | Fotografie dove i dettagli contano |
| Mezzotono | Schermo modulato in ampiezza | Il raggio del punto cresce con l'oscurità, su una griglia ruotata | Punti rotondi ad angolo | Manifesti in stile stampa, fumetti e pop art |
| Cyber Glitch | Scatto della tavolozza più spostamento | Colore della tavolozza più vicino per blocco, scanline spostate | Blocchi colorati con strappi orizzontali | Arte multi-colore stilizzata |
| Difficile 1-Bit | Soglia | Scuro se il tono è inferiore a 128 | Nessun dithering, silhouette pura | Loghi, line art, stencil |
Le sezioni successive attraversano l'aritmetica con numeri reali, iniziando dal valore del tono condiviso da ogni modalità.
Come viene calcolato il tono di un pixel's prima del dithering?
Prima che venga applicato qualsiasi modello, ogni pixel viene convertito in un singolo valore di luminosità da 0 (nero) a 255 (bianco) Lo strumento utilizza i pesi luma da Raccomandazione ITU-R BT.601, che pesano di più sul verde perché la visione umana è più sensibile ad esso:
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
Il cursore Luminosità sposta ogni pixel da -100 a +100 Il cursore della curva di contrasto, da 0,5 a 3 con un valore predefinito di 1,4, allunga i toni lontano dal grigio medio.
Esempio di lavoro: un pixel grigio medio RGB (100, 100, 100) alle impostazioni predefinite.
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
Quindi il contrasto predefinito spinge questo grigio più scuro, da 100 a circa 89. un pixel esattamente a 128 si muove a malapena, e un pixel a 180 si muove più chiaro. Aumentando il contrasto si allarga che si diffonde, il che significa meno toni medi e modelli di punti più audaci.
Come funziona il dithering ordinato da Bayer?
Il dithering Bayer riquadra una piccola matrice di soglie attraverso l'immagine e segna un pixel scuro quando il suo tono scende al di sotto della soglia nella sua posizione La matrice è disposta in modo che le soglie siano distribuite il più uniformemente possibile attraverso la tessera, la disposizione pubblicata da Bryce Bayer nel 1973 Lo strumento utilizza la versione 4x4, scalata a 0-255:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
Prendi un'area piatta in cui ogni pixel ha il tono curvo di 89 dall'esempio sopra Una cella è scura quando 89 è sotto la sua soglia Le soglie sopra 89 sono 96, 112, 128, 144, 160, 176, 192, 208, 224 e 240: dieci delle sedici Quindi 10 celle su 16 ricevono inchiostro, che è una copertura del 62,5%, vicino al tono e al n. 39; l'oscurità è di 1 - 89/255 = 65%.
Ogni area con lo stesso tono ottiene esattamente lo stesso schema, e quella ripetizione è il look Bayer Non produce mai grana casuale, si piastrella in modo pulito e si comprime bene come PNG La sua debolezza è la banda: un gradiente lento attraversa al massimo 17 modelli distinti.
Come funziona la diffusione degli errori Floyd-Steinberg?
Floyd-Steinberg elabora l'immagine da sinistra a destra, dall'alto verso il basso Ogni pixel è arrotondato al bianco o nero, e la differenza tra il suo tono e il valore a cui è stato arrotondato è divisa tra quattro vicini che non sono stati ancora elaborati, utilizzando pesi che si sommano a 16/16 Robert Floyd e Louis Steinberg lo pubblicarono nel 1976.
current 7/16
3/16 5/16 1/16
Esempio lavorato con il tono di 89 È sotto il taglio di 128, quindi il pixel diventa nero (0) L'errore è 89 - 0 = 89, che viene consegnato:
| Vicinanza | Share | Aggiunto al suo tono |
|---|---|---|
| Giusto | 7/16 | 38.9 |
| Sotto sinistra | 3/16 | 16.7 |
| Sotto | 5/16 | 27.8 |
| Sotto destra | 1/16 | 5.6 |
| Totale | 16/16 | 89,0 |
Il pixel a destra ora ha 89 + 38,9 = 127,9, appena sotto il cutoff, quindi probabilmente diventa nero anche e passa sul suo errore più piccolo Un po 'più avanti, l'errore accumulato punta un pixel oltre 128 e diventa bianco Su un'area, la proporzione di pixel in bianco e nero corrisponde al tono originale, e poiché la scelta dipende dai vicini, la grana sembra irregolare piuttosto che piastrellata.
Poiché l'errore completo viene mantenuto, Floyd-Steinberg conserva al meglio il tono generale, motivo per cui è la scelta per la fedeltà fotografica.
Perché il dithering Atkinson sembra così contrastato?
Il dithering Atkinson, scritto da Bill Atkinson per l'originale Apple Macintosh, diffonde l'errore più in largo ma ne perde deliberatamente una parte, ognuno dei sei vicini riceve 1/8 dell'errore, quindi vengono trasmessi solo 6/8 (tre quarti):
current 1/8 1/8
1/8 1/8 1/8
1/8
Con lo stesso tono di 89 e un errore di 89, ogni vicino ottiene 11,125, per un totale di 66,75 trasmessi, e 22,25 viene semplicemente eliminato L'errore di caduta spinge le aree quasi bianche in aree bianche pure e quasi nere in nero puro, quindi le luci si spengono, le ombre si bloccano e i toni medi mantengono una trama nitida e aperta. È meno accurato di Floyd-Steinberg e spesso più attraente, soprattutto su volti e schermi piccoli.
Come funziona la modalità mezzitoni?
Il mezzotoning varia la dimensione dei punti piuttosto che il loro posizionamento Lo strumento pone una griglia di punti campione ruotati rispetto all'angolo dello schermo, legge il tono in ogni punto e disegna un cerchio il cui raggio cresce man mano che il tono si oscura:
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 scala di pixel 4px predefinita:
| Tono | Raggio | Risultato |
|---|---|---|
| 0 (nero) | 2,6, limitato a 2,0 px | Puntini toccanti, solido scuro |
| 89 | (0,651) x 2 x 1,3 = 1,69 px | Punto medio |
| 200 | (0,216) x 2 x 1,3 = 0,56 px | Piccolo punto |
| 230 | (0,098) x 2 x 1,3 = 0,25 px | Saltato, si legge come carta |
L'angolo predefinito è di 45 gradi, la convenzione per uno schermo monocolore perché una griglia diagonale è meno evidente all'occhio rispetto alle righe allineate con i bordi della pagina Angoli vicini a 0 o 90 producono linee orizzontali o verticali visibili Il cursore dell'angolo influisce solo su questa modalità.
Cosa cambiano la scala dei pixel, le tavolozze e le impostazioni di inversione?
Scala pixel (da 2 a 32 px, predefinito 4) imposta la dimensione di ogni blocco o cella di punti Lo strumento campiona un pixel per cella anziché fare la media della cella, quindi dettagli molto fini più piccoli di una cella possono scomparire o produrre motivi moire su tessuti e griglie Le celle più grandi danno un poster più grosso e grafico; le celle più piccole contengono più dettagli e producono file SVG più grandi.
Tavolozze imposta i colori Sono inclusi cinque preset: Carta Brutale (papiro, giallo hazard, carboncino), Mac OS 1984 (bianco, grigio, nero), Gameboy Classic (quattro verdi), Cyberpunk Neon e Synthwave anni '80, più Colori Personalizzati con il proprio sfondo e primo piano Cinque delle sei modalità sono bicolore e utilizzano solo il primo e l'ultimo colore della tavolozza Ecco perché Gameboy Classic mostra solo i suoi verdi più chiari e scuri in Bayer o Floyd-Steinberg Cyber Glitch è l'unica modalità che mappa su ogni colore della tavolozza.
Invertire scambia sfondo e primo piano, per punti chiari su un campo scuro.
Che dimensione puoi esportare e quando dovresti utilizzare SVG?
La foto viene prima montata in copertina su un palco fisso, quindi un file di fotocamera da 6000 px rende veloce come uno piccolo Trascina all'interno della tela per riposizionare il ritaglio.
| rapporto di aspetto | Palco (1x) | 2x (predefinito) | 4x | 8x |
|---|---|---|---|---|
| Originale | 840 px di larghezza | 1680 di larghezza | 3360 di larghezza | 6720 di larghezza |
| 1:1 quadrato | 840x840 | 1680x1680 | 3360x3360 | 6720x6720 |
| 16:9 paesaggio | 1120x630 | 2240x1260 | 4480x2520 | 8960x5040 |
| 9:16 verticale | 630x1120 | 1260x2240 | 2520x4480 | 5040x8960 |
| 4:3 classico | 1040x780 | 2080x1560 | 4160x3120 | 8320x6240 |
Un'esportazione PNG non ingrandisce l'anteprima Ridisegna la sorgente alla dimensione target ed esegue nuovamente il dithering con la scala dei pixel moltiplicata per la scala di esportazione, quindi a 4x un punto 4px diventa un punto nitido da 16 px anziché un ingrandimento sfocato Il rendering viene eseguito con il API di tela HTML, che contiene bitmap di grandi dimensioni in memoria; se un'esportazione 8x fallisce con & quot; Esportazione fallita Prova una scala di esportazione più piccola.& quot;, fallo.
L'esportazione SVG scrive ogni punto come un vero e proprio <rect> oppure <circle> elemento, seguendo il Specifica SVG W3Cquindi il poster scala su qualsiasi dimensione di stampa senza ricampionamento e si apre in un editor vettoriale Il testo della scheda poster rimane come testo modificabile Il compromesso è la dimensione del file Una scala 4px su uno stadio 840 x 1120 ha 210 x 280 = 58.800 celle, e un'immagine in modalità retta scura può scriverne la maggior parte come elementi separati di circa 55 caratteri ciascuno, che si avvicina a 3 MB Raddoppiando la scala dei pixel a 8 si riduce il numero di celle a un quarto Usa SVG per la stampa e la modifica, PNG per il web.
L'effetto CRT scanline non raggiunge mai un'esportazione; è solo una sovrapposizione di anteprima La sovrapposizione della carta poster, d'altra parte, fa parte dell'esportazione ed è attiva per impostazione predefinita con l'intestazione segnaposto & quot;DITHERED // 2026"; untick & quot; Mostra sovrapposizione e quotazione della carta poster; se vuoi l'immagine da sola.
Le mie immagini sono caricate?
No. Il file viene aperto come URL di un oggetto locale, disegnato su un'area di disegno e dithered nella stessa scheda del browser Nessuna richiesta trasporta dati di immagine, quindi foto inedite o risorse client rimangono sul dispositivo e lo strumento continua a lavorare con la rete spenta una volta caricato Incolla dagli appunti con Ctrl+V o Cmd+V funziona anche.
I campioni incorporati (Earthrise, Blue Marble e un'impronta lunare) sono fotografie della NASA Le opere del governo federale degli Stati Uniti non sono soggette a copyright ai sensi 17 USC 105, motivo per cui possono spedire come campioni Per i propri caricamenti, lo strumento non aggiunge filigrana e non rivendica diritti; i limiti abituali sono qualunque diritto tu detenga nell'immagine sorgente.
In quali errori puoi incorrere?
| Messaggio o sintomo | Causa | Fix |
|---|---|---|
| & quot;Quel file non è un'immagine." | Il tipo file's non è un'immagine | Convertilo prima, ad esempio con un convertitore di formato immagine |
| & quot;Quell'immagine non può essere decodificata." | Il browser non può leggere quel formato, come HEIC al di fuori di Safari | Converti in JPG o PNG |
| & quot; Esportazione fallita Prova una scala di esportazione più piccola.& quot; | Il browser non è riuscito ad allocare la tela di grandi dimensioni | Scegli 4x o 2x |
| & quot; La lettura degli appunti è stata bloccata..." | Il browser ha negato l'accesso agli appunti al pulsante | Premere invece Ctrl+V o Cmd+V sulla pagina |
| Palette mostra solo due colori | Le modalità bicolore utilizzano il primo e l'ultimo colore | Passa a Cyber Glitch o imposta colori personalizzati |
| Moire o motivi scintillanti | Dettaglio regolare fine più piccolo della scala dei pixel | Alza la scala dei pixel o sfoca leggermente prima la sorgente |
| SVG molto più grande di PNG | Un elemento per punto | Alza la scala dei pixel o esporta PNG |
Le aree trasparenti in un PNG vengono posizionate sul bianco prima di esitare, quindi vengono lette come carta.
Alternative per il dithering di un'immagine
| strumento | Come | banconote |
|---|---|---|
| GIMP | Immagine, modalità, indicizzata, con dithering Floyd-Steinberg | Basato su tavolozza, nessun angolo dello schermo dei mezzitoni |
| Photoshop | Scala di grigi, quindi modalità Bitmap con schermo a mezzitoni o dithering a diffusione | Orientato alla stampa, pagato |
| ImageMagick | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
Scriptable, molte mappe di soglia |
| ImageMagick | magick in.jpg -dither FloydSteinberg -monochrome out.png |
Diffusione dell'errore in bianco e nero |
| Dithering dell'immagine Toolz | Sei modalità, tavolozze, SVG vettoriale | Lato client, anteprima mentre trascini |
Gli strumenti della riga di comando vincono per i lotti Uno strumento interattivo vince quando l'aspetto dipende dal contrasto di spinta e dalla dimensione del punto mentre si guarda il risultato.
Se il PNG dithered si sta dirigendo verso un sito web, il Guida alla compressione dell'immagine copre come ridurlo ulteriormente; le immagini con solo due colori si comprimono estremamente bene come PNG. Per trasformare l'output in un altro formato, il Guida al convertitore di formati immagine spiega quando si adatta PNG, WebP o GIF. Il set completo vive sul hub degli strumenti di immagine, e puoi prova lo strumento dithering con uno dei campioni della NASA prima di caricare la tua foto.
