Bildfilter und Effekte

Wenden Sie Filter an, passen Sie Helligkeit, Kontrast, Sättigung und mehr an.

Ihre Dateien verlassen niemals Ihr Gerät

Bild per Drag-and-Drop hier ablegen

oder klicken zum Durchsuchen · JPEG, PNG, WebP, GIF, BMP, AVIF und mehr

Was ein «Bildfilter» tatsächlich mit Ihren Pixeln macht

Ein Bildfilter ist eine mathematische Operation, die auf jedes Pixel angewendet wird. Jeder Filter in diesem Werkzeug entspricht einer bestimmten Transformation. Helligkeit 150 % multipliziert jeden Farbkanal mit 1,5 (begrenzt am Maximum), wodurch das gesamte Bild heller wird. Kontrast 150 % streckt die Werte um den Mittelpunkt herum und zieht dunkle Pixel dunkler und helle Pixel heller. Sättigung verschiebt Farben in Richtung Grau oder davon weg, während die Gesamthelligkeit erhalten bleibt. Farbtonrotation dreht jede Farbe um einen gewählten Winkel auf dem Farbrad. Sepia wendet eine feste 3x3-Matrix an, die RGB auf eine warm-bräunliche Palette abbildet (R' = 0,393R + 0,769G + 0,189B, und ähnliche Formeln für G' und B'). Graustufen reduziert jeden Pixel auf seinen luminanzgewichteten Mittelwert mit den Koeffizienten ITU-R BT.601 (0,299, 0,587, 0,114), denselben Gewichten, die das menschliche Sehen zur Helligkeitswahrnehmung nutzt. Weichzeichnen ist eine Gauß-Faltung: Jeder Ausgabepixel wird zu einem gewichteten Durchschnitt der umliegenden Pixel. Invertieren kehrt jeden Kanal um: c' = 1 minus c.

Jede Voreinstellung in diesem Werkzeug ist eine benannte Kombination dieser Operationen. «Vivid» stapelt erhöhten Kontrast und Sättigung; «S/W» setzt Graustufen auf 100 %; «Sepia» setzt Sepia auf 100 % und reduziert die Sättigung; «Warm» fügt einen Sepia-Ton und sanfte Sättigung hinzu; «Kalt» dreht den Farbton ins Blau; «Vintage» reduziert Kontrast und Sättigung und wärmt leicht an; «Dramatisch» treibt Kontrast und Sättigung stark hoch; «Fade» mildert den Kontrast und hellt leicht auf. Hinter den Kulissen schreibt jede Voreinstellung einfach eine andere CSS-Filterzeichenfolge. Sie können von jeder Voreinstellung ausgehen und die einzelnen Schieberegler nachjustieren, um den exakten Look zu finden, den Sie wollen.

Alle Filter hier wenden sich über die standardisierten CSS-Filterfunktionen des Browsers an (W3C Filter Effects Module Level 1), implementiert über die GPU in jedem modernen Browser seit 2016-2019. Die Vorschau aktualisiert sich in Echtzeit, während Sie die Schieberegler bewegen, weil die Operationen auf der Grafikkarte und nicht auf der CPU berechnet werden. Der Download-Schritt brennt das Filterergebnis in eine frische PNG-, JPEG- oder WebP-Datei in den ursprünglichen Bildabmessungen ein, sodass die exportierte Datei bereits das Erscheinungsbild trägt; ein separater Rendering-Schritt ist nicht nötig.

Wie dieses Werkzeug unter der Haube funktioniert

Die Filter-Engine ist die Canvas-API des Browsers in Kombination mit den CSS-Filterfunktionen. Wenn Sie ein Bild ablegen, wandelt der eingebaute Decoder des Browsers die Datei (JPEG, PNG, WebP, GIF, BMP, AVIF oder SVG) in rohe Pixel auf einem HTMLImageElement im Speicher um. Die Pixel werden auf ein <canvas>-Element gezeichnet. Um einen Filter anzuwenden, setzt das Werkzeug ctx.filter = «brightness(150%) contrast(110%) saturate(120%) sepia(20%) ...» und zeichnet das Quellbild neu; der Browser wendet die Filterkette auf der GPU an und das Canvas zeigt das Ergebnis.

Voreinstellungen sind vordefinierte Filterzeichenfolgen, die im Skript gespeichert sind. «S/W» ist grayscale(100%) contrast(105%). «Vintage» könnte sepia(35%) saturate(75%) contrast(95%) brightness(102%) sein. Die Auswahl einer Voreinstellung schreibt eine dieser Zeichenfolgen in den Canvas-Filter; die einzelnen Schieberegler werden dann passend aktualisiert, sodass Sie von dort aus feinabstimmen können. «Zum Vergleichen halten» setzt vorübergehend ctx.filter = «none» und zeichnet das Originalbild neu, dann wird der gewählte Filter beim Loslassen wiederhergestellt.

Der Download-Schritt zeichnet das Quellbild in seinen ursprünglichen Abmessungen (nicht in der Bildschirm-Vorschaugröße) auf einem frischen Canvas mit dem aktuellen Filter neu, dann exportiert canvas.toBlob() das Ergebnis als neue PNG-, JPEG- oder WebP-Datei. Die Ausgabe hat die Filter-Effekte in die Pixeldaten eingebrannt, sodass der Empfänger den gleichen Look sieht, ohne den Werkzeugzustand zu benötigen. Nichts verlässt den Tab während all dieses Vorgangs; für das Filtern selbst wird keine Bibliothek geladen.

Eine kurze Geschichte der Fotofilter

Wie Bildfilter funktionieren

Bildfilter verändern die Pixelwerte eines Fotos, um sein Aussehen zu ändern. Helligkeit passt die Gesamthelligkeit an, Kontrast steuert den Unterschied zwischen hellen und dunklen Bereichen, und Sättigung bestimmt die Farbintensität. Die Farbton-Drehung verschiebt alle Farben auf dem Farbkreis, während Sepia und Graustufen Bilder in klassische Tonstile umwandeln. Unschärfe wendet einen Gaußschen Glätteeffekt an, und Invertieren kehrt alle Farben um.

Dieses Tool nutzt die native Canvas-CSS-Filter-Engine Ihres Browsers, die für Echtzeit-Performance GPU-beschleunigt ist. Die gesamte Verarbeitung erfolgt lokal · Ihre Bilder werden nie an einen Server hochgeladen.

Häufige Anwendungsfälle

Echte Filter-Workflows

Häufige Fallstricke und was sie bedeuten

Datenschutz: Bilder verlassen Ihr Gerät nie

Jeder cloud-basierte Fotofilter-Dienst (Pixlr, Fotor, BeFunky, Online-«Instagram-Filter»-Seiten) lädt Ihr Foto auf den Server des Anbieters hoch, wendet den Filter auf deren Hardware an und gibt das gefilterte Bild als Download zurück. Fotos enthalten regelmäßig sensible Metadaten selbst nach dem Filtern: GPS-Koordinaten des Aufnahmeortes, Kamera- und Geräteinformationen, Aufnahmedatum und -uhrzeit und den Fotoinhalt selbst, der oft Gesichter, Orte, Bildschirmfotos interner Oberflächen oder anderes identifizierbares Material enthält. Die meisten Anbieter veröffentlichen Datenschutzrichtlinien mit der Zusage, Uploads innerhalb von ein bis zwei Stunden zu löschen und während der Übertragung zu verschlüsseln, und die größeren tragen die Zertifizierung ISO/IEC 27001. Sie haben starke wirtschaftliche Gründe, diese Richtlinien einzuhalten. Doch «innerhalb einer Stunde gelöscht» ist nicht «nie gesehen». In dieser Stunde sitzt der Bildinhalt in der Anbieter-Infrastruktur, zugänglich für jeden Prozess oder jede Person mit den richtigen Berechtigungen, und sichtbar in Protokollen und Backups gemäß der Aufbewahrungsrichtlinie des Anbieters.

Dieses Filter-Werkzeug lädt nichts hoch. Die gesamte Pipeline (Dateiauswahl, Decodierung über die im Browser eingebauten Decoder, Canvas-Filter über die GPU, optionaler Download über die Encoder des Browsers) läuft in Ihrem Browser-Tab mit JavaScript und der standardisierten CSS-Filter-Effects-API. Kein Upload, keine Netzwerkanfrage mit Bilddaten, kein Logeintrag. Sie können das überprüfen, indem Sie vor dem Filtern die Browser-DevTools im Netzwerk-Tab öffnen: Keine Anfrage feuert mit Bildinhalt. Der einzige Netzwerkverkehr ist das anfängliche Laden der Seite selbst; für die Filteroperation wird keine Bibliothek heruntergeladen. Schalten Sie den Browser nach dem Laden der Seite in den Flugmodus, und das Filter-Werkzeug arbeitet weiter mit lokalen Bildern.

Wann ein anderes Werkzeug die richtige Wahl ist

Häufige Fragen

Verringern Filter die Bildqualität?

Die Filter werden auf Ihre Bilder in voller Auflösung angewendet, sodass kein Qualitätsverlust auftritt. Beim Herunterladen wird das Bild mit den eingebackenen Filtern in den Originaldimensionen exportiert. JPEG-Exporte verwenden 92 % Qualität, um eine ausgezeichnete Wiedergabetreue zu gewährleisten.

Kann ich mehrere Filter kombinieren?

Ja. Alle acht Anpassungs-Regler arbeiten gleichzeitig zusammen. Sie können auch mit einer Voreinstellung beginnen und dann einzelne Regler anpassen, um exakt das gewünschte Aussehen zu erzielen.

Was bewirkt „Halten zum Vergleichen"?

Solange Sie den Button „Halten zum Vergleichen" gedrückt halten, zeigt die Vorschau vorübergehend Ihr originales, ungefiltertes Bild. Lassen Sie den Button los, um die gefilterte Version wieder zu sehen. Damit können Sie schnell vorher/nachher vergleichen.

Werden meine Bilder irgendwohin hochgeladen?

Nein. Die gesamte Filterverarbeitung nutzt die im Browser eingebaute Canvas-API. Ihre Bilder bleiben vollständig auf Ihrem Gerät und werden nie an einen Server gesendet.

Weitere häufig gestellte Fragen

Warum sieht mein Bild bei extremen Einstellungen posterisiert aus?

Weil die Mathematik keinen Spielraum mehr hat. Jeder Farbkanal hat nur 256 mögliche Werte (0 bis 255 in 8-Bit-RGB). Helligkeit oder Kontrast weit über den ursprünglichen Bereich hinauszuschieben, schneidet bei 0 oder 255 ab statt anmutige Verläufe zu bewahren. Das Ergebnis sind Banding (sichtbare Stufen in eigentlich glatten Übergängen) und Posterisation (Bereiche, die zu einer einzigen Farbe kollabieren). Lösung: ziehen Sie den extremsten Schieberegler zurück oder beginnen Sie mit einer Quelle höherer Bittiefe, falls verfügbar (RAW oder 16-Bit-TIFF, bearbeitet in einem Desktop-Werkzeug, das die Bittiefe erhält).

Kann ich eine eigene Voreinstellung speichern?

Nicht direkt in der Benutzeroberfläche dieses Werkzeugs. Aber die Schieberegler-Werte selbst sind Ihre «Voreinstellung»: Notieren Sie die acht Zahlen (Helligkeit, Kontrast, Sättigung, Sepia, Graustufen, Farbtonrotation, Weichzeichnen, Invertieren) und Sie können den Look in Sekunden auf jedes zukünftige Foto neu erstellen. Für Multi-Foto-Workflows, in denen Sie denselben Look auf einen Stapel wollen, skaliert dieser manuelle Ansatz bis etwa 5-10 Fotos; darüber hinaus sind Photoshop, Lightroom, Capture One oder VSCO mit gespeicherten Voreinstellungs-Paketen das richtige Werkzeug.

Spielt die Reihenfolge der Filter eine Rolle?

Für die meisten Filter nein: Helligkeit dann Kontrast erzeugt dieselbe Ausgabe wie Kontrast dann Helligkeit. Die CSS-Filterfunktionen für Helligkeit, Kontrast, saturate, Sepia, Graustufen, hue-rotate und invert kommutieren alle miteinander. Weichzeichnen ist die Ausnahme: Weichzeichnen vor Farbänderungen wirkt auf die Originalkanten; Weichzeichnen danach wirkt auf farbverschobene Kanten, und die beiden Ausgaben unterscheiden sich sichtbar. In der Praxis wendet dieses Werkzeug alle Filter in einer festen Reihenfolge an, daher ist die Frage nur relevant, wenn Sie den genauen Effekt eines anderen Werkzeugs replizieren wollen, das eine andere Reihenfolge nutzt.

Funktioniert dieses Werkzeug offline?

Ja. Die CSS-Filter-Engine, die Canvas-API und die Decoder/Encoder für JPEG, PNG, WebP, GIF, BMP und AVIF sind alle in jeden modernen Browser eingebaut. Für das Filtern wird keine externe Bibliothek heruntergeladen. Nachdem die Seite einmal geladen wurde, funktionieren spätere Besuche vollständig offline, solange die Seite im Browser-Cache bleibt. Überprüfen Sie das, indem Sie nach dem ersten Besuch den Flugmodus aktivieren und Filter auf ein lokales Bild anwenden.

Werden EXIF-Metadaten im heruntergeladenen Bild erhalten?

Nein. Canvas-basierte Neukodierung verwirft EXIF (Kamera, Objektiv, Belichtung, GPS, Aufnahmedatum), XMP-, IPTC-Metadatenblöcke und das eingebettete ICC-Farbprofil. Das heruntergeladene Bild trägt nur Pixeldaten. Für Social-Media-Sharing ist das meist erwünscht (GPS-Koordinaten und Geräte-Seriennummern leaken nicht). Für Archivierungs- oder fotografische Workflows, in denen Metadaten zählen, verwenden Sie einen Desktop-Editor wie Photoshop oder Lightroom, der Metadaten beim Export erhält.

Gibt es ein Desktop- oder Kommandozeilenäquivalent?

Mehrere. Für Stapelautomatisierung wenden ImageMagicks Operatoren -brightness-contrast, -modulate und verwandte dieselben Transformationen aus jeder Shell an. Sharp in Node.js hat eine komplette Anpassungs-API. Pillow in Python bietet ImageEnhance.Brightness, ImageEnhance.Contrast, ImageEnhance.Color und ähnliche Klassen. Für interaktive Desktop-Arbeit bieten Photoshop, Lightroom (der professionelle Standard), Affinity Photo, GIMP und Pixelmator Pro alle dieselben Operationen plus Ebenenmaskierung für selektive Bearbeitungen.

Verwandte Tools