Wie Sie Bilder ohne Qualitätsverlust komprimieren

Große Bilddateien verlangsamen Websites, verstopfen E-Mail-Postfächer und fressen Speicherplatz. Sie zu komprimieren ist eine der einfachsten Möglichkeiten, Dinge zu beschleunigen, und Sie können das tun, ohne Software zu installieren, ohne etwas auf einen Server zu laden, und meist ohne sichtbaren Qualitätsverlust. Die richtigen Kompressionseinstellungen können 80 % von der Größe eines Fotos abziehen und es bei normalem Betrachtungsabstand identisch aussehen lassen.

Eine kurze Geschichte der Bildkompression

Kompression als digitale Idee ist älter als das Web. Lauflängencodierung in frühen Bitmap-Formaten (TIFF 1986, PCX davor) reduzierte wiederholte Farben auf einen Zähler plus einen Wert und schrumpfte Bildschirmaufnahmen und einfache Grafiken drastisch. Der JPEG-Standard 1992 brachte verlustbehaftete Kompression in den Mainstream, indem er die diskrete Kosinustransformation (DCT) verwendete, um Informationen zu verwerfen, die das menschliche Sehsystem nicht leicht wahrnehmen kann, eine Idee, die drei Jahrzehnte später den Großteil der fotografischen Kompression noch antreibt.

PNG kam 1996 mit DEFLATE-basierter verlustfreier Kompression, ideal für Screenshots und Logos, die JPEG verunstaltet. WebP (Google, 2010) fügte einen smarteren verlustbehafteten Modus hinzu, der JPEG um 25-35 % schlägt, und einen verlustfreien Modus, der PNG um 20-30 % schlägt. AVIF (2019) macht noch einen großen Schritt nach unten, oft die halbe Größe von WebP bei gleicher Qualität. JPEG XL (2021) ist der jüngste Herausforderer und will sie alle durch ein einziges Format ersetzen, das verlustfrei, verlustbehaftet, Animation und sogar das Hin-und-her-Rekomprimieren alter JPEGs ohne zusätzlichen Verlust beherrscht. Die Browser-Adoption ist der Flaschenhals; die Algorithmen selbst sind in Effizienz längst über JPEG hinaus.

Warum die Bilddateigröße wichtig ist

Jedes Bild auf einer Webseite muss vom Browser des Besuchers heruntergeladen werden. Ein einziges unkomprimiertes Foto von einer Telefonkamera kann 5-10 MB groß sein. Multiplizieren Sie das mit mehreren Bildern, und Ihre Seite lädt auf einer schnellen Verbindung spürbar länger, auf einer langsamen Minuten. Kleinere Bilder bedeuten:

• Schnellere Seitenladezeiten: Besucher sehen Ihre Inhalte früher. Googles Core Web Vitals (LCP, Largest Contentful Paint) werden oft vom Hero-Bild dominiert; es zu halbieren halbiert häufig die LCP-Zeit.
• Geringere Bandbreitennutzung: wichtig für mobile Nutzer mit begrenzten Datentarifen und für Ihre eigene Hosting-Rechnung, wenn Sie viel Traffic ausliefern.
• Leichteres Teilen: E-Mail-Anhänge bleiben unter den Größenlimits (Gmail bei 25 MB), und Chat-Apps hören auf, Ihre Fotos hinter Ihrem Rücken zu transkodieren.
• Mehr Speicherplatz: Ihr Telefon, Cloud-Laufwerk oder Server fasst mehr Dateien. Eine 5.000-Foto-Reise wird 1 GB statt 5 GB.
• Besseres SEO: Seitenladezeit-Signale fließen in Googles Suchranking ein, also schlägt eine bildlastige, schnell ladende Seite eine identische, die langsam ist.

Wie Bildkompression funktioniert

Es gibt zwei Arten von Kompression, jede mit eigenen Kompromissen.

Verlustbehaftete Kompression (JPEG, WebP, AVIF) entfernt Bilddaten, die Ihr Auge wahrscheinlich nicht bemerkt. Bei moderaten Qualitätsstufen (etwa 60-80 %) sieht das Ergebnis praktisch identisch zum Original aus, kann aber 50-80 % kleiner sein. Der Algorithmus arbeitet in drei Schritten: RGB zu YCbCr konvertieren (Helligkeit von Farbe trennen), die Farbkanäle herunterabtasten (Ihr Auge ist viel weniger empfindlich für Farbdetail als für Helligkeit) und die DCT anwenden, um hochfrequente Details zu verwerfen. Jeder Schritt kostet nichts an wahrgenommener Qualität, spart aber enorme Datenmengen.

Verlustfreie Kompression (PNG, FLAC für Audio) reorganisiert die Daten, um weniger Platz zu brauchen, ohne etwas zu entfernen. Das Bild ist pixelgenau identisch mit dem Original, aber die Dateigrößen-Einsparungen sind kleiner, typischerweise 10-30 % für Fotos und 30-60 % für Screenshots und Logos.

Mischformate (WebP, AVIF, JPEG XL) lassen Sie pro Datei verlustbehaftet oder verlustfrei wählen. Die meisten modernen Foto-Pipelines liefern verlustbehaftet aus und behalten ein verlustfreies Master fürs Archiv.

So komprimieren Sie Bilder online

1. Bilder hochladen: ein oder mehrere Bilder (JPEG, PNG, WebP, AVIF, HEIC, GIF, BMP, bis zu 50 MB pro Stück) per Drag-and-Drop in das Tool ziehen oder zum Auswählen klicken. Alles wird lokal verarbeitet; nichts wird hochgeladen.
2. Qualitätseinstellungen anpassen: Verwenden Sie den Qualitätsregler, um den Kompressionsgrad zu steuern. Niedrigere Werte bedeuten kleinere Dateien mit mehr Kompression. Sie können auch eine maximale Breite einstellen, das Ausgabeformat ändern oder eine Zieldateigröße angeben.
3. Ergebnis vorab anzeigen: Die meisten Tools zeigen Vorher-Nachher-Miniaturen mit der neuen Dateigröße. Stimmen Sie die Qualität ab, bis der Kompromiss für Ihren Anwendungsfall passt.
4. Ergebnisse herunterladen: einzelne komprimierte Bilder herunterladen oder "Alle herunterladen" für ein ZIP der Charge klicken.

Hinter den Kulissen wird die Datei via FileReader gelesen, von der Bildpipeline des Browsers dekodiert, auf einen Offscreen-Canvas gezeichnet und über canvas.toBlob mit der Zielqualität neu codiert. WebAssembly-Versionen der WebP-, AVIF- und MozJPEG-Encoder bieten nahezu native Kompressionsleistung, ohne die Seite zu verlassen.

Qualitätseinstellungen, die wirklich funktionieren

Es gibt keine universell "richtige" Qualität. Die folgende Tabelle ist ein Ausgangspunkt; passen Sie davon ausgehend anhand des tatsächlichen Aussehens Ihrer Bilder an.

Tipps für die besten Ergebnisse

• Bei Qualität 80 für Fotos, 90 für Screenshots beginnen, das sind die Punkte, an denen die meisten Betrachter das Ergebnis nicht vom Original unterscheiden. Senken Sie weiter, wenn Sie kleinere Dateien wollen; erhöhen Sie, wenn das Bild feines Detail oder Text enthält.
• Wo möglich WebP verwenden, die WebP-Unterstützung übersteigt 2024 97 % der Browser. Für die wenigen, die es nicht haben, liefern Sie einen JPEG-Fallback mit dem picture-Element. AVIF spart noch mehr, prüfen Sie aber, ob der Encoder schnell genug ist.
• Vor der Kompression skalieren, ein 4000-px-Foto, das auf einer Website bei 800 px angezeigt wird, verschwendet Bandbreite egal welche Qualität. Skalieren Sie auf die größte Größe, die Sie tatsächlich anzeigen werden (oft 2x die CSS-Pixelbreite für Retina-Bildschirme), und komprimieren Sie dann.
• Originale behalten, komprimieren Sie immer eine Kopie, nie die Originaldatei. Sie können jederzeit aus dem Original neu komprimieren, aber niemals Daten zurückgewinnen, die durch Kompression verloren gingen.
• Beim öffentlichen Teilen Metadaten entfernen, EXIF-Daten können GPS-Koordinaten, Kameramodell, sogar Ihren Namen enthalten. Browser-basierte Kompressoren entfernen sie meist automatisch; bei wichtiger Privatsphäre überprüfen.
• Zieldateigröße für E-Mails festlegen, Gmail-Anhänge sind bei 25 MB gedeckelt, viele Firmen-Systeme bei 10 MB. Zielen Sie auf 1-2 MB pro Bild zur Sicherheit.
• Für das Web progressives JPEG wählen, progressive JPEGs laden in Durchgängen von oben nach unten, zeigen eine unscharfe Vorschau, bevor sie sich scharf stellen. Moderne Decoder behandeln sie reibungslos und sie komprimieren oft etwas kleiner als Baseline.
• Dasselbe Bild nicht wiederholt neu komprimieren, jeder Durchgang fügt Artefakte hinzu. Wenn Sie eventuell neu bearbeiten, behalten Sie ein verlustfreies Master und exportieren jedes Mal daraus neu.

Welches Format wann

Für neue Inhalte 2024 ist die Best Practice, AVIF zu liefern, wo es unterstützt wird, WebP als universellen modernen Fallback und JPEG oder PNG als absoluten Letzte-Hilfe-Fallback. Das picture-Element regelt das sauber in HTML.

Häufige Fallstricke

• Bereits komprimierte Bilder komprimieren, ein JPEG bei Qualität 80 erneut zu speichern verdoppelt die Einsparung nicht; es fügt nur eine weitere Runde Artefakte hinzu. Komprimieren Sie einmalig aus dem Original (oder einem verlustfreien Master).
• Falsches Format für den Inhalt, ein Logo mit Text als JPEG zu komprimieren erzeugt sichtbares Ringing um Buchstaben. Ein 4000x3000-Foto als PNG zu speichern liefert eine 30-MB-Datei. Passen Sie Format und Inhalt aufeinander an.
• Der Qualitätsregler fühlt sich bei 90 zu aggressiv an, die JPEG-Qualitätsskala ist nicht linear. Von 90 auf 80 zu gehen spart viel mehr als von 100 auf 90, mit fast keinen sichtbaren Kosten.
• Retina-Bildschirme vergessen, ein 600-px-Bild in einem 600-px-CSS-Slot sieht auf Telefonen und modernen Laptops weich aus. Exportieren Sie mit dem 2x der CSS-Pixel und lassen Sie den Browser herunterskalieren.
• Das Farbprofil entfernen, das eingebettete ICC-Profil wegzulassen kann Farben auf Wide-Gamut-Displays merklich verschieben. Moderne Kompressoren erhalten es; ältere möglicherweise nicht.
• Jedes PNG mit derselben Bittiefe speichern, ein Screenshot von Schwarz-Weiß-Text passt in PNG-8 (256 Farben) bei einem Bruchteil der Größe von PNG-24. Nutzen Sie einen Quantisierer wie pngquant für große Einsparungen bei Grafiken.
• In ein schlechteres Format neu codieren, WebP zurück zu JPEG zu konvertieren verliert sowohl Qualität als auch Größenvorteil. Wenn Sie einen JPEG-Fallback brauchen, codieren Sie aus dem Original-Master, nicht aus dem WebP.
• Visuellem Diff bei kleinen Größen vertrauen, ein Artefakt, das im Thumbnail unsichtbar ist, ist auf einem 4K-Display offensichtlich, wenn jemand hineinzoomt. Testen Sie bei der tatsächlichen Anzeigegröße.
• Alphakanal vergessen, JPEG unterstützt keine Transparenz. Ein transparentes PNG in JPEG zu komprimieren füllt den Hintergrund mit Weiß (oder was auch immer das Tool wählt).
• Animation als GIF, GIFs sind größer und qualitativ schlechter als MP4 oder animiertes WebP. Für moderne Auslieferung fast immer konvertieren.

Alternative Werkzeuge und Bibliotheken

Ein Web-Kompressor ist der schnellste Weg für ein oder wenige Bilder. Für Stapel oder skriptbasierte Pipelines übernehmen Kommandozeilen-Werkzeuge und Bibliotheken.

Für die Automatisierung einer Produktfoto-Pipeline ergibt sharp + MozJPEG + AVIF 2024 das beste Verhältnis von Geschwindigkeit zu Qualität. Für einmalige Uploads gewinnt das Browser-Werkzeug in Komfort und Datenschutz.

Datenschutz und der Kompressor

Der Bildkompressor läuft vollständig in Ihrem Browser. Die Datei, die Sie auswählen, wird mit der FileReader-API gelesen, von der Bildpipeline des Browsers dekodiert, auf einen Offscreen-Canvas gezeichnet und über canvas.toBlob neu codiert. Nichts wird hochgeladen, nichts protokolliert, nichts geteilt. Für sensibles Material, Screenshots interner Dashboards, Ausweis-Scans, Vertragsentwürfe als Bildbelege, ist dieser rein lokale Ablauf der Unterschied zwischen einem fremden Server zu vertrauen und niemandem zu vertrauen. Selbst gewöhnliche Fotos enthalten oft EXIF-Metadaten (GPS-Koordinaten, Geräteseriennummer, Zeitstempel), die Sie vielleicht nicht von einem Dritten gesehen haben wollen; die Canvas-basierte Pipeline entfernt die meisten EXIF standardmäßig, und der fehlende Upload bedeutet, dass diese Daten die Seite ohnehin nie verlassen. Für eine so routinierte Aufgabe wie ein Foto kleiner zu machen, sollte die Datenschutz-Voreinstellung sein: nichts verlässt die Seite, nichts wird gespeichert, nichts wird geteilt.