Skip to main content

Image Blur & Pixelate

Apply blur or pixelation effects to images with adjustable intensity.

Geprüft von · Zuletzt geprüft

🔲

Drop an image here or click to upload

Apply blur or pixelation effects

So verwendet man das Weichzeichner- und Verpixelungswerkzeug

  1. Foto oder Screenshot hochladen durch Ziehen in die Dropzone. Die Datei wird lokal gelesen und zur Verarbeitung auf ein Canvas gezeichnet.
  2. Effektmodus wählen: "Weichzeichner" für einen weichen Gauss-Verlauf, oder "Verpixeln" für den klassischen Mosaik-Block-Zensur-Look.
  3. Intensitätsschieberegler ziehen. Beim Weichzeichner bildet der Regler einen Radius in Pixeln von 1 bis 30 ab. Beim Verpixeln bildet er die Mosaik-Blockgröße von 1 bis 50 Pixeln pro Zelle ab.
  4. Vorschau live beobachten. Stärkere Einstellungen brauchen etwas mehr Millisekunden, bleiben aber dank der optimierten CSS-Filter-Pipeline des Browsers interaktiv.
  5. "Download" klicken, um das verarbeitete Bild als PNG zu exportieren. Der Effekt wird dauerhaft in die Pixeldaten gebacken.

Zwei Effekte, zwei Algorithmen

Weichzeichner und Verpixelung sehen auf den ersten Blick ähnlich aus, verwenden aber sehr unterschiedliche Mathematik. Ein Gauss-Weichzeichner berechnet jeden Ausgabepixel als gewichteten Durchschnitt benachbarter Quellpixel, wobei die Gewichte der Glockenkurve einer Gauss-Funktion folgen. Je größer der Radius, desto mehr Nachbarn werden gemischt, und desto weicher werden die Übergänge zwischen Farben. Wir implementieren das durch Anwenden von ctx.filter = "blur(Npx)" auf den Canvas-2D-Kontext, was an die GPU-beschleunigte Filterpipeline des Browsers delegiert - typischerweise dasselbe SVG-Filter-Primitiv (feGaussianBlur), das in der W3C-Filter-Effects-Spezifikation definiert ist.

Verpixelung ist konzeptionell ein zweistufiges Verkleinern-dann-Vergrößern. Das Bild wird in verkleinerter Größe auf ein Scratch-Canvas gezeichnet, dann wird das kleine Ergebnis in voller Größe mit imageSmoothingEnabled = false zurückgezeichnet. Die Nächste-Nachbar-Interpolation im Vergrößerungsschritt ist es, die das blockige Mosaik erzeugt. Eine Blockgröße von 20 bedeutet, dass das Bild effektiv auf ein Zwanzigstel seiner Breite gerendert wird und dann hochgeblasen wird, sodass jede ursprüngliche 20x20-Region zu einer einzigen Einheitsfarbe (dem Durchschnitt seines Innenraums) kollabiert.

Wann Weichzeichner oder Verpixelung die richtige Wahl ist

  • Zensieren einer Kreditkartennummer, Telefonnummer oder E-Mail-Adresse in einem Screenshot vor dem Posten in einem Bug-Tracker.
  • Anonymisieren von Gesichtern oder Nummernschildern in Fotos, die öffentlich in einem Blogbeitrag geteilt werden.
  • Hintergrund hinter einem Produktfoto weichzeichnen, um einen künstlichen Tiefenschärfe-Effekt zu erzeugen, wenn die Kamera das nicht in der Optik tun konnte.
  • Gauss-weichgezeichnetes Hero-Image-Hintergrundbild für eine Website erstellen, wo Textüberlagerungen Kontrast benötigen.
  • Pixel-Art-Ästhetik-Overlay für retro-themige Designs, 8-Bit-Hommagen oder Spiel-Mockups erzeugen.
  • Datenschutzkonformen Platzhalter-Thumbnail generieren, der den Inhalt andeutet, ohne Details zu enthüllen, für eine CMS-Galerie.

Zensur-Fallstricke, die man kennen muss

  • Leichte Verpixelung kann umgekehrt werden. Wenn die Blockgröße klein im Verhältnis zum versteckten Text ist, können Techniken wie "Entpixelung" Demosaiking-Angriffe (und in extremen Fällen ML-basiertes Entweichzeichnen) den versteckten Inhalt wiederherstellen. Blockgröße mindestens so groß wie die Höhe des zensierten Textes verwenden, idealerweise größer.
  • Gaussischer Weichzeichner ist reversibler als er aussieht. Für eine bekannte Textschrift kann ein milder Weichzeichner teilweise rückgängig gemacht werden. Für echte Zensur sollte ein solides schwarzes Rechteck - Pixel-Löschung - verwendet werden, kein Weichzeichner.
  • Der Effekt ist permanent. Einmal exportiert, sind die Pixeloriginalwerte verloren. Immer die unzensierte Masterdatei sicher aufbewahren, falls der volle Inhalt später benötigt wird.
  • Randbehandlung an der Bildgrenze. Gaussischer Weichzeichner nahe den Bildrändern fällt ab, weil der Kernel "außerhalb" Pixel liest. Browser verlängern die Randfarbe typischerweise nach außen, aber subtile Halos können an der Grenze erscheinen.
  • Das gesamte Bild wird verarbeitet. Dieses Werkzeug wendet den Effekt global an. Für selektiven Weichzeichner (nur ein Gesicht) wird ein maskenfähiger Editor benötigt - das ist bewusst so gestaltet, um die Oberfläche einfach zu halten.

Die Mathematik hinter Gaussischem Weichzeichner

Ein Gauss-Filter faltet das Bild mit einem zweidimensionalen Gauss-Kernel G(x,y) = (1/(2pi*sigma^2)) * exp(-(x^2+y^2)/(2*sigma^2)). Der Parameter sigma steuert, wie weit der Weichzeichner reicht: ein Sigma von 2 erzeugt eine visuell merkliche Weichheit, Sigma 10 starkes Bokeh, Sigma 30 vernichtet Details. Die CSS- und SVG-Filter-Effects-Spezifikation bildet den blur(Npx)-Parameter auf eine Standardabweichung von etwa N ab, obwohl Browser den Kernel für Leistungszwecke kappen dürfen. Da Gauss separierbar ist (der 2D-Kernel entspricht einem 1D-horizontalen Weichzeichner gefolgt von einem 1D-vertikalen), laufen GPU-Implementierungen in zwei linearen Durchgängen, weshalb "blur(30px)" auf einem 4000-Pixel-Bild in deutlich unter hundert Millisekunden abschließt. Der theoretische Kompromiss gegenüber einem Box-Blur ist Glattheit: Box-Blur mittelt gleiche Gewichte über ein quadratisches Fenster und zeigt subtile Bandierungen, während Gauss weich abfällt und natürlich wirkt.

Alternativen wenn mehr Leistung benötigt wird

Für selektiven Weichzeichner - nur ein Gesicht maskieren, während der Rest des Bildes scharf bleibt - wird ein vollständiger Editor benötigt: Photoshops Weichzeichner-Werkzeug mit Ebenenmaske, Affinity's Inpainting-Pinsel oder Photopeas kostenlose Browser-Version desselben Workflows. ImageMagicks magick input.jpg -blur 0x20 output.jpg gibt pixelgenaue Kontrolle über Sigma (0x20 bedeutet automatischer Radius, Sigma 20) für Batch-Pipelines. Für echte datenschutzgerechte Schwärzung nutzen dedizierte Werkzeuge wie ObscuraCam (mobil) und PDF-Schwärzungswerkzeuge Vollfarb-Ersatz statt Weichzeichner, weil Weichzeichner erkennbar umkehrbar ist. Squoosh.app bietet keinen Weichzeichner, kann aber AVIF-Kodierung über eine bereits weichgezeichnete Datei für extreme Kompression stapeln. Dieses Werkzeug für schnelle, globale Zensur-oder-Stylize-Jobs verwenden; für maskenfähige Editoren greifen, wenn nur ein Teil eines Bildes beeinflusst werden soll.

Häufig gestellte Fragen

Kann ein entschlossener Angreifer die Verpixelung auf meinem zensierten Screenshot rückgängig machen?

Ja, wenn die Blockgröße zu klein im Verhältnis zum versteckten Inhalt ist. Forscher haben erfolgreiche Entpixelung kurzer Passwörter und Kreditkartennummern demonstriert, wenn die Pixelblöcke feiner als die Zeichenhöhe sind. Für Textzensur sollte die Blockgröße mindestens das 1,5-fache der Texthöhe betragen - oder noch besser: schwarze Rechteck-Redaktion verwenden, die keinerlei wiederherstellbare Information enthält.

Ist Gaussischer Weichzeichner wirklich umkehrbar?

Teilweise. Entscharf-Algorithmen (Wiener-Dekonvolution, blinde Dekonvolution) können einige Originalinhalte aus einem leicht weichgezeichneten Bild wiederherstellen - besonders wenn der Inhalt einer bekannten Struktur folgt (Text in Standardschrift, Nummernschildziffern). Ein starker Weichzeichner mit Sigma über 15 ist für natürliche Fotos praktisch nicht umkehrbar, aber für datenschutzrelevante Inhalte ist Vollfarb-Maskierung sicherer.

Was ist der visuelle Unterschied zwischen Weichzeichner und Verpixelung?

Weichzeichner erzeugt einen weichen, kontinuierlichen Verlauf - das Bild sieht aus, als wäre es unscharf gestellt. Verpixelung erzeugt ein scharfkantiges Mosaik aus Einfarbblockchen, der "Minecraft-Look". Weichzeichner wirkt eher filmisch und lässt sich schwerer lokalisieren; Verpixelung signalisiert dem Betrachter deutlich "hier wurde etwas zensiert". Wahl treffen je nachdem, ob die Zensur unsichtbar oder offensichtlich sein soll.

Verarbeitet das Werkzeug mein Bild lokal oder auf einem Server?

Die gesamte Verarbeitung läuft lokal im Canvas-Kontext des Browsers. Weichzeichner nutzt die GPU-beschleunigte CSS-Filter-Pipeline des Browsers, und Verpixelung verwendet einen Verkleinern-Vergrößern-Trick mit <code>imageSmoothingEnabled = false</code>. Keine Netzwerkanfrage trägt Pixeldaten übertragen. Das lässt sich bestätigen, indem man das Network-Panel in den DevTools beobachtet - es bleibt während eines Verarbeitungszyklus leer.

Kann ich nur einen Teil meines Bildes weichzeichnen (z.B. nur ein Gesicht)?

Mit diesem Werkzeug nicht - der Effekt wird global angewendet. Für selektiven Weichzeichner wird ein maskenfähiger Editor benötigt: Photopea (kostenlos, browserbasiert), Photoshop, GIMP oder Affinity Photo. Der typische Ablauf: Ebene duplizieren, Weichzeichner auf die Kopie anwenden, schwarze Maske hinzufügen, dann weiß genau dort auf die Maske malen, wo der Weichzeichner sichtbar sein soll.

Warum sieht der Weichzeichner an den Bildrandern anders aus?

Gauss-Faltung benötigt Pixel außerhalb des Bildes nahe der Grenze, und Browser handhaben das typischerweise, indem sie die Randfarbe nach außen verlängern. Das erzeugt einen subtilen Halo-Effekt entlang der Ränder bei hoher Weichzeichner-Intensität. Einige Pixel vom Rand nach dem Weichzeichnen abschneiden, wenn der Halo störend wirkt.

Was ist der größte Weichzeichner-Radius, den ich anwenden kann?

Der Schieberegler ist auf 30 Pixel begrenzt, was sehr starke Unschärfe erzeugt, bei der erkennbare Details meist verloren gehen. Darüber hinaus sieht der Weichzeichner wie ein flacher Farbwash aus, weil der Kernel den Großteil des Bildes mit sich selbst mittelt. Für noch stärkere Effekte: maximale Unscharfe anwenden, exportieren und erneut importieren, um sie ein zweites Mal anzuwenden.

Reduziert Verpixelung meine Dateigröße?

Oft ja. Ein verpixeltes Bild hat große einfarbige Bereiche, die DEFLATE (die Kompression hinter PNG) extrem effizient verarbeitet. Ein verpixeltes 1920x1080-PNG könnte bei 100 KB liegen, während das Original 2 MB hatte. Gaussischer Weichzeichner schrumpft nicht so dramatisch, weil die weichen Verläufe noch eine kontinuierliche Farbpalette haben.

Wie schneidet das im Vergleich zu ImageMagick-Weichzeichner auf der Kommandozeile ab?

ImageMagicks <code>magick input.jpg -blur 0x20 output.jpg</code> gibt direkte Kontrolle über den Sigma-Parameter und unterstützt mehr Kernel- Varianten (Bewegungsunscharf, radialer Weichzeichner, selektiver Weichzeichner). Der CSS-Filter des Browsers macht nur einen einzigen "Radius in Pixeln"-Wert zugänglich. Für Batch-Jobs oder präzise Kernel- Einstellungen: CLI verwenden; für eine schnelle Datenschutzmaske oder stilistischen Effekt ist der Browser einen Klick schneller.

Kann ich den Weichzeichner oder die Verpixelung rückgängig machen, wenn ich den Sinn nach dem Download ändert?

Nein - der Effekt ist in der exportierten Datei permanent. Die ursprünglichen Pixelwerte sind verloren. Immer eine Kopie des Originalbilds aufbewahren, bevor destruktive Effekte wie Weichzeichner oder Verpixelung angewendet werden, damit später mit anderen Parametern neu zensiert werden kann.

Ist der Pixel-Weichzeichner-Effekt dasselbe wie ein Mosaik oder ein Zensurblock?

Verpixelung erzeugt den Mosaik-Block-"Zensur"-Look, den man in Nachrichtensegmenten sieht, wo Gesichter oder sensibler Text mit einem Raster aus einfarbigen Quadraten verdeckt werden. Pixel-Weichzeichner meint im alltäglichen Sprachgebrauch oft denselben Effekt. Genau genommen ist "Weichzeichner" die weiche Gauss-Variante und "Verpixeln" die blockige - dieses Werkzeug bietet beide über den Effektmodus-Schalter. Verpixeln für einen klar zensierten Look wählen, Weichzeichner für unauffälliges Weichen.

Mehr Image Tools

Base64 to Image Converter

Decode a Base64 string or data URL back into a viewable image and download it as PNG, JPG, WebP or GIF. Runs in your browser.

Open tool

Favicon Generator

Generate favicons in all standard sizes (16x16 to 512x512) for websites and PWAs.

Open tool

Image Color Picker

Upload an image and pick colors in HEX, RGB, and HSL with a visual color history.

Open tool

Image Compressor

Compress images by adjusting quality to reduce file size without losing visual clarity.

Open tool

Image Cropper

Crop images with preset aspect ratios like 1:1, 16:9, and 4:3 using a visual editor.

Open tool

Image Flip & Rotate

Flip images horizontally or vertically and rotate by 90, 180, or 270 degrees.

Open tool