Bilder im Browser bearbeiten: so funktioniert die Technik von SchweizerIMG

Bildbearbeitung im Browser funktioniert so: Statt Ihr Bild an einen Server zu schicken, kommt das Programm zu Ihnen. Wenn Sie ein Werkzeug von SchweizerIMG öffnen, lädt Ihr Browser eine Bild-Engine – Codecs und Verarbeitungscode, kompiliert zu WebAssembly – und führt sie in Hintergrund-Threads auf Ihrem eigenen Prozessor aus. Das Foto wird von Ihrer Festplatte gelesen, im Speicher des Tabs bearbeitet und wieder auf Ihrer Festplatte gespeichert.

Dieser Beitrag erklärt, was bei jedem Schritt geschieht: woraus die Engine besteht, warum der Speicher Ihres Geräts die Grenzen setzt, warum HEIC-Fotos und Videos vom Browser abhängen und welche zwei kleinen Nachrichten pro Durchgang unseren Server erreichen. Ob lokale Verarbeitung im Vergleich zu Upload-Websites die richtige Wahl ist, steht in Bildwerkzeuge im Browser vs. Upload-Websites; hier schauen wir unter die Haube.

Wie funktioniert Bildbearbeitung im Browser? Schritt für Schritt

1. 1

   Die Engine wird geladen

   Code und Codecs der Engine kommen von unserer eigenen Domain – dieselben statischen Dateien für alle. Ihr Browser legt sie im Cache ab, spätere Besuche starten daher schneller. Jedes Werkzeug lädt nur die Teile, die es braucht.

2. 2

   Das Bild wird lokal gelesen

   Wenn Sie ein Foto auf das Werkzeug ziehen, übergibt der Browser die Datei der Seite. Übertragen wird nichts: Die Datei gelangt von Ihrer Festplatte in den Speicher des Tabs.

3. 3

   Ein Worker dekodiert und bearbeitet es

   Ein Web Worker – ein Hintergrund-Thread des Browsers – dekodiert das Bild in rohe Pixel, führt den Vorgang aus (verkleinern, konvertieren, weichzeichnen, Metadaten entfernen …) und kodiert das Ergebnis.

4. 4

   Sie speichern das Ergebnis

   Die fertige Datei wird aus dem Speicher zum Herunterladen angeboten. Gespeichert wird sie sonst nirgends: Schliessen Sie den Tab, ist sie weg.

Die Engine: Bild-Codecs, kompiliert zu WebAssembly

Browser können viele Bildformate anzeigen, lassen Webseiten aber wenig Kontrolle darüber, wie Bilder geschrieben werden: Qualitätsstufen, Chroma-Subsampling, verlustfreie Modi, Farbprofile oder Metadaten. SchweizerIMG bringt deshalb eigene Encoder und Decoder mit. Sie sind zu WebAssembly kompiliert, einem kompakten Binärformat, das jeder aktuelle Browser als schnellen, kompilierten Code in seiner Sicherheits-Sandbox ausführt.

Farbmanagement ist wichtiger, als es klingt. Ein Foto eines aktuellen Smartphones oder einer Kamera trägt oft ein Farbprofil mit grossem Farbraum. Ohne korrekte Umrechnung wirkt dasselbe Bild auf einer Website flau oder übersättigt. Die Engine liest das Profil und rechnet die Farben um, statt es einfach zu verwerfen – sehr gesättigte Farben ausserhalb von sRGB werden dabei beschnitten; das ist die ehrliche Grenze jeder Umrechnung nach sRGB.

Web Worker: warum die Seite reaktionsfähig bleibt

Ein Foto mit zwanzig oder mehr Megapixeln zu dekodieren, ist Schwerarbeit. Liefe sie im Haupt-Thread der Seite, würden Schaltflächen und Scrollen einfrieren. Die Engine führt deshalb jeden Auftrag in Web Workern aus: eigenen Hintergrund-Threads ohne Zugriff auf die Seite selbst. Je nach Anzahl Prozessorkerne Ihres Geräts bearbeiten mehrere Worker die Bilder eines Stapels nebeneinander. Ein Auftrag lässt sich jederzeit abbrechen, und ein Watchdog stoppt einen Auftrag, der hängen bleibt. Die Worker bringen zudem einen Schutz: Eine fehlerhafte Bilddatei wird in einem abgeschotteten Thread dekodiert, der die Seite nicht berühren kann.

Speicher: warum Ihr Gerät die Grenzen setzt

Die Dateigrösse sagt wenig über den benötigten Speicher. Ein JPEG von wenigen Megabyte enthält ein Foto, das dekodiert vier Byte pro Pixel belegt – ein Bild mit 24 Megapixeln braucht als rohe Pixel fast hundert Megabyte, und viele Vorgänge brauchen eine zweite Kopie für das Ergebnis. Die Engine schätzt vor dem Start den Speicherbedarf jedes Auftrags und plant einen Stapel so, dass er innerhalb eines Budgets bleibt, das sich aus den Angaben des Geräts ableitet. Auf Geräten mit wenig Speicher, etwa den meisten Smartphones, wird die Pixelgrenze automatisch gesenkt, und Sie werden vor einem Durchgang gewarnt, der voraussichtlich scheitern würde.

• Smartphones und Tablets haben pro Tab weit weniger Speicher als Computer. Sehr grosse Bilder – Panoramen, hochaufgelöste Scans – bearbeiten Sie besser am Computer.
• Grosse Stapel laufen nacheinander statt alle gleichzeitig; sie dauern länger, bringen den Tab aber nicht zum Absturz.
• Schliessen Sie andere aufwendige Tabs, wenn ein grosses Bild scheitert, oder verkleinern Sie es zuerst mit Grösse ändern und wenden Sie aufwendigere Werkzeuge auf die kleinere Fassung an.
• Die Grenzen Ihres Plans werden vor einem Durchgang angezeigt; was zu tun ist, wenn der Speicher des Geräts nicht reicht, steht in grosse Bilder und Speicher.

HEIC und Video: was der Browser selbst dekodiert

Zwei Dateiarten nutzen statt der Engine die eigenen Decoder des Browsers. HEIC-Fotos von iPhones öffnen sich nur in Safari: SchweizerIMG enthält keinen HEIC-Decoder (das Format ist durch Patente und Lizenzen geschützt, die wir in einem Browser-Werkzeug nicht ausliefern können), Safari dekodiert HEIC aber selbst und übergibt die Pixel dem Werkzeug. Warum iPhones das Format verwenden und wie Sie kompatible Dateien erhalten, erklärt HEIC-Fotos vom iPhone erklärt.

Video-Werkzeuge wie Video zu GIF, GIF zu Video und Frames extrahieren nutzen WebCodecs, die Schnittstelle des Browsers zu seinen eingebauten Video-Codecs. Sie steht in neueren Browserversionen zur Verfügung; welche Codecs unterstützt werden, unterscheidet sich je nach Browser, und die Seite meldet vor einem Durchgang, wenn WebCodecs fehlt. Wie die entstehenden GIFs leicht bleiben, zeigt GIF verkleinern. Welche Pläne Video zu GIF enthalten, sehen Sie auf der Preisseite. Unterstützte Versionen finden Sie unter unterstützte Browser.

Was den Server erreicht – und was nicht

Konto, Pläne und die monatliche Zählung der Vorgänge liegen auf unserem Server; ganz still ist ein Durchgang daher nicht. Pro Durchgang sendet der Browser genau zwei kleine Nachrichten: eine beim Start mit dem Namen des Werkzeugs und eine am Ende mit dem Ergebnis. Beide werden aus einer festen Liste erlaubter Felder gebildet – jedes andere Feld, etwa ein Dateiname oder eine Grösse, weist der Server zurück.

{ "tool": "compress" }
{ "status": "completed" }

Bilddaten, Dateinamen, Grössen, Pixelmasse, Metadaten wie der GPS-Standort, Vorschaubilder und der Text, den Sie in ein Werkzeug tippen, verlassen das Gerät nie. Die technische Absicherung ist die Content Security Policy der Seite mit connect-src 'self' (CSP Level 3): Sie weist Ihren Browser an, jedem Skript und jedem Worker der Seite Verbindungen zu anderen Servern zu verwehren. Sie können das selbst im Netzwerk-Tab Ihres Browsers verfolgen – wie, steht im Vergleich mit Upload-Websites und in wo meine Bilder verarbeitet werden.

Von einem Werkzeug zum nächsten – und nach dem Schliessen des Tabs

Viele Aufgaben brauchen mehr als ein Werkzeug, zum Beispiel Zuschneiden, dann Grösse ändern, dann Metadaten entfernen. Mit Mit einem anderen Werkzeug fortfahren gehen die Ergebnisse im Speicher des Tabs an die nächste Werkzeugseite: nicht hochgeladen, nicht im Browserspeicher abgelegt, nicht in einen Link gepackt. Ein Neuladen beendet die Übergabe – so gewollt.

Dasselbe gilt für alles andere: Es gibt keinen Verlauf und keine Kopie in einer Cloud. Wenn Sie den Tab schliessen oder neu laden, sind seine Bilder und Ergebnisse weg, auch die Arbeit im Bildeditor. Laden Sie herunter, was Sie behalten möchten. Mehr zum Gesamtkonzept auf der Sicherheitsseite.

Häufige Fragen

Warum scheitert ein grosses Bild auf dem Smartphone, aber nicht auf dem Laptop?

Weil das Bild als rohe Pixel in den Speicher des Geräts passen muss und ein Browser-Tab auf dem Smartphone davon viel weniger erhält als auf einem Computer. Die Engine senkt ihre Pixelgrenze auf Geräten mit wenig Speicher und warnt Sie vorher; sehr grosse Bilder bearbeiten Sie am besten am Computer.

Kann ich die Werkzeuge offline weiter nutzen, wenn sie geladen sind?

Nein. Anmeldung und Zählung der Vorgänge brauchen eine Verbindung; jeder Durchgang beginnt und endet daher mit einer kurzen Anfrage an unseren Server. Über die Verbindung gehen nur Konto- und Nutzungsdaten – die Bilder selbst werden nie übertragen.

Verwendet die Engine KI-Modelle in meinem Browser?

Nein. Die Engine enthält keine KI-Modelle. Hintergrundfarbe entfernen arbeitet nach Farbe und eignet sich am besten für gleichmässige Hintergründe; KI-Hochskalierung oder Objektentfernung gibt es nicht.

Warum meldet ein Werkzeug, mein Browser werde nicht unterstützt?

Alle Werkzeuge brauchen WebAssembly und Web Worker, die jeder aktuelle Browser bietet – manche Firmenrichtlinien schalten WebAssembly ab. Die Video-Werkzeuge brauchen zusätzlich WebCodecs. Meist hilft ein Browser-Update; Einzelheiten unter unterstützte Browser.

Am besten verstehen Sie es, wenn Sie es ausprobieren: Sehen Sie sich alle Werkzeuge an, öffnen Sie den Netzwerk-Tab Ihres Browsers und führen Sie eines aus, oder erstellen Sie ein kostenloses Konto.