Bilder komprimieren _

Wie die browserbasierte Bildkomprimierung funktioniert

Jeder Komprimierungsdurchlauf läuft vollständig in JavaScript. Es wird keine Codec-Bibliothek heruntergeladen und kein Server ist beteiligt. Die native Canvas API des Browsers dekodiert das Bild, kodiert es mit niedrigerer Qualität neu und übergibt Ihnen einen Blob, den die Seite vorschauen, herunterladen oder in eine ZIP-Datei packen kann. Da jeder Schritt im Sandbox des Tabs bleibt, berühren die Originaldateien nie das Netzwerk.

1. Liest jede hochgeladene Datei als Blob und erstellt eine Objekt-URL, damit der Browser sie lokal dekodieren kann, ohne Bytes an einen Server zu kopieren oder auf die Festplatte zu schreiben.
2. Zeichnet das dekodierte Bild auf ein offscreen Canvas-Element in seinen ursprünglichen Pixelabmessungen, bereit für die Neukodierung.
3. Ruft canvas.toBlob(callback, mimeType, quality) auf, um die Pixel neu zu kodieren. Im Qualitätsmodus mappt der Schieberegler direkt auf den Quantisierungsparameter des Encoders; im Zielgrößen-Modus halbiert die Seite den Qualitätswert, bis das Ausgabe-Blob unter das Byte-Budget passt.
4. Zeigt eine Vorher/Nachher-Übersicht mit Originalgröße, komprimierter Größe und Einsparprozentsatz an, dann bietet sie einen Download pro Bild oder eine einzelne ZIP-Datei für den gesamten Stapel. Die ZIP wird im Speicher mit fflate erstellt, einer 8-KB-Bibliothek, die beim ersten Einsatz geladen wird.

Warum Bilder komprimieren?

• Kleinere Bilder laden schneller. Ein Hero-Bild von 4 MB auf 600 KB zu reduzieren verbessert direkt den Largest Contentful Paint, einen der Core Web Vitals, den Google für das Ranking verwendet. Auf einer Seite mit mehreren Fotos addieren sich die Einsparungen zu einem schnelleren ersten Seitenaufbau.
• Upload- und Anhangsgrenzen sind allgegenwärtig. Viele CMS-Plattformen, Ticketing-Tools und E-Mail-Systeme lehnen Dateien über 1 oder 2 MB ab. Eine schnelle Komprimierungsrunde bringt ein Foto unter das Limit, ohne einen vollständigen Editor öffnen zu müssen.
• Bandbreite und Speicher kosten Geld im großen Maßstab. WebP bei Qualität 0.8 statt PNG in voller Größe zu liefern kann die Bildlast um ein Drittel oder mehr reduzieren, was CDN-Egress-Kosten und mobilen Datenverbrauch Ihrer Besucher senkt.
• Datenschutz spielt bei sensiblen Bildern eine Rolle. Da alles im Browser läuft, bleiben Ausweisscans, medizinische Bilder und interne Screenshots auf Ihrem Gerät — kein Upload zu einem Drittanbieter-Server wie TinyPNG, über den man sich Gedanken machen müsste.

Häufige Anwendungsfälle

Komprimierung ist immer dann nötig, wenn ein Bild größer ist als der Ort, an den es gehen soll. Drei Muster, die wir immer wieder sehen.

• Produktfotos für einen Online-Shop vorbereiten. JPEG-Originale werden auf Qualität 0.8 komprimiert (oder ein 200-KB-Ziel), damit der Shop schnell lädt und Core Web Vitals auf Mobilgeräten besteht.
• Screenshots vor dem Anhängen an einen Bug-Tracker oder ein Wiki verkleinern. Ein Stapel PNG-Aufnahmen, in JPEG bei Qualität 0.85 umgewandelt, sinkt oft von mehreren Dutzend MB auf wenige.
• Ein Foto unter eine Upload-Grenze bringen — ein Stellenportal, das Dateien über 1 MB ablehnt, ein E-Mail-System mit engem Anhangslimit oder ein Forum-Avatar, der ein Byte-Budget einhalten muss.

Ein Praxisbeispiel: 4-MB-JPEG auf 400 KB

Ein 4-MB-JPEG direkt von einer Handy-Kamera ist eine häufige Datei, die Upload-Grenzen sprengt und Seiten verlangsamt. Ein guter Maßstab für das, was Komprimierung spart.

Legen Sie das JPEG in die Upload-Zone, belassen Sie das Format auf JPEG, und ziehen Sie entweder den Qualitätsschieberegler auf 0.7 oder wechseln Sie in den Zielgrößen-Modus und geben Sie 400 KB ein. Im Qualitätsmodus kodiert die Canvas-Pipeline einmal neu und zeigt das Ergebnis, typischerweise 500 bis 700 KB je nach Foto. Im Zielgrößen-Modus probiert die Seite einige Qualitätswerte aus, wählt den höchsten, der noch unter 400 KB passt, und meldet den Einsparprozentsatz. Klicken Sie auf Herunterladen auf der Karte für die einzelne Datei, oder auf .zip herunterladen, wenn Sie mehrere Bilder auf einmal komprimiert haben. Der gesamte Vorgang läuft bei einer Datei dieser Größe in deutlich unter einer Sekunde und verbraucht nach dem Laden der Seite keinerlei Bandbreite.

Was ist der Unterschied zwischen Qualitätsmodus und Zielgrößen-Modus?

Der Qualitätsmodus bietet einen einzigen Schieberegler von 0.1 bis 1.0, der dem Quantisierungsparameter des JPEG- oder WebP-Encoders entspricht — niedrigere Werte bedeuten kleinere Dateien mit sichtbareren Artefakten. Der Zielgrößen-Modus dreht das Problem um: Sie geben eine Größe in Kilobytes an, und die Seite halbiert den Qualitätswert, kodiert mehrmals, bis sie die höchste Qualität findet, die noch in Ihr Budget passt. Der Zielgrößen-Modus ist praktisch, wenn ein hartes Limit wichtig ist (zum Beispiel eine 1-MB-Upload-Grenze); der Qualitätsmodus ist schneller und besser, wenn Sie einfach ein vorhersehbares visuelles Ergebnis möchten. PNG ist verlustfrei, daher gilt keiner der beiden Modi für PNG.

Läuft das auf meinem Gerät?

Ja, vollständig. Die Seite verwendet die native Canvas API des Browsers und die Web File API, um jedes Bild im Speicher zu dekodieren und neu zu kodieren. Keine Bilddaten werden an einen Server gesendet, es gibt keinen temporären Upload und keinen Cloud-Hin-und-Rückweg. Sie können es selbst überprüfen: Öffnen Sie DevTools, wechseln Sie zum Netzwerk-Panel und führen Sie eine Komprimierung aus. Die einzigen ausgehenden Anfragen, die Sie sehen werden, sind der initiale Seitenaufruf und Werbeaufrufe. Nichts Bildförmiges verlässt den Tab.

Warum schrumpft das Komprimieren eines PNG manchmal kaum?

PNG ist ein verlustfreies Format, daher kann die Canvas API keine Details wegwerfen, um es kleiner zu machen — sie kann nur dieselben Pixel neu verpacken. Bei Fotos ist ein PNG bereits groß, und die verlustfreie Neukodierung spart wenig. Der echte Gewinn kommt vom Wechsel des Ausgabeformats zu JPEG oder WebP, die verlustbehaftete Komprimierung für Fotos verwenden und routinemäßig 4 bis 10 Mal kleiner werden. Behalten Sie PNG nur, wenn Sie verlustfreie Qualität oder Transparenz benötigen; wählen Sie sonst JPEG für Fotos oder WebP für das beste Verhältnis von Größe zu Qualität.

Welches Format sollte ich wählen?

Für Fotografien bietet WebP bei Qualität 0.8 das beste Verhältnis von Größe zu Qualität und wird von jedem Browser unterstützt, der seit 2021 ausgeliefert wurde; JPEG ist der sichere universelle Fallback, wenn ein Ziel älter oder restriktiver ist. Wählen Sie PNG nur, wenn Sie verlustfreie Qualität oder einen Alphakanal benötigen — Strichzeichnungen, UI-Screenshots, Logos mit Transparenz. Wenn Sie auf Seitengeschwindigkeit optimieren und Ihr Publikum moderne Browser nutzt, ist WebP fast immer die richtige Wahl; wenn Sie ein altes CMS oder eine Druckpipeline bedienen, die WebP ablehnt, bleiben Sie bei JPEG.

Bilder ablegen, Qualitätsstufe oder Zielgröße wählen, komprimieren. Alles läuft in Ihrem Tab. Kein Upload, kein Konto, kein Warten in einer Server-Warteschlange.