Leitfaden: Bildkompression für Websites

Dieser Leitfaden wurde zuletzt im November 2025 überarbeitet und geprüft. Neue Bildformate, Browserunterstützungen und Tools werden regelmäßig ergänzt, um stets aktuelle Best Practices widerzuspiegeln. Prüfen Sie bei Bedarf die neuesten Empfehlungen in unseren Blogbeiträgen oder in der offiziellen Entwicklerdokumentation.

Hochwertige Bilder sind ein Schlüsselelement moderner Websites und Onlineshops. Sie vermitteln ein einzigartiges visuelles Erlebnis, können aber die Ladezeit erheblich verlangsamen. Tatsächlich machen Bilder heute oft knapp die Hälfte der gesamten Seitengewichtung aus. Vor allem auf mobilen Geräten, die inzwischen über 60% des Internetverkehrs ausmachen, führt jeder zusätzliche Megabyte zu spürbar längeren Ladezeiten und höherem Datenverbrauch. Eine langsame Website wirkt sich negativ auf die Nutzerzufriedenheit und das Ranking in Suchmaschinen aus, Moderne Metriken wie Core Web Vitals zeigen, dass das größte sichtbare Element (LCP - Largest Contentful Print) häufig ein Bild ist - seine Optimierung ist also entscheidend für die Performance einer Seite. In diesem Leitfaden erklären wir, was Bildkompression ist, warum sie wichtig ist, stellen die gängigen Bildformate vor und zeigen Wege und Werkzeuge zur effizienten Bildoptimierung auf.

Bildkompression bedeutet, digitale Bilder so umzuwandeln, dass sie weniger Speicherplatz benötigen, ohne dass der Qualitätsverlust für das menschliche Auge auffällig wird. Dabei werden Redundanzen und überflüssige Daten entfernt oder anders codiert. Im Gegensatz zum bloßen Wechsel des Dateiformats zielt Bildkompression konkret ab, Daten einzusparen. Wie die Wikipedia definiert, geht es dabei "darum, die ursprünglichen Daten entweder in eine vollständig rekonstruierbare Form zu überführen, die weniger Speicherplatz benötigt, oder Daten zu entfernen, deren Verlust kaum wahrnehmbar ist". Es gilt also ein Goldener Mittelweg zwischen möglichst kleineren Dateien und akzeptabler Bildqualität zu finden. In der Praxis wählt man je nach Einsatzzweck die richtige Mischung aus verlustfreier und verlustbehafteter Kompression.

Bildkompression ist vor allem eins: ein Ladezeit-Booster. Kleinere Bilddateien lassen sich schneller vom Server zum Browser übertragen. Eine deutlich reduzierte Dateigröße (beispielsweise 80% kleinere Dateien) führt zu spürbar schnelleren Ladezeiten. Dies verbessert die Nutzererfahrung, denn Webseiten bauen schneller auf, was die Zufriedenheit der Besucher erhöht und die Absprungrate senkt. Für Onlineshops ist das besonders wichtig, denn zufriedene Nutzer verbringen mehr Zeit und tätigen eher einen Einkauf.

Mobilgeräte spielen eine immer größere Rolle: Über 64% des weltweiten Website-Traffics kommen 2025 von Smartphones und Tablets. Komprimierte Bilder schonen hier das begrenzte Datenvolumen der Nutzer und sorgen für rasche Seitenaufbauten, selbst bei schwächeren Mobilfunk-Verbindungen.

Suchmaschinen honorieren schnelle Websites: Die Core Web Vitals und weitere Ranking-Faktoren berücksichtigen die Ladegeschwindigkeit. Bildkompression ist deshalb fester Bestandteil der Onpage-Optimierung. Auch der begrenzte Speicherplatz auf Webservern spielt eine Rolle, denn komprimierte Bilder verbrauchen weniger Ressourcen. Zusammengefasst führt Bildkompression zu schnelleren Ladezeiten, besserer Benutzererfahrung (Desktop wie mobil), geringerem Bandbreitenverbrauch und Entlastung der Server.

Verschiedene Bildformate unterstützen Bildkompression unterschiedliche. Man unterscheidet grundsätzlich verlustfreie und verlustbehaftete Formate. Außerdem gibt es neuere Formate, die beide Modi unterstützen. Nachfolgend finden Sie die wichtigsten aktuellen Formate und ihre Eigenschaften:

Verlustfreie Kompression

Bildformate, die verlustfreie Kompression unterstützen, haben den Vorteil, dass sie den Inhalt der Bilder in allen Details reproduzieren. Das Prinzip der Bildkompressionen basiert in diesem Fall darauf, dass Redundanzen erkannt und entfernt werden. Das ist vor allem bei professionellen Anwendungen mit farblichen Abstufungen wichtig. So lässt sich der Werteverlust in der Qualität vermeiden. 

PNG

Unterstützt verlustfreie Kompression und Alphakanal (Transparenz). Die PNG-Kompression arbeitet vollständig verlustfrei und erreicht oft gute Kompressionsraten bei Grafik- und Logo-Bildern. PNG eignet sich besonders für Bilder mit wenigen Farben, scharfen Kontrasten, Text oder Logos. Es kann über 16Millionen Farben darstellen und bietet bis zu 16 Bit Alphakanal (üblich sind 8 Bit). Nachteilig ist, das PNG bei detailreichen Fotos keine so starke Reduktion wie JPEG erzielt.

GIF

Ebenfalls verlustfrei (LZW), aber auf eine Farbpalette von maximal 256 Farben beschränkt. GIF unterstützt Animationen, eignet sich aber heute vor allem für einfache Grafiken, Icons oder sehr kleine Animationen. Farbverläufe oder Fotos wirken bei GIF gröber (Dithering). Für komplexe Farbfotos ist GIF ungeeignet, es wird daher meist durch modernere Formate oder durch APNG/WebP-Animationen ersetzt.

Verlustbehaftete Kompression

Bei der verlustbehafteten Datenkompression wird sich die Wahrnehmung der Menschen zunutze gemacht. Kleine Änderungen an der Farbe sind für das bloße Auge nicht sichtbar, da das Empfinden von Farben eingeschränkt ist. Ein geringer Informationsverlust im Bild wird also überhaupt nicht bemerkt, solange die Qualität der Bildinhalte angemessen bleibt. Wählt man den Kopressionsgrad jedoch zu hoch, können unschöne Artefakte im komprimierten Bild entstehen. Daher ist es ratsam, getroffene Einstellungen je nach Bildinhalt anzupassen und komprimierte Bilder zu prüfen.

JPEG (JPG)

Weit verbreitet für fotografische Bilder. JPEG unterstützt bis zu 16,7 Millionen Farben und verwendet eine verlustbehaftete Kompression (blockbasierte DCT). Sehr starke Kompression (Faktoren >10) sind möglich, wobei man bei höheren Kompressionsstufen sichtbare Artefakte in Kauf nimmt. JPEG ist nach wie vor die erste Wahl bei Fotos, wenn Dateigröße und Ladezeit wichtig sind. Moderne Geräte nutzen oft auch HEIF/HEIC, ein auf dem HEVC-Codec basierendes Format, das bessere Kompression als JPEG bietet und auf vielen Smartphones Standard ist (auf Websites noch eingeschränkt unterstützt). Weniger relevant für Web sind JPEG 2000 oder JPEG XR. Diese bieten Verbesserungen wie Tile- und Wavelet-Kodierung, konnten sich aber im Web-Umfeld wegen eingeschränkter Unterstützung bisher nicht durchsetzen.

Weitere Formate

Für fotografische Bilder ohne Qualitätsverlust (z.B. im Druck) nutzt man eher TIFF oder RAW-Formate. Diese übersteigen aber den Rahmen des Web-Einsatzes. Das Ziel im Web ist in der Regel, JPEG-ähnliche Bilder mit möglichst wenig Verlust auszuliefern.

Moderne Formate (verlustbehaftet und verlustfrei)

WebP

Ein von Google entwickeltes Format (2010), das sowohl lossy als auch lossless Kompression unterstützt. WebP bietet seine sehr gute Komprimierung (häufig deutlich kleinere Dateien als JPEG oder PNG bei vergleichbarer Qualität). Es unterstützt Alphatransparenz und Animationen (sowohl verlustfrei als auch verlustbehaftet möglich). WebP wird heute von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge, Opera). Weltweit sind bereits über 95% der Browser mit WebP kompatibel. Damit ist WebP die etablierte Alternative für schnelle Webseiten mit durchgehend guter Unterstützung.

AVIF

Ein sehr neues, offenes Format (2019, basierend auf dem AV1-Videocodec). AVIF erreicht bei hohen Kompressionsraten eine deutlich bessere Bildqualität als JPEG oder WebP. Es unterstützt 10- oder 12-Bit-Farbtiefe, verlustfreie und verlustbehaftete Kompression, Alphakanal und Animation. In Tests sind AVIF-Dateien oft 20-30-% kleiner als entsprechende WebP-Dateien bei vergleichbarer Qualität. Nachteil: Die Kodierung und Decodierung ist rechenintensiver und die Unterstützung war anfangs nicht universal. Stand 2025 unterstützen aber alle großen Browser (Chrome, Firefox, Edge, Safari) neuere AVIF-Versionen. Bei Bedarf muss man jedoch noch via <picture>-Element Fallbacks für ältere Browser vorsehen. AVIF gilt als zukunftsweisend für beste Qualität bei minimaler Dateigröße.

JPEG XL

Ein lizenzfreier Standard (ISO 18181) aus demJPEG-Komitee. JPEG XL kann verlustfrei und verlustbehaftet arbeiten und verspricht sehr hohe Effizienz. In Studien übertrifft JPEG XL etwa JPEG, JPEG 2000 und WebP in Qualität bzw. Kompressionsrate. Besonders bei sehr hoher Qualität oder sogar verlustloser Speicherung bietet JPEG XL leichte Vorteile gegenüber AVIF. Derzeit ist JPEG XL allerdings kaum im Browser einsetzbar: Nur Safari (sehr neueste Version) unterstützt es nativ, bei Chromium/Chrome ist eine Erweiterung nötig, in Firefox muss man Flags setzen. Daher wird JPEG XL als Webformat 2025 noch nicht empfohlen, eignet sich aber für professionelle Anwendungen, Archivierung und Druck.

Es gibt viele Wege, Bilder zu komprimieren und zu optimieren. Folgende Methoden und Tools sind heute gängig:

1. Serverseitige Optimierung (CLI-Tools)

Sie haben die Möglichkeit direkt über den Server die Bildkomprimierung zu starten. Auf den Servern von Timme Hosting stellen wir Tools wie optipng oder jpegoptim zur Verfügung. Auf der Kommandozeile kann man mithilfe dieser Tools ganz einfach alle PNG- und JPG-Dateien eines Verzeichnisses mit einem Befehl optimieren. Sie laden dafür wie gewohnt die Bilder über das Shopsystem beziehungsweise CMS hoch. Danach verbinden Sie sich per ssh mit dem Server und starten das gewünschte Tool, um die Bilder zu optimieren. Hier finden Sie eine passende Anleitung: verlustfreien Optimierung der Bilder.

2. Bildbearbeitungsprogramme

Bei Online-Shops ist es aufgrund der vielen Produktbilder extrem wichtig, gleich von Anfang an auf das passende Bildformat zu achten. Im ersten Schritt macht es also Sinn, die entsprechenden Bildformate zu definieren. Zum Beispiel das für das Logo ein PNG eingesetzt wird und für große Grafiken lieber JPEG. Beim Speichern der Grafiken mit einem Bildbearbeitungsprogramm lässt sich die Komprimierung einstellen und so werden große Dateien im Shop vermieden.

Bei einzelnen Dateien oder im Vorsortieren ist klassische Bildbearbeitung sinnvoll. Zum Beispiel bietet Adobe Photoshop die Funktion „Für Web speichern“, mit der Sie JPEG- oder PNG-Qualität direkt einstellen und die Ausgabe sofort begutachten können. Dabei sieht man sofort, wie sich verschiedene Qualitätsstufen auf Dateigröße und sichtbare Artefakte auswirken. Ähnliches gilt für andere Programme wie GIMP oder Affinity Photo. Wichtig ist hier: Erstellen Sie schon beim Export in verschiedenen Größen und Formaten die optimalen Ergebnisse, um spätere Nacharbeiten zu vermeiden. So beugen Sie vor, dass zu hohe Auflösungen oder falsche Formate in den Shop gelangen.

3. CMS- und Shop-Funktionen

Viele moderne Content-Management-Systeme (CMS) und Shoplösungen bieten eingebaute Bildoptimierer. Beispielsweise konvertiert Shopware beim Hochladen automatisch in ein optimal angepasstes Format. WordPress erlaubt (seit Version 5.8) das Speichern von Bildern als WebP und ab WordPress 6.5 kann es sogar AVIF-Bilder direkt verarbeiten. Magento, Drupal & Co. haben ähnliche Module oder Plugins, die Bilder beim Upload verkleinern und konvertieren. Diese Funktionen können in der Regel aktiviert oder deaktiviert werden. Vorteil: Automatisch, ohne zusätzlichen Aufwand beim Hochladen. Nachteil: Sie haben weniger Kontrolle über den Prozess, und die Qualität muss oft in den Einstellungen definiert werden.

4. Plugins und Bibliotheken

Für viele Plattformen gibt es spezialisierte Erweiterungen zur Bildkompression. In WordPress sind etwa Imagify, Smush oder ShortPixel beliebt; in anderen Systemen gibt es vergleichbare Tools. Sie übernehmen die Kompression automatisch und können oft mehrere Formate ausgeben (JPEG, WebP, AVIF). Bei Onlineshops existieren z. B. Module für Shopware oder Magento, die TinyPNG- oder Kraken-APIs ansprechen. Diese Plugins sparen viel Arbeit, allerdings kann ihre initiale Kompression aufwändiger sein (da erst einmal Bilder hochgeladen oder lokal verarbeitet werden müssen).

5. Online-Tools / Browser-Apps

Für einzelne Bilder (oder kleine Mengen) eignen sich Webdienste. Tools wie TinyPNG/TinyJPG (tinypng.com) komprimieren PNG und JPEG per Drag & Drop automatisch (mittlerweile unterstützen sie auch WebP und AVIF). Squoosh (Google) ist eine kostenlose Browser-App, die verschiedenste Formate (JPEG, WebP, AVIF, PNG usw.) und Einstellungsmöglichkeiten bietet. Auch Imagify, Optimizilla, Kraken.io, Compressor.io oder ImageOptim-CLI sind empfehlenswert. Nachteil: Mehraufwand beim Hochladen, eher für kleine Projekte oder Nachbearbeitung sinnvoll. Vorteil: einfach zu bedienen und oft kostenlos.

Unabhängig vom konkreten Tool gilt: Testen Sie verschiedene Kompressionsstufen und Formate für jede Bildart (Foto, Grafik, Logo). Prüfen Sie anschließend iimmer die Qualität im Browser oder auf Geräten. Moderne Websites kombinieren oft mehrere Formate mit <picture>-Elementen: Dabei liefert der Server für neue Browser zuerst ein AVIF (oder WebP), für ältere Browser fällt die Wahl auf JPEG/PNG zurück. So sichern Sie maximale Kompatibilität.

Bildkompression bleibt auch 2025 eine Schlüsseltechnik für schnelle Websites. Sie verringert das Datenvolumen erheblich, beschleunigt den Transfer und spart Bandbreite, ohne dass Nutzer merkbare Qualitätseinbußen hinnehmen müssen. Aktuelle Bildformate wie WebP und AVIF bieten im Vergleich zu JPEG/PNG bessere Kompression und unterstützen moderne Web-Features (Transparenz, Animation). Es ist ratsam, beim Website- oder Shop-Aufbau von Anfang an die richtigen Formate zu verwenden und Bilder direkt optimiert bereitzustellen. Ergänzend sollten vorhandene Bilder mit den beschriebenen Tools nachoptimiert werden. Ob perKommandozeile auf dem Server, per Bildbearbeitungstool oder per Plugin, wählen Sie den Workflow, der zu Ihrem Projekt passt. Letztlich führt jeder geschickte Kompressionsschritt zu kürzeren Ladezeiten, besserer Nutzererfahrung und geringeren Kosten. Experimentieren Sie mit den genannten Funktionen und Tools, um für Ihre Seite das optimale Setup zu finden.