Kijk goed naar een krantenfoto en die valt uiteen in zwarte stippen van verschillende grootte Kijk eens naar een screenshot van de eerste Macintosh en een grijze lucht blijkt een strooi zwart-wit pixels te zijn Kijk naar een Game Boy sprite en vier tinten groen tekenen op de een of andere manier een gezicht Geen van die displays of persen zou een vloeiende gradiënt kunnen vertonen, en ze faken allemaal op dezelfde manier: door een paar beschikbare kleuren in patronen te rangschikken, wordt het oog weer gemiddeld in toon.
Die techniek is dithering Deze gids legt uit waarom het bestaat, hoe de belangrijkste algoritmen verschillen in de rekenkunde die ze gebruiken, wat de instellingen in een dither-tool veranderen en hoe je schone uitvoer krijgt voor scherm of print De bewerkte voorbeelden gebruiken de Toolz image dither tool, en de cijfers komen uit dezelfde formules die het uitvoert.
tl;dr: Dithering reproduceert een continu-toonbeeld met een klein palet, vaak slechts twee kleuren, door stippen in patronen te plaatsen die het oog opgaat in tussentonen Geordende dithering (Bayer) vergelijkt elke pixel met een vaste drempelmatrix en geeft een regelmatige kruisarcering Foutdiffusie (Floyd-Steinberg, Atkinson) duwt elke pixel' s afrondingsfout op zijn buren voor een meer organische korrel Halftoon varieert de puntgrootte langs een gedraaid scherm, zoals afdrukken De Image Dither tool biedt zes modi, retro paletten, PNG export tot 8x en echte vector SVG, alle client-side, gratis, geen aanmelding.
Wat is beelddithering?
Afbeeldingsdithering is een manier om tonen te tonen die een palet niet direct kan weergeven, door de kleuren die het kan voorstellen in kleine patronen te mengen Een zwart-witprinter kan geen 50% grijs afdrukken, maar wel een schaakbord met zwart-witte stippen die er vanaf een normale kijkafstand grijs uitzien.
Het probleem dat het oplost heet kwantisering Elke pixel moet in het beschikbare palet afgerond worden naar de dichtstbijzijnde kleur Zonder dithering houdt een tot zwart-wit verkleinde foto slechts een hard silhouet: alles lichter dan middengrijs wordt wit en alles donkerder wordt zwart De gradiënt is verdwenen Bij dithering gebeurt de afronding nog steeds pixel voor pixel, maar de fout wordt uitgespreid of gecompenseerd door een patroon, dus de dichtheid van donkere stippen in elk gebied houdt bij hoe donker dat gebied in het origineel was.
Verschillende algoritmen verspreiden die fout op verschillende manieren, en het patroon dat elk achterlaat is de visuele handtekening. Daarom is "dithered" kan de nette kruisarcering van een oud pc-spel, de korrelige textuur van MacPaint of de ronde stippen van een gezeefdrukte poster betekenen.
Hoe zijn de dither algoritmes verschillend?
Er zijn twee families. Besteld dithering bepaalt elke pixel onafhankelijk door deze te vergelijken met een positie in een vast drempelpatroon. Foutdiffusie bepaalt pixels in volgorde en voert elke afrondingsfout door naar pixels die nog niet zijn verwerkt Halftonen is een van afdrukken afgeleid familielid dat de puntgrootte verandert in plaats van de puntplaatsing.
| Modus in de tool | Familie | Hoe het beslist | Kijk | goed voor |
|---|---|---|---|---|
| Bayer 4x4 | Bestelde | Toon vergelijken met een 4x4 drempelmatrix | Regelmatige kruisarcering, zichtbaar patroon | Retrospel en vroege pc-stijl, posters |
| Atkinson | Foutdiffusie | Duw 3/4 van de fout naar zes buren | Hoog contrast, uitgeblazen highlights | De Macintosh-look uit 1984, portretten met punch |
| Floyd-Steinberg | Foutdiffusie | Duw alle fouten naar vier buren | Fijne biologische korrel, meest trouwe toon | Foto's waar detail ertoe doet |
| Halftoon | Amplitude-gemoduleerd scherm | De puntradius groeit met de duisternis, op een geroteerd raster | Ronde stippen onder een hoek | Posters in printstijl, strip- en pop-art |
| Cyber Glitch | Palet snap plus verplaatsing | Dichtstbijzijnde paletkleur per blok, verschoven scanlijnen | Kleurrijke blokken met horizontale tranen | Gestileerde meerkleurenkunst |
| Moeilijk 1-Bit | Drempel | Donker als de toon lager is dan 128 | Geen aarzeling, puur silhouet | Logo's, lijnkunst, stencils |
De volgende secties lopen door de rekenkunde met reële getallen, te beginnen met de toonwaarde die elke modus deelt.
Hoe wordt een pixel's-toon berekend voordat deze dithering?
Voordat een patroon wordt toegepast, wordt elke pixel omgezet naar een enkele helderheidswaarde van 0 (zwart) tot 255 (wit).Het gereedschap gebruikt de lumagewichten van ITU-R-aanbeveling BT.601, welk gewicht het meest groen is omdat het menselijk zicht er het meest gevoelig voor is:
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
De schuifregelaar Helderheid verschuift elke pixel met -100 naar +100 De schuifregelaar Contrastcurve, 0,5 naar 3 met een standaard van 1,4, rekt tonen weg van middengrijs.
Werkvoorbeeld: een medium grijze pixel RGB (100, 100, 100) bij de standaardinstellingen.
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
Dus het standaard contrast duwt dit grijs donkerder, van 100 naar ongeveer 89 Een pixel precies op 128 beweegt nauwelijks, en een pixel op 180 beweegt lichter Het verhogen van contrast wordt breder die spreiding, wat minder middentonen en gedurfdere stippenpatronen betekent.
Hoe werkt Bayer besteld dithering?
Bayer dithering tegels een kleine matrix van drempels over de afbeelding en markeert een pixel donker wanneer de toon onder de drempel op zijn positie valt De matrix is zo gerangschikt dat drempels zo gelijkmatig mogelijk over de tegel worden verdeeld, de opstelling gepubliceerd door Bryce Bayer in 1973 De tool maakt gebruik van de 4x4 versie, geschaald naar 0-255:
0 128 32 160
192 64 224 96
48 176 16 144
240 112 208 80
Neem een vlak gebied waar elke pixel de gebogen toon van 89 heeft uit het bovenstaande voorbeeld Een cel is donker als 89 onder zijn drempel is De drempels boven 89 zijn 96, 112, 128, 144, 160, 176, 192, 208, 224 en 240: tien van de zestien Dus 10 van elke 16 cellen krijgen inkt, wat 62,5% dekking is, dicht bij de toon's duisternis van 1 - 89/255 = 65%.
Elk gebied met dezelfde toon krijgt precies hetzelfde patroon, en die herhaling is de Bayer-look. Het produceert nooit willekeurige korrels, het tegt netjes en het comprimeert goed als PNG. De zwakte is bandering: een langzame gradiënt loopt door maximaal 17 verschillende patronen.
Hoe werkt Floyd-Steinberg foutdiffusie?
Floyd-Steinberg verwerkt het beeld van links naar rechts, van boven naar beneden Elke pixel is afgerond op zwart of wit, en het verschil tussen de toon en de waarde waarop het afgerond is wordt verdeeld over vier buren die nog niet verwerkt zijn, met behulp van gewichten die optellen tot 16/16 Robert Floyd en Louis Steinberg publiceerden het in 1976.
current 7/16
3/16 5/16 1/16
Werkte voorbeeld met de toon van 89. 't Is onder de 128 cutoff, dus de pixel wordt zwart (0).De fout is 89 - 0 = 89, die wordt doorgegeven
| Buurman | Share | Toegevoegd aan zijn toon |
|---|---|---|
| Right | 7/16 | 38,9 |
| Onder links | 3/16 | 16.7 |
| Hieronder | 5/16 | 27,8 |
| Rechts onder | 1/16 | 5.6 |
| Totaal | 16/16 | 89,0 |
De pixel naar rechts heeft nu 89 + 38,9 = 127,9, net onder de cutoff, dus waarschijnlijk wordt het ook zwart en geeft het zijn eigen kleinere fout door Iets verderop tipt de geaccumuleerde fout een pixel boven de 128 en wordt het wit Over een gebied komt de verhouding zwart-wit pixels overeen met de oorspronkelijke toon, en omdat de keuze afhankelijk is van buren, ziet de korrel er eerder onregelmatig dan betegeld uit.
Omdat de volledige fout behouden blijft, behoudt Floyd-Steinberg de algehele toon het beste, en daarom is het de keuze voor fotografische trouw.
Waarom ziet Atkinson dithering er zo contrastrijk uit?
Atkinson dithering, geschreven door Bill Atkinson voor de originele Apple Macintosh, spreidt de fout breder maar verliest er bewust een deel van Elk van de zes buren krijgt 1/8 van de fout, dus wordt slechts 6/8 (driekwart) doorgegeven
current 1/8 1/8
1/8 1/8 1/8
1/8
Met dezelfde toon van 89 en een fout van 89 krijgt elke buurman 11,125, voor een totaal doorgegeven 66,75, en 22,25 wordt gewoon weggelaten Laat fout bijna witte gebieden naar puur witte en bijna zwarte gebieden naar puur zwart, dus highlights blazen uit, schaduwen blokkeren, en middentonen houden een scherpe, open textuur Het is minder nauwkeurig dan Floyd-Steinberg en vaak aantrekkelijker, vooral op gezichten en kleine schermen.
Hoe werkt de halftoonmodus?
Halftonen varieert de grootte van stippen in plaats van hun plaatsing. Het gereedschap legt een raster van monsterpunten die naar de schermhoek zijn gedraaid, leest de toon op elk punt en tekent een cirkel waarvan de straal groeit naarmate de toon donkerder wordt:
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
Met de standaard 4px pixelschaal:
| Toon | Radius | Resultaat |
|---|---|---|
| 0 (zwart) | 2,6, afgedekt tot 2,0 px | Aanrakende stippen, effen donker |
| 89 | (0,651) x 2 x 1,3 = 1,69 px | Middelgrote stip |
| 200 | (0,216) x 2 x 1,3 = 0,56 px | Kleine stip |
| 230 | (0,098) x 2 x 1,3 = 0,25 px | Overgeslagen, leest als papier |
De standaardhoek is 45 graden, de conventie voor een scherm met één kleur omdat een diagonaal raster minder opvallend is voor het oog dan rijen die uitgelijnd zijn met de paginaranden Hoeken in de buurt van 0 of 90 produceren zichtbare horizontale of verticale lijnen De hoekschuifregelaar heeft alleen invloed op deze modus.
Wat veranderen de pixelschaal, paletten en instellingen voor inverteren?
Pixelschaal (2 tot 32px, standaard 4) stelt de grootte van elk blok of puntcel in Het gereedschap bemonstert één pixel per cel in plaats van het middelen van de cel, dus zeer fijne details kleiner dan een cel kunnen verdwijnen of moirépatronen op stoffen en roosters produceren Grotere cellen geven een brokere, meer grafische poster; kleinere cellen bevatten meer details en produceren grotere SVG-bestanden.
Paletten stel de kleuren in Vijf presets zijn inbegrepen: Brutal Paper (papyrus, hazard yellow, charcoal), Mac OS 1984 (wit, grijs, zwart), Gameboy Classic (vier greens), Cyberpunk Neon en Synthwave 80s, plus Custom Colors met een eigen achtergrond en voorgrond Vijf van de zes modi zijn tweekleurig en gebruiken alleen de eerste en laatste paletkleur Daarom toont Gameboy Classic alleen de lichtste en donkerste greens in Bayer of Floyd-Steinberg Cyber Glitch is de enige modus die op elke kleur in het palet wordt afgebeeld.
Omkeren verwisselt achtergrond en voorgrond, voor lichte stippen op een donker veld.
Welke maat kunt u exporteren en wanneer moet u SVG gebruiken?
De foto wordt eerst op een vast podium aangebracht, zodat een camerabestand van 6000 px zo snel wordt weergegeven als een klein bestand. Sleep het canvas binnen om de uitsnede te herpositioneren.
| aspectverhouding | Etappe (1x) | 2x (standaard) | 4x | 8x |
|---|---|---|---|---|
| Original | 840 px breed | 1680 breed | 3360 breed | 6720 breed |
| 1:1 vierkant | 840 x 840 | 1680 x 1680 | 3360 x 3360 | 6720 x 6720 |
| 16:9 landschap | 1120 x 630 | 2240 x 1260 | 4480 x 2520 | 8960 x 5040 |
| 9:16 verticaal | 630 x 1120 | 1260 x 2240 | 2520 x 4480 | 5040 x 8960 |
| 4:3 klassiek | 1040 x 780 | 2080 x 1560 | 4160 x 3120 | 8320 x 6240 |
Een PNG-export vergroot de preview niet, Het hertekent de bron op de doelgrootte en voert de dither opnieuw uit met de pixelschaal vermenigvuldigd met de exportschaal, dus bij 4x wordt een 4px punt een scherpe 16px punt in plaats van een wazige vergroting. Rendering gebeurt met de HTML canvas API, die grote bitmaps in het geheugen bevat; als een 8x-export mislukt met " Export mislukt Probeer een kleinere exportschaal.", doe dat.
SVG export schrijft elke punt als een echte <rect> of <circle> element, volgend op de W3C SVG specificatie, dus de poster schaalt naar elke afdrukgrootte zonder opnieuw te bemonsteren en opent in een vectoreditor De posterkaarttekst blijft als bewerkbare tekst De afweging is bestandsgrootte Een schaal van 4px op een 840 x 1120-trap heeft 210 x 280 = 58.800 cellen, en een donkere rect-mode afbeelding kan de meeste ervan schrijven als afzonderlijke elementen van elk ongeveer 55 tekens, die 3 MB nadert. Door de pixelschaal te verdubbelen tot 8 wordt het aantal cellen teruggebracht tot een kwart. Gebruik SVG voor afdrukken en bewerken, PNG voor internet.
Het CRT-scanline-effect bereikt nooit een export; het is alleen een preview-overlay De overlay van de posterkaart maakt daarentegen deel uit van de export en staat standaard aan met de placeholder header & quot;DITHERED //2026"; untick & quot; Overlay" van de posterkaart weergeven; als u de afbeelding alleen wilt.
Zijn mijn afbeeldingen geüpload?
Nee. Het bestand wordt geopend als een lokale object-URL, getekend op een canvas en geditherd in hetzelfde browsertabblad Geen enkel verzoek bevat afbeeldingsgegevens, dus niet-vrijgegeven foto's of clientmiddelen blijven op uw apparaat staan, en de tool blijft werken met het netwerk uit zodra het is geladen. Plakken vanaf het klembord met Ctrl+V of Cmd+V werkt ook.
De ingebouwde samples (Earthrise, Blue Marble en een lunar bootprint) zijn NASA foto's Werken van de Amerikaanse federale overheid vallen niet onder het auteursrecht onder 17 USC 105, daarom kunnen ze als samples verzenden Voor uw eigen uploads voegt de tool geen watermerk toe en claimt geen rechten; de gebruikelijke limieten zijn de rechten die u in de bronafbeelding heeft.
Welke fouten kun je tegenkomen?
| Bericht of symptoom | Oorzaak | Fix |
|---|---|---|
| "Dat bestand is geen afbeelding." | Het bestand's-type is geen afbeelding | Converteer het eerst, bijvoorbeeld met een image format converter |
| "Dat beeld kon niet worden gedecodeerd." | De browser kan dat formaat niet lezen, zoals HEIC buiten Safari | Converteren naar JPG of PNG |
| " exporteren mislukt Probeer een kleinere exportschaal." | De browser kon het grote canvas niet toewijzen | Kies 4x of 2x |
| " Het lezen van het klembord is geblokkeerd..." | De browser weigerde toegang tot het klembord tot de knop | Druk in plaats daarvan op Ctrl+V of Cmd+V op de pagina |
| Palet toont slechts twee kleuren | Tweekleurige modi gebruiken de eerste en laatste kleur | Schakel over naar Cyber Glitch of stel aangepaste kleuren in |
| Moire of glinsterende patronen | Fijn regelmatig detail kleiner dan de pixelschaal | Verhoog de pixelschaal of vervaag eerst de bron iets |
| SVG veel groter dan PNG | Eén element per punt | Verhoog de pixelschaal of exporteer PNG |
Transparante gebieden in een PNG worden vóór het ditheren op wit geplaatst, zodat ze als papier worden gelezen.
Alternatieven voor het ditheren van een afbeelding
| kwast | Hoe | vastleggen |
|---|---|---|
| GIMP | Afbeelding, modus, geïndexeerd, met Floyd-Steinberg die aarzelt | Palet-gebaseerd, geen halftoon schermhoek |
| Photoshop | Grijswaarden, daarna Bitmap-modus met Halftone-scherm of Diffusion Dither | Printgericht, betaald |
| AfbeeldingMagick | magick in.jpg -colorspace Gray -ordered-dither o4x4 out.png |
Scriptable, veel drempelkaarten |
| AfbeeldingMagick | magick in.jpg -dither FloydSteinberg -monochrome out.png |
Foutdiffusie naar zwart-wit |
| Toolz Image Dither | Zes modi, paletten, vector SVG | Client-kant, voorbeeld terwijl u sleept |
Command-line tools winnen voor batches Een interactieve tool wint wanneer de look afhankelijk is van het nudging contrast en de dot grootte tijdens het bekijken van het resultaat.
Als de geditherde PNG op weg is naar een website, zal de Afbeeldingscompressiegids behandelt hoe het verder te verkleinen; afbeeldingen met slechts twee kleuren comprimeren extreem goed als PNG Voor het omzetten van de uitvoer in een ander formaat, de Convertergids voor afbeeldingsformaat legt uit wanneer PNG, WebP of GIF past De volledige set leeft op de hub voor beeldhulpmiddelen, en dat kan probeer het dithering-gereedschap met een van de NASA-monsters voordat je je eigen foto laadt.
