Bilddateien sind in der Regel der größte Vermögenswert auf jeder Webseite, und die Auswahl der Komprimierung wirkt sich direkt auf die Seitenladegeschwindigkeit, die Bandbreitenkosten und das Suchranking aus (Googles Core Web Vitals legen großen Wert auf bildbezogene Leistungsmetriken). Durch die Auswahl des richtigen Formats und der richtigen Qualitätsstufe für jedes Bild kann das Gesamtseitengewicht ohne sichtbaren Qualitätsverlust um 50–90 % gesenkt werden. In den folgenden Abschnitten wird erläutert, warum JPEG, PNG und WebP jeweils spezifische Anwendungsfälle haben, wie der Qualitätsparameter tatsächlich unter der Haube funktioniert und warum die clientseitige Browserkomprimierung für die meisten Arbeitsabläufe den Cloud-Diensten vorzuziehen ist.
Wann man JPEG vs. PNG vs. WebP verwenden sollte
Jedes Bildformat hat spezifische Stärken, die für bestimmte Arten von Bildern von Bedeutung sind. JPEG ist für Halbtonfotos optimiert, bei denen sanfte Farbverläufe und komplexe Texturen dominieren. Durch die verlustbehaftete Komprimierung werden für den Menschen nicht wahrnehmbare Details (Hochfrequenzkomponenten und Farbinformationen, die das Auge kaum verarbeitet) verworfen, um eine drastische Größenreduzierung zu erreichen. Bei Bildern mit scharfen Kanten, einfarbigen Bereichen, Textüberlagerungen oder Transparenz versagt es gravierend – Komprimierungsartefakte werden sofort als Unschärfe oder Streifen sichtbar, und JPEG unterstützt überhaupt keine Transparenz. PNG ist verlustfrei und verarbeitet scharfkantige Inhalte und Transparenz perfekt, die Größenreduzierung ist jedoch moderat (normalerweise 10–30 % kleiner als bei unkomprimierten Bitmaps), da keine Informationen verworfen werden können. Verwenden Sie PNG für Logos, Symbole, Screenshots, technische Diagramme und alle Bilder mit Text. WebP, 2010 von Google eingeführt und seit 2020 weithin unterstützt, macht den Unterschied: Es bietet sowohl verlustbehaftete als auch verlustfreie Modi, erreicht 25–35 % kleinere Dateien als JPEG bei gleicher Qualität, verarbeitet Transparenz wie PNG und unterstützt Animationen wie GIF. Für neue Webinhalte ist WebP im Allgemeinen die richtige Standardeinstellung. Fallback auf JPEG für eine sehr breite Kompatibilität (E-Mail-Clients, ältere Software) und PNG für Fälle, in denen die Transparenz pixelgenau sein muss oder eine verlustfreie Archivierung erforderlich ist. Dieses Tool konvertiert zwischen allen drei Formaten mit Vorschau, sodass Sie die Dateigrößen vor der Übergabe in der Zielqualität vergleichen können. JPEG kann keine Transparenz übertragen; Beim Konvertieren transparenter Bilder in JPEG glättet dieses Werkzeug transparente Bereiche auf einer weißen Leinwand.
Wie der Qualitätsparameter tatsächlich funktioniert
Der Qualitätsregler bei verlustbehafteten Encodern (JPEG, WebP-verlustbehaftet) hat einen nichtlinearen Effekt, den es zu verstehen lohnt. Qualität 100 erzeugt die größte Datei – der Encoder behält so viele Details bei, wie sein verlustbehafteter Algorithmus kann. Bei Qualitätswerten von 90–95 sind die Dateien etwa 30–50 % kleiner und es gibt nahezu keinen sichtbaren Unterschied zur Qualität 100. Qualität 80–85 ist der klassische „visuell verlustfreie“ Sweet Spot, der von den meisten Webdiensten verwendet wird: weitere 40–60 % Reduzierung unter Qualität 100, bei typischen Betrachtungsabständen immer noch nicht von der Quelle zu unterscheiden. Qualität 70–80 ist der ausgewogene Standard für die allgemeine Webnutzung – sichtbare Unterschiede bei sorgfältiger Betrachtung der Fotodetails, aber für die meisten Zwecke akzeptabel, bei weiteren 20 % Größeneinsparung. Qualität 50–70 ist eine aggressive Komprimierung: sichtbare Artefakte auf komplexen Bildern, aber ausreichend für Miniaturansichten, Vorschaubilder oder mobile Szenarien mit eingeschränkter Bandbreite. Unterhalb von Qualität 50 dominieren Artefakte und die Bilder sehen merklich verschlechtert aus. Der genaue Kompromiss hängt stark vom Bildinhalt ab: Fotos vertragen eine aggressive Komprimierung viel besser als Bilder mit Text oder Grafiken, weshalb die globale Anwendung einer einzigen Qualitätseinstellung häufig zu suboptimalen Ergebnissen führt. Die in diesem Tool voreingestellte Web-Voreinstellung (85 %) ist für die meisten Bilder die richtige Standardeinstellung, und einzelne Bilder können angepasst werden, wenn ihre Komplexität eine andere Einstellung erfordert.
Warum die clientseitige Browserkomprimierung Cloud-Dienste übertrifft
Bis vor kurzem bedeutete die Online-Bildkomprimierung fast immer das Hochladen auf einen Cloud-Dienst wie TinyPNG oder Compressor.io, der das Bild auf seinen Servern verarbeitete und das komprimierte Ergebnis zurückgab. Moderne Browser unterstützen jetzt die vollständige Bildkodierung über die Canvas-API, was eine clientseitige Komprimierung ermöglicht, die die Nachteile des Cloud-Modells vermeidet. Datenschutz: Ihre Bilder verlassen niemals Ihr Gerät, was für arbeitsbezogene Fotos (interne UI-Screenshots, Produktmodelle, proprietäre visuelle Inhalte), persönliche Fotos (Familie, Reisen, sensible Inhalte) und alle Bilder mit eingebetteten Metadaten (EXIF) wichtig ist, die Sie lieber nicht mit Dritten teilen möchten. Geschwindigkeit: Die lokale Komprimierung läuft so schnell, wie Ihre CPU ausführen kann, normalerweise weniger als eine Sekunde pro Bild, während Cloud-Dienste sowohl beim Hoch- als auch beim Herunterladen Netzwerk-Round-Trip-Kosten zahlen – mehrere Sekunden pro Bild bei typischen Verbindungen. Zuverlässigkeit: Cloud-Dienste können ausfallen, ihre Free-Tarif-Limits ändern oder eine Anmeldung erfordern; Browser-Tools funktionieren weiterhin, solange die Browser weiterhin funktionieren. Die einzige Einschränkung ist der Speicher – sehr große Bilder (50+ MB) oder große Stapel (20 Bilder) können den Browserspeicher belasten, während serverseitige Dienste keine praktische Grenze haben. Bei typischen Bildern für die Webnutzung (Fotos unter 10 MB, Stapel unter 20 Bildern) ist die clientseitige Browserkomprimierung schneller, privater und zuverlässiger. Dieses Tool verwendet Canvas + die integrierten JPEG/PNG/WebP-Encoder des Browsers, was bedeutet, dass es in jedem modernen Browser konsistent und ohne externe Abhängigkeiten funktioniert.