Bildkompressor

Unter Bildkomprimierung versteht man den Prozess der Reduzierung der Bilddateigröße durch Eliminierung redundanter oder unnötiger Daten bei gleichzeitiger Beibehaltung der visuellen Qualität. Komprimierungstechniken reichen bis in die 1980er Jahre zurück, als JPEG (Joint Photographic Experts Group, standardisiert 1992) und PNG (Portable Network Graphics, veröffentlicht 1996) entwickelt wurden. Es gibt zwei grundlegende Arten: Bei der verlustbehafteten Komprimierung (JPEG, WebP verlustbehaftet) werden Daten, auf die das menschliche Auge weniger empfindlich reagiert – wie subtile Farbvariationen und hochfrequente Details – dauerhaft verworfen, wodurch eine Größenreduzierung von 70–90 % erreicht wird. Bei der verlustfreien Komprimierung (PNG, WebP verlustfrei, GIF) werden mathematische Algorithmen wie DEFLATE (basierend auf LZ77- und Huffman-Kodierung, 1989 von Phil Katz entwickelt) verwendet, um Daten ohne Qualitätsverlust effizienter zu kodieren und typischerweise eine Reduzierung um 20–50 % zu erreichen. Moderne Formate wie WebP (Google, 2010) und AVIF (Alliance for Open Media, 2019) kombinieren beide Ansätze und bieten eine um 25–35 % bessere Komprimierung als JPEG bei gleichwertiger Qualität. Die Bildkomprimierung ist für die Webleistung von entscheidender Bedeutung – Google berichtet, dass eine Verzögerung von 1 Sekunde beim Laden der Seite die Conversions um 7 % reduziert und Bilder 50–70 % des gesamten Seitengewichts ausmachen.

Unser Kompressor verwendet je nach Format mehrere Algorithmen. Für JPEG: Bilder werden vom RGB- in den YCbCr-Farbraum konvertiert (Helligkeit von Farbe getrennt) und dann in 8×8-Pixel-Blöcke unterteilt. Jeder Block wird einer diskreten Kosinustransformation (DCT) unterzogen, bei der räumliche Daten in Frequenzdaten umgewandelt werden. Hochfrequente Komponenten (feine Details) werden aggressiver quantisiert als niederfrequente Komponenten (allgemeine Formen/Farben) – hier erfolgt die Größenreduzierung. Der Qualitätsschieberegler passt die Quantisierungstabellen an: 100 = minimale Quantisierung (große Datei), 50 = aggressive Quantisierung (kleine Datei). Schließlich komprimiert die Huffman-Codierung die quantisierten Daten. Für PNG: Wir verwenden die Algorithmen pngquant und OptiPNG. Pngquant reduziert die Farbpalette mithilfe der Median-Cut-Quantisierung von 16,7 Millionen (24-Bit) auf 256 Farben (8-Bit) und wendet dann Dithering an, um fehlende Farben zu simulieren. Dadurch wird eine Größenreduzierung von 70 % bei unmerklichem Qualitätsverlust erreicht. OptiPNG probiert mehrere DEFLATE-Komprimierungsstrategien aus (Zlib-Stufen 1–9, Filter 0–5) und wählt das kleinste Ergebnis aus. Für WebP: Die libwebp-Bibliothek von Google verwendet prädiktive Codierung (Vorhersage von Pixelwerten von Nachbarn) in Kombination mit der VP8-Videocodec-Technologie für den verlustbehafteten Modus oder LZ77 + Huffman für den verlustfreien Modus. Die gesamte Verarbeitung nutzt die HTML5 Canvas API und JavaScript-Bibliotheken (browser-image-compression, pngquant.js), die vollständig clientseitig ausgeführt werden.

Unser Bildkompressor nutzt die Browser-Bildkomprimierungsbibliothek (mehr als 1,2 Millionen wöchentliche Downloads auf npm) in Kombination mit der HTML5-Canvas-API für die clientseitige Verarbeitung. Unterstützte Formate: JPEG, PNG, WebP, GIF (nur erstes Bild). Maximale Dateigröße: 50 MB pro Bild (Begrenzung des Browserspeichers). Verarbeitungsgeschwindigkeit: 1–5 Sekunden pro Bild, abhängig von Größe und Qualitätseinstellungen. Die Stapelverarbeitung verarbeitet bis zu 50 Bilder gleichzeitig mithilfe von Web Workern zur parallelen Komprimierung, ohne dass die Benutzeroberfläche einfriert. Das Tool erkennt automatisch die optimalen Komprimierungseinstellungen: Fotos verwenden standardmäßig die verlustbehaftete JPEG-Qualität 80, Grafiken mit Transparenz standardmäßig die PNG-Optimierung. Die Speichernutzung wird optimiert, indem Bilder nacheinander verarbeitet und nach jeder Komprimierung Speicher freigegeben wird. Funktioniert auf allen modernen Browsern: Chrome 50+, Firefox 52+, Safari 11+, Edge 79+. Mobilgeräte werden unterstützt, sind jedoch möglicherweise aufgrund begrenzter CPU/Speicher langsamer.