01 Einleitung

Dithering ist die Kunst, Bilder mit vielen Farben so darzustellen, dass sie auf einem Display mit nur wenigen verfügbaren Farben (z. B. einem 6-Farben-E-Ink-Schild) dennoch ähnlich aussehen. Statt eine Mischfarbe wie Mintgrün exakt zu reproduzieren, verteilt der Algorithmus reine Grüne und weiße Pixel so geschickt, dass das Auge aus Distanz wieder einen Mintton wahrnimmt.

Dither Studio bietet:

• 🎨
  7 Dither-Algorithmen

  Floyd-Steinberg, Atkinson, Stucki, Burkes, Sierra, Bayer 4×4 / 8×8 — direkt vergleichbar in Tabs
• 🪄
  Auto-Analyse

  Erkennt Bildtyp (Foto / Grafik / Text / Label), wählt Algorithmus und Settings automatisch
• 📚
  Bild-Bibliothek

  Mehrere Bilder gleichzeitig, jedes mit eigenen Settings; Batch-Processing für ganze Serien
• ⚙
  Experten-Modus

  Hintergrund-Ersetzer mit Pipette für Markenfarben, die keine direkte Palettenentsprechung haben
• ⚡
  Web Worker

  Schwere Berechnung läuft im Hintergrund — UI bleibt jederzeit responsiv
• 🔒
  100 % lokal

  Bilder werden niemals hochgeladen. Alles passiert im Browser. Settings via localStorage gespeichert.

02 Schnellstart in 3 Schritten

Wenn du das Tool zum ersten Mal öffnest, erscheint automatisch eine geführte Tour mit 7 Schritten. Falls du sie übersprungen hast oder sie erneut sehen möchtest, klicke jederzeit auf das ?-Symbol oben rechts.

03 Oberflächen-Übersicht

Das Tool ist in fünf Bereiche gegliedert:

• Header (oben) — Logo, aktuelles Bild (Breadcrumb), Sprachwahl, Hilfe-Button
• Sidebar (links) — Einstellungen in Panels, am unteren Ende fixiert die Action-Buttons
• Bildtab-Leiste (oberhalb des Canvas) — Vorschau-Tabs für jedes geladene Bild + Aktion-Buttons
• Toolbar (über dem Canvas) — Werkzeuge in Gruppen: Datei, Maske, Historie, Zoom, Ansicht
• Canvas (Mitte) — Bildvorschau mit Mini-Map (bei Zoom)
• Result-Bar (unter dem Canvas) — Tabs für jedes Dither-Ergebnis mit Mini-Vorschau
• Status-Bar (ganz unten) — Fortschritt, Bildmaße, Hinweise

Tooltips & Info-Popover

Seit v2.7 gibt es zwei Ebenen von Hilfe direkt in der UI:

• Tooltips — Fahre über ein Steuerelement; nach ~350 ms erscheint eine Bubble mit mehrzeiliger Erklärung. Funktioniert auch mit Tastatur-Fokus.
• Info-Popover (kleines ⓘ-Icon neben Labels) — Klick öffnet eine längere Erklärung inkl. Beispiel. Für komplexe Konzepte wie Gamma-Korrektur, ΔE, K-Means, Speckle-Filter und Halftone-Mix. Esc oder Klick außerhalb schließt sie.

Sidebar-Panels

Sechs Panels mit Settings, gegliedert von häufig nach selten genutzt. Jedes Panel hat eine kurze Intro-Zeile unter dem Titel. Die unteren drei sind einklappbar per Klick auf den Titel — Anzahl der vom Standard abweichenden Werte wird als Badge angezeigt:

1. Zielgröße — Skalierung (optional, default aus → Original-Maße bleiben)
2. Algorithmus — Dropdown der 7 Algorithmen + „Alle vergleichen"
3. Farbpalette — E-Ink-Paletten + Custom + K-Means-Generator
4. Optionen — Auto-Textschutz, Sharpen, Boost, Gamma, Live-Vorschau, etc.
5. Farbkorrektur — Helligkeit, R/G/B-Verstärkung, Neutral-Schutz
6. Experten-Modus — Hintergrund-Ersetzer mit Pipette, Farb-Mix

04 Quick-Presets

Drei Schnellzugriffs-Knöpfe ganz oben in der Sidebar setzen mit einem Klick eine sinnvolle Kombination aus Algorithmus, Schärfung, Sättigungs-Boost, Gamma und Speckle-Filter — ohne Bild-Analyse, also blind.

Der angeklickte Preset wird kurz mint-grün hervorgehoben als Bestätigung. Wenn Live-Vorschau aktiv ist, wird sofort neu gerendert.

05 Auto-Analyse

Der 🪄 Auto-Analyse & Dithern-Button im Sidebar-Footer ist die mächtigste Funktion. Er macht zwei Dinge:

1. Bild-Analyse: ~50.000 Sample-Pixel werden untersucht (Helligkeit, Kontrast, Sättigung, Kanten-Dichte, Farbreichtum, Weißanteil, Farbstich)
2. Empfehlung & Ausführung: Bildtyp wird klassifiziert, Settings werden gesetzt, drei passende Algorithmen werden parallel gerendert

Klassifikation

Das Tool kennt fünf Bildtypen und wählt entsprechend andere Standardwerte:

Auto-Report

Nach der Analyse erscheint im Sidebar-Footer eine kompakte Card mit:

• Erkannter Bildtyp (z. B. „Foto") als Pille
• Gewählter Algorithmus + Palette
• Statistik-Zeile (L̄, σL, S̄, Kanten-%, Farben, Weiß-%)
• Bullet-Liste der getroffenen Anpassungen mit Begründung

Empfohlener Algorithmus

Von den drei kuratierten Algorithmen bekommt einer einen ★ Empf.-Badge im Tab — das ist die beste Wahl laut Bild-Analyse. Daneben gibt es einen Best-Badge basierend auf dem niedrigsten ΔE2000-Wert (perzeptueller Abstand zum Original). Beide sind oft, aber nicht immer identisch.

06 Dither-Algorithmen

Sieben Algorithmen mit unterschiedlichem Charakter. Wenn du im Algorithmus-Dropdown „Alle vergleichen" wählst, werden alle 7 gerendert und als Tabs vergleichbar.

Error-Diffusion-Algorithmen

Verteilen den Quantisierungs-Fehler eines Pixels auf benachbarte Pixel. Erzeugen organisches, strukturloses Rauschen.

Ordered-Dithering (Bayer-Matrix)

Verwendet eine feste Pixel-Maske (Bayer-Matrix) statt Fehler-Verteilung. Erzeugt regelmäßiges, fast retro-artiges Muster.

07 Farbpaletten

Die Palette bestimmt, welche Farben überhaupt im Endergebnis vorkommen dürfen. Jede Palettenfarbe muss exakt vom Zielgerät anzeigbar sein.

Vorgefertigte Paletten

Custom-Palette

Wenn du „Eigene Palette" wählst, erscheint ein Plus-Button. Klicke ihn, um Farben hinzuzufügen (Browser-Color-Picker). Bestehende Farben kannst du per Hover über das X entfernen. Mindestens zwei Farben sind erforderlich — sonst kann das Dithering nicht starten.

K-Means: Palette aus Bild generieren

Klick auf 🎨 Aus Bild generieren im Palette-Panel. Das Tool extrahiert die n dominantesten Farben aus deinem aktuellen Bild via K-Means-Clustering und ersetzt damit die Custom-Palette.

Farbabstand-Methode

Im Optionen-Panel kannst du wählen, wie das Tool die „nächste Palettenfarbe" für jedes Pixel bestimmt:

• RGB euklidisch (schnell) — Standard. Berechnet Abstand direkt im RGB-Raum. Schnell, aber wahrnehmungs-ungenau (Grün und Blau erscheinen z. B. „weiter" als sie für das Auge sind).
• CIE76 (wahrnehmungsgenauer) — Berechnet im Lab-Farbraum. Besser für dunkle/gedeckte Farben (z. B. dunkler Wein-Rot wird korrekt zu Schwarz, nicht zu reinem Rot).
• CIEDE2000 (beste Genauigkeit) — Industriestandard. Berücksichtigt zusätzlich Hue-Rotation und Chroma-Sättigung. Etwas langsamer.

08 Bild-Bibliothek

Du kannst beliebig viele Bilder gleichzeitig laden. Jedes wird als Tab oberhalb des Canvas angezeigt mit:

• Mini-Thumbnail (88×88 px, aspect-ratio-erhaltend)
• Dateiname
• X zum Entfernen
• Result-Count-Badge wenn das Bild bereits gedithered wurde

Bilder hinzufügen

Vier Wege:

1. Drag & Drop in das Tool (Canvas-Bereich oder Tab-Strip)
2. Klick auf den Drop-Bereich → Datei-Dialog (Mehrfachauswahl möglich)
3. Strg+V aus Zwischenablage
4. Klick auf + Bild-Button im Tab-Strip

Per-Image-Settings-Memory

Jedes Bild merkt sich seine eigenen Settings. Wenn du auf Bild A „Sättigung +50%" einstellst und auf Bild B „Sättigung 0%", werden bei Tab-Wechsel die jeweiligen Settings automatisch wiederhergestellt. Seit v2.7 gilt das auch für die Einstellungen des Experten-Modus (Hintergrund-Ersetzer, Mix, Toleranz).

Batch-Auto-Design

Im Tab-Strip oben rechts: 🪄 Alle auto. Geht durch jedes Bild der Reihe nach, führt Auto-Analyse + Dithern aus. Status-Bar zeigt Fortschritt „2/5: photo.jpg…". Sehr praktisch um eine ganze Serie auf einen Schlag zu bearbeiten.

Bibliothek leeren

Leeren-Button im Tab-Strip mit Sicherheitsabfrage. Achtung: alle Settings, Masken und Ergebnisse aller Bilder gehen verloren (außer denen die in localStorage als globale Defaults gespeichert sind).

09 Optionen-Panel

Hauptsächlich Pre- und Post-Processing-Schalter. Default eingeklappt, wenn du mehrere Werte vom Standard ändest erscheint ein Counter-Badge.

Auto-Textschutz

Erkennt Text und harte Kanten per Sobel-Filter und schließt sie vom Dithering aus. Geschützte Pixel werden direkt auf die nächste Palettenfarbe gemappt — kein Dither-Rauschen, dafür scharfe Schrift.

Auto-Schwelle (Sobel) 20–200, default 80 — Empfindlichkeit:

• Niedrig (← mehr Schutz): viele Bereiche werden geschützt, auch weiche Übergänge
• Hoch (weniger →): nur sehr scharfe Kanten, wie tatsächlicher Text

Schutzbereich-Modus

Wie geschützte Pixel ausgegeben werden:

• Originalfarben: Pixel bleiben unverändert (eventuell außerhalb der Palette → wird auf Display nicht korrekt angezeigt)
• Nächste Palettenfarbe: gemappt aber ohne Dithering

Nachschärfen

3×3 Unsharp-Mask nach dem Dithering. Macht Kanten knackiger, kann aber Dither-Rauschen leicht verstärken.

Sättigung verstärken

Boost im HSL-Raum vor dem Dithering. Zieht blasse Farben näher an die Palette. Für Fotos meist gut, kann bei verrauschten Himmel-Bildern Streupixel produzieren (deshalb wird Neutralfarben-Schutz angewendet).

Gamma-korrekt (linear)

Fehlerdiffusion läuft im linearen Lichtraum statt im sRGB-Raum. Perzeptuell korrekter, besonders Mitteltöne werden besser. Klicke auf das ⓘ-Icon neben dem Toggle, um die Hintergründe im Detail zu sehen. Für Fotos empfohlen, kann bei Text und Grafik leicht weicher wirken.

Live-Vorschau

Re-dithert automatisch ~250 ms nach jeder Änderung. Bei „Alle vergleichen" deaktiviert (zu teuer). Sehr praktisch beim Drehen an Reglern.

Pixel-Rauschen filtern (Speckle-Filter)

Post-Process-Filter gegen Streufarben-Pixel im Dither-Output. Drei Stufen:

• 1 — 3×3-Filter, ersetzt Pixel mit ≤1 gleichem Nachbarn (sanft)
• 2 — 3×3-Filter, ≤2 gleiche, 2 Durchgänge (mittel) — guter Default für Fotos
• 3 — 5×5-Filter, sehr aggressiv (kann feine Details weichzeichnen)

Vorab-Weichzeichnen (Pre-Blur)

Box-Blur 0–6 vor dem Dithering. Entfernt JPEG-Mikrorauschen und feine Details, die die kleine Palette ohnehin nicht abbilden kann. Großer Hebel gegen Himmel/Wolken-Pixelrauschen, opfert aber Detail-Schärfe.

10 Farbkorrektur-Panel

Manueller Eingriff in die Pixel-Werte vor dem Dithering. Eingeklappt by default.

S/W schützen + Schutz-Schwelle

Schwarz-, Weiß- und Grau-Pixel werden von der Farbkorrektur ausgenommen. Verhindert ungewollten Farbstich auf neutralen Tönen.

• Schwelle 5–80, default 30
• Niedrig (streng): nur fast reines SW/Grau geschützt
• Hoch (tolerant): auch leicht farbige Pixel zählen als neutral

Helligkeit-Bias

Verschiebt die gesamte Helligkeit um −60 bis +60. Gut zum Retten unterbelichteter Fotos.

Rot/Grün/Blau-Verstärkung

Multiplikator je Kanal von 0.5× bis 2.0×. Gut für gezielte Markenfarben-Akzente (z. B. Rot pushen wenn du das auf einem rotfähigen E-Ink anzeigen willst). Bei Auto-Analyse mit erkanntem Farbstich werden diese automatisch leicht angepasst.

Zurücksetzen

Setzt alle Werte des Farbkorrektur-Panels auf die Defaults zurück.

11 Experten-Modus

Power-User-Features mit Mint-Akzent gekennzeichnet. Default eingeklappt damit sie die Standard-UI nicht überschwemmen.

Hintergrund ersetzen

Ersetzt alle Pixel ähnlich einer Quellfarbe (per Pipette aus dem Bild gepickt) durch eine oder zwei Zielfarben — bevor das Bild gedithert wird.

Anwendungsfall: Markenfarbe-Hintergründe wie das mintgrüne Douglas-Logo. Mintgrün gibt es in der 6/7-Farben-Palette nicht. Statt es chaotisch zu dithern, kannst du es vorher gezielt auf eine repräsentierbare Farbe oder eine Bayer-Mischung aus zwei Palettenfarben umsetzen.

Modus „Eine Farbe"

Stumpfer Ersatz: alle ähnlichen Pixel werden zur gleichen Zielfarbe.

1. Bild laden, Experten-Modus aufklappen, „Aktivieren"
2. Klick auf 🔍 Pipette → Cursor wird Fadenkreuz
3. Klick auf zu ersetzenden Bereich → Quellfarbe aufgenommen
4. Aus den Ziel-Swatches eine Palettenfarbe wählen (z. B. Weiß)
5. Toleranz justieren

Modus „Zwei Farben mischen" (Bayer-Halftone)

Statt eine Farbe stumpf zu ersetzen, wird ein regelmäßiges Pixel-Muster aus zwei Palettenfarben erzeugt, das aus Distanz wie der Originalton wirkt. Beispiel: Mintgrün ≈ 60 % Grün + 40 % Weiß als Bayer-Schachbrettmuster — ergibt einen ruhigen, palettentreuen mintigen Effekt.

1. Quellfarbe per Pipette aufnehmen (wie oben)
2. Modus auf „Zwei Farben" umschalten
3. 🪄 Auto-Mix klicken — Tool berechnet automatisch die zwei besten Palettenfarben und das optimale Mischverhältnis (per Lab-Space-Projektion auf alle möglichen Farbpaare)
4. Optional: Mischverhältnis-Slider manuell justieren oder andere Palettenfarben für Farbe 1 / Farbe 2 wählen
5. Muster wählen aus vier Optionen:
   • Bayer 4×4 — feines regelmäßiges Dithermuster
   • Bayer 8×8 — sanfter, mehr Tonwertabstufungen
   • Halftone — klassische „Zeitungs"-Punkte (clustered dots)
   • Zufall — stochastisches Rauschen ohne sichtbare Geometrie

Modus „Drei Farben"

Für Töne, die nicht zwischen zwei Palettenfarben „interpolierbar" sind, sondern in einem Dreieck dreier Farben liegen — z. B. Lavendel (Rot + Blau + Weiß), Olivgrün (Gelb + Grün + Schwarz), Beige (Gelb + Weiß + leicht Rot).

1. Quellfarbe per Pipette aufnehmen
2. Modus auf „Drei Farben" umschalten
3. 🪄 Auto-Mix klicken — Tool berechnet die drei besten Palettenfarben + die optimalen Anteile per barycentric Lab-Projection über alle möglichen Farb-Tripel
4. Drei Anteils-Slider lassen sich manuell justieren (werden intern auf Summe 100 % normalisiert; Labels zeigen die effektiven Anteile)

Quick-Vergleich Single ↔ Mix

Im Mix-Modus gibt es einen ↔-Button neben Auto-Mix oder die Tastatur-Taste M. Schaltet temporär zwischen aktuellem Mix-Modus und Single-Modus um, sodass du direkt sehen kannst, ob der Mix wirklich besser aussieht oder ob ein einfaches Replace genügt.

Toleranz visuell sehen

Sobald der Hintergrund-Ersetzer aktiv ist und eine Quellfarbe gepickt wurde, erscheint auf dem Original-View ein Mint-Glow-Overlay, das dir zeigt welche Pixel als „passend" gelten. Während du den Toleranz-Slider bewegst, aktualisiert sich der Overlay live — du siehst sofort wo gerade zu wenig oder zu viel gemappt wird.

Bei aktivierter Live-Vorschau siehst du das Dither-Ergebnis sofort. Wenn du im Mix-Modus die Pipette nutzt, läuft Auto-Mix automatisch nach der Farbaufnahme — sofortiger Vorschlag.

Esc bricht den Pipette-Modus ab. M schaltet zwischen Single und Mix um.

12 Werkzeuge & Maskierung

In der Toolbar findest du Werkzeuge, um manuelle Schutzbereiche zu definieren. Geschützte Pixel werden nicht vom Dither-Algorithmus verarbeitet. Seit v2.7 funktionieren alle Mal-/Drag-Interaktionen auch mit Touch-Eingabe (Finger, Stylus).

Maske-Werkzeuge

• 🖌️ Pinsel (Tastatur B) — Frei zeichnen, kontinuierlicher Stroke
• ▭ Rechteck (R) — Rechteckige Auswahl
• 🧹 Radierer (E) — Maske entfernen
• Maske löschen (C) — Komplette Maske leeren

Pinselgröße

Slider 2–60 px, in der Toolbar verfügbar.

Undo / Redo

Strg+Z / Strg+Y oder die ↶/↷-Buttons. Pro Bild eigene History (max 30 Schritte).

Zoom + Pan

• + / −-Buttons oder + / −-Tasten
• ⤢ Einpassen (F) — Zoom auf Bildschirmgröße
• Strg+Mausrad — Zoom an Cursor-Position
• 0 — Zoom auf 100 %
• Leertaste + Drag — Pan (oder mittlere Maustaste)

Mini-Map

Erscheint automatisch unten rechts wenn du eingezoomt bist. Mint-Rahmen markiert den sichtbaren Bereich. Klick oder Drag pannt direkt zur entsprechenden Stelle. Verschwindet automatisch wenn du wieder rauszoomst.

13 Ergebnisse vergleichen

Drei Wege, mehrere Algorithmus-Ergebnisse zu vergleichen:

Result-Tabs (default)

Unter dem Canvas erscheint für jedes Algo-Ergebnis ein Tab mit Mini-Vorschau (36×26 px), Algo-Name und ΔE-Score (perzeptueller Abstand zum Original, niedriger = besser). Klick wechselt die Hauptansicht.

◐ Split-View

Toolbar-Button ◐ oder S. Zeigt das aktuelle Result und das Original mit einer draggbaren vertikalen Trennlinie übereinander. Perfekt für direkten Vergleich „was hat das Dithering verändert".

▦ Grid-View

Toolbar-Button ▦ oder G. Zeigt alle Algorithmus-Ergebnisse als Karten-Grid mit größerer Vorschau. Klick auf eine Karte → Einzelansicht.

14 Tastatur-Shortcuts

Werkzeuge

Historie

Ansicht

Aktionen

15 Typische Workflows

📷 Foto auf E-Ink-Display (z. B. Wallpaper für E-Reader)

1. Bild laden, ggf. auf Display-Maße skalieren (Zielgröße aktivieren)
2. 🪄 Auto-Analyse drücken
3. Drei Algorithmen erscheinen: Floyd-Steinberg, Stucki, Atkinson
4. Wenn der Himmel Rauschen zeigt: Speckle-Filter auf 2 stellen, eventuell Pre-Blur 1
5. ↓ PNG speichern

🏷️ E-Ink-Preisschild mit Logo + Text

1. Bild laden (typisch 480×800 px)
2. 🪄 Auto-Analyse → erkennt „Produkt-Label"
3. Falls Markenfarbe-Schrift falsch gemappt wird (z. B. dunkler Wein-Rot wird zu reinem Rot): Distanzmethode auf CIE76 umstellen
4. Falls die Schrift unsauber wird: Auto-Textschutz manuell aktivieren — aber Vorsicht, kann Produktkonturen mit-protecten

🎨 Logo / Grafik mit ungewöhnlicher Hintergrundfarbe

Beispiel: Schwarzes Logo auf mintgrünem Hintergrund (Mintgrün ist nicht in 6/7C-Palette).

1. Bild laden
2. Experten-Modus aufklappen → „Hintergrund ersetzen" aktivieren
3. 🔍 Pipette → auf den mintgrünen Hintergrund klicken
4. Zielfarbe wählen: Weiß für sauberen Look, oder reines Grün für kräftige Markenwirkung
5. Toleranz justieren bis nur der Hintergrund ersetzt wird
6. 🪄 Auto-Analyse oder direkt Dithern starten

📦 Batch-Processing einer ganzen Serie

1. Mehrere Bilder per Drag & Drop in das Tool ziehen (oder Mehrfachauswahl im Datei-Dialog)
2. Im Tab-Strip oben rechts: 🪄 Alle auto klicken
3. Tool geht jedes Bild durch, führt Auto-Analyse + Dithern aus
4. Status-Bar zeigt Fortschritt
5. Nach Abschluss: zwischen Tabs durchklicken, jeweils ↓ PNG speichern

16 Probleme & Lösungen

Der Himmel hat scheußliche bunte Pünktchen

Das ist klassisches Floyd-Steinberg-Verhalten bei limitierten Paletten — die Algorithmen verteilen Fehler und produzieren in dunklen Bereichen Streufarben.

Lösungen:

• Algorithmus auf Atkinson umstellen (sauberere Flächen)
• Pre-Blur auf 1 oder 2
• Speckle-Filter auf 2
• Sättigungs-Boost aus, falls verrauschtes Foto

Schrift wird in falscher Farbe dargestellt

Z. B. dunkles Burgunder wird zu knalligem Rot.

Lösungen:

• Distanzmethode auf CIE76 oder CIEDE2000 umstellen
• Vorsichtig manuell Auto-Textschutz aktivieren (kann Produktkonturen mit-protecten!)

Produktbild wird flächig / blockartig

Wahrscheinlich ist Auto-Textschutz aktiv und der Sobel-Filter erkennt die Produktkontur als „Text".

Lösung: Auto-Textschutz ausschalten oder Sobel-Schwelle deutlich erhöhen (auf 150+).

Markenfarbe-Hintergrund wird gar nicht oder schlecht reproduziert

Die Palette enthält die Farbe nicht. Drei Optionen:

1. Akzeptieren dass die Farbe gedithert wird (mit Pre-Blur + Speckle gemildert)
2. Helligkeits-Bias hochziehen → Hintergrund wird zu Weiß
3. Experten-Modus → Hintergrund ersetzen mit Pipette und gezielter Palettenfarbe

Tool wirkt langsam bei großen Bildern

Live-Vorschau ausschalten und nur manuell mit „Dithern starten" rechnen. „Alle vergleichen" rendert 7 Algorithmen — bei einem 4K-Bild kann das Sekunden dauern.

Settings gehen verloren beim Bildwechsel

Sollte mit v2.7 nicht mehr passieren — sämtliche Bildkontexte inkl. Experten-Modus-Einstellungen werden beim Tab-Wechsel wiederhergestellt. Falls doch: Browser-Cache leeren und Seite neu laden, dann localStorage ist sauber.

Sprache wechselt nicht alles

Bereits gedithered Result-Tabs zeigen den Algo-Namen in der zur Render-Zeit aktiven Sprache. Neu-Dithern aktualisiert die Namen. Palette-Farbnamen, Auto-Report und Onboarding-Tour werden seit v2.7 beim Sprachwechsel sofort neu gerendert.

17 Grenzen des Tools

Ehrliche Einordnung was das Tool nicht kann:

Farben außerhalb der Palette

Wenn dein Display nur 6 Farben kann (Schwarz, Weiß, Rot, Grün, Blau, Gelb) und dein Bild Türkis enthält, gibt es keine Möglichkeit, Türkis exakt darzustellen. Das Tool kann nur:

• Türkis als Mix von Grün+Weiß-Pixeln dithern (sieht aus Distanz türkislich aus)
• Türkis komplett auf eine Palettenfarbe mappen (verliert den Farbton)
• Türkis durch Pre-Processing ersetzen (Experten-Modus)

Text-Erkennung

Auto-Textschutz nutzt Sobel-Edge-Detection und kann nicht zwischen Text und Produktkontur unterscheiden. Ist eine bewusste Vereinfachung — eine echte OCR-Texterkennung wäre für ein Browser-Tool zu schwergewichtig.

Keine Vector-Inputs

Das Tool verarbeitet nur Pixel-Bilder (PNG, JPG, WebP). SVG-Inputs müsstest du vorher als PNG rastern.

Keine Geräte-spezifischen Profile

Die Paletten sind generisch (reine R/G/B/Y-Werte). Echte E-Ink-Geräte haben oft leichte Verschiebungen (z. B. Spectra-„Rot" ist eher ein gedämpftes Orange-Rot). Wenn dein Output auf dem Gerät anders aussieht als auf dem Bildschirm, liegt das wahrscheinlich am Geräte-Farbprofil.

Performance bei sehr großen Bildern

Floyd-Steinberg ist O(n) aber mit konstantem Overhead. Bei 8K-Bildern kann ein Algorithmus 5–10 Sekunden brauchen, bei „Alle vergleichen" entsprechend × 7.

18 Finanzierung & Wasserzeichen

Dither Studio ist kostenlos und läuft komplett in deinem Browser — keine Bilder werden hochgeladen, kein Tracking, keine Registrierung. Damit wir den Server am Laufen halten können, finanziert sich das Tool über ein einfaches, transparentes Modell:

Pro Download eine freie Wahl

Wenn du auf ↓ PNG speichern klickst, erscheint ein kleiner Dialog mit zwei Optionen:

• 📺 Video ansehen · Saubere PNG — Ein kurzes Werbevideo (wenige Sekunden). Danach wird die PNG ohne Wasserzeichen heruntergeladen. Ein Video pro Download.
• ↓ Mit Wasserzeichen speichern — Sofortiger Download, mit einem dezenten „einktool.com"-Label unten rechts im Bild.

Beide Optionen sind für dich kostenlos. Das Wasserzeichen ist klein, dezent und stört die meisten Anwendungsfälle nicht. Wenn du viele Dateien produzierst (z. B. für Druckware oder kommerzielle Nutzung), ist das kurze Ad pro Datei der faire Tausch.

Wie das Wasserzeichen funktioniert

Technisch: Jedes berechnete Dither-Ergebnis hält zwei Bild-Versionen bereit — eine saubere Pixel-Buffer-Kopie im Arbeitsspeicher, und den im Canvas angezeigten Frame mit Wasserzeichen. Der Download-Button entscheidet je nach Ad-Ergebnis, welcher in die PNG exportiert wird.

Das bedeutet auch: wenn du einen Canvas-Screenshot per Rechtsklick → „Bild speichern" machst, kommt die Wasserzeichen-Version. Nur der reguläre Download-Button öffnet den Ad-Dialog.

Für Wrapper- und Embed-Entwickler

Wenn du das Tool in eine eigene Seite einbettest, kannst du den Ad-Anbieter austauschen oder den Gate komplett umgehen:

• window.DitherStudio.adProvider = (onDone) => { …play rewarded ad… onDone(); } — Plug deinen eigenen Rewarded-Video-SDK ein. Rufe onDone() sobald die Belohnung verdient ist.
• window.DitherStudio.downloadGate = (action, meta) => action() — Legacy-Hook, der den gesamten Flow übernimmt (kein UI-Modal des Tools).
• Ohne beide Hooks zeigt das Tool ein 3-Sekunden-Countdown-Placeholder, damit du lokal testen kannst.

Events: das Tool feuert dither:download mit detail.clean (true/false) nach jedem Download — praktisch für Analytics.

19 Glossar

Dithering

Technik, kontinuierliche Farben durch ein Muster diskreter Farben anzunähern. Statt eine Mischfarbe exakt zu reproduzieren, werden zwei oder mehr verfügbare Farben so verteilt, dass das Auge die Mischfarbe wahrnimmt.

Error-Diffusion

Klasse von Dither-Algorithmen, die den Quantisierungsfehler eines Pixels auf benachbarte Pixel verteilen. Floyd-Steinberg, Atkinson, Stucki etc.

Ordered Dithering / Bayer

Klasse von Dither-Algorithmen, die eine feste Pixel-Maske (Bayer-Matrix) als Schwellwert verwenden. Erzeugt regelmäßiges, oft sichtbares Muster.

Quantisierung

Reduktion einer kontinuierlichen Farbe auf die nächstliegende verfügbare Palettenfarbe. Ohne Dithering ergibt das harte Stufen / Posterisierung.

Quantisierungsfehler

Die Differenz zwischen dem tatsächlichen Pixel-Wert und dem nach Quantisierung gewählten Palettenwert. Error-Diffusion verteilt diesen Fehler auf Nachbar-Pixel.

Sobel-Filter

Bildverarbeitungs-Operator zur Kantenerkennung. Berechnet den Helligkeits-Gradienten an jeder Position. Genutzt in Auto-Textschutz und in der Auto-Analyse zur Bildtyp-Klassifikation.

Lab-Farbraum (CIELAB)

Wahrnehmungs-uniformer Farbraum (im Gegensatz zu RGB). Farbabstände in Lab entsprechen besser dem, was das menschliche Auge als „ähnlich" empfindet.

ΔE (Delta E)

Maß für den wahrnehmbaren Farbabstand zwischen zwei Farben in Lab. ΔE76 = einfache euklidische Distanz, CIEDE2000 = verfeinert mit Hue/Chroma-Korrekturen. ΔE < 1 = vom Auge nicht unterscheidbar, ΔE > 5 = deutlich anders.

Gamma-Korrektur

sRGB-Werte sind nichtlinear codiert (Helligkeits-Wahrnehmung des Auges). Lineares RGB ist physikalisch korrektes Licht. Fehlerdiffusion in linearem Raum vermeidet dass Mitteltöne zu dunkel werden.

Speckle / Streupixel

Vereinzelte „falsche" Pixel im Dither-Output, oft als störend empfunden. Speckle-Filter ist ein Post-Process der diese mit dem Dominantton der Umgebung ersetzt.

Web Worker

Browser-Feature für Hintergrund-Berechnung in einem separaten Thread. Macht das UI responsiv, weil schwere Pixel-Operationen nicht den Main-Thread blockieren.

K-Means-Clustering

Verfahren zur Aufteilung von Datenpunkten in n Cluster. In Dither Studio: extrahiert die n dominantesten Farben aus einem Bild, indem Pixel-Werte als 3D-Punkte (RGB) geclustert werden.

Pointer-Events

Unified Event-Modell im Browser, das Maus, Stylus und Touch gleich behandelt. Dither Studio v2.7 nutzt diese durchgängig, damit auch Tablet- und Smartphone-Nutzung funktioniert.