Bildoptimierung: WebP, AVIF und Lazy Loading

Beschleunigen Sie Ihre Website mit Bildoptimierung: Lernen Sie WebP, AVIF, Lazy Loading und Bildkomprimierung Schritt für Schritt mit praktischen Beispielen.

Wenn eine Webseite geladen wird, machen meist nicht die Texte, sondern die Bilder den größten Teil der heruntergeladenen Datenmenge aus. Hochauflösende Fotos, Produktschaufenster, Hintergrundbilder und dekorative Symbole tragen zusammengenommen einen erheblichen Anteil am Seitengewicht ganz allein. Genau aus diesem Grund zählt die Bildoptimierung zu den wirkungsvollsten und am schnellsten Ergebnisse liefernden Maßnahmen, mit denen Sie die Geschwindigkeit einer Website steigern können. Richtig umgesetzt lässt sich die Seitengröße um die Hälfte oder sogar mehr verringern – und das ohne einen sichtbaren Qualitätsverlust.

Das Problem ist, dass viele Websites noch immer mit den Gewohnheiten von vor zehn Jahren riesige JPEG- und PNG-Dateien unverändert ausliefern. Dabei unterstützen moderne Browser längst weit effizientere Bildformate, und es ist zum Standard geworden, Bilder erst dann zu laden, wenn sie tatsächlich gebraucht werden. In diesem Leitfaden gehen wir ausführlich auf die modernen Formate ein, die Ihre Bilder leichter machen, auf die richtigen Komprimierungsstrategien und auf das verzögerte Laden (Lazy Loading), das den Seitenaufbau dramatisch beschleunigt.

Unser Ziel ist es nicht, in der Theorie zu verharren; in jedem Abschnitt finden Sie konkrete, umsetzbare Schritte, Codebeispiele und praktische Kriterien, die Ihnen bei Entscheidungen helfen. Ob Sie einen persönlichen Blog oder einen großen Online-Shop betreiben – die hier vorgestellten Ansätze lassen sich auf Ihr eigenes Projekt übertragen.

Warum ist Bildoptimierung so wichtig?

Wenn ein Nutzer auf Ihre Seite klickt, ist die Zeit, die er zu warten bereit ist, viel kürzer, als Sie vielleicht denken. Zeigt die Seite nicht innerhalb weniger Sekunden sinnvolle Inhalte, drückt der Besucher auf die Zurück-Taste. Bilder spielen in dieser Gleichung eine entscheidende Rolle, denn sie sind sowohl die Elemente, deren Download am längsten dauert, als auch jene, die auf dem Bildschirm am meisten Platz einnehmen.

Die Vorteile der Bildoptimierung beschränken sich nicht auf einen einzigen Bereich. Die greifbarsten Nutzen lassen sich so zusammenfassen:

Schnellerer Seitenaufbau: Kleinere Dateien laden schneller, sodass der Nutzer die Inhalte früher sieht.
Bessere Nutzererfahrung: Plötzliche Verschiebungen während des Ladens (Layout Shift) und verspätet eintreffende Bilder nehmen ab.
Vorteil bei Suchmaschinen: Seitengeschwindigkeit und die Core Web Vitals sind direkte Signale für das Ranking.
Geringere Datenkosten: Nutzer über mobile Verbindungen verbrauchen weniger Datenvolumen; das ist besonders bei begrenzten Tarifen wichtig.
Server- und Bandbreitenersparnis: Weniger Datenverkehr senkt auch die Hosting-Kosten.

Der zu den Core Web Vitals gehörende LCP-Wert (Largest Contentful Paint) misst in der Regel, wann das größte Bild der Seite gezeichnet wird. Mit anderen Worten: Ob Ihre Seite den Eindruck vermittelt, "geladen" zu sein, hängt meistens davon ab, wie schnell Ihr größtes Bild erscheint. Der direkteste Weg, diesen Wert zu verbessern, besteht darin, genau dieses Bild zu verkleinern und korrekt auszuliefern.

Performance ist nicht nur Geschwindigkeit

Bildoptimierung nur als "Sekunden gewinnen" zu betrachten, ist eine unvollständige Sichtweise. Nicht optimierte Bilder führen dazu, dass sich Texte und Schaltflächen während des Ladens verschieben. Gerade wenn der Nutzer auf einen Link klicken will, springt durch das eintreffende Bild das Layout, und er klickt an die falsche Stelle. Das ist sowohl störend als auch vertrauensschädigend. Mit korrekter Dimensionierung und Platzreservierung lassen sich diese Probleme vermeiden.

Lernen wir die Bildformate kennen: JPEG, PNG, WebP und AVIF

Die Wahl des richtigen Formats ist der Grundstein der Bildoptimierung. Jedes Format hat seine Stärken und Schwächen; die richtige Wahl hängt von der Art des Bildes und vom Verwendungszweck ab.

JPEG ist ein verlustbehaftetes Format, das seit Jahrzehnten für Fotos verwendet wird. Es komprimiert weiche Farbverläufe gut, unterstützt aber keine Transparenz und erzeugt bei gleicher Qualität größere Dateien als moderne Formate.

PNG bietet verlustfreie Komprimierung und unterstützt Transparenz. Es ist ideal für Logos, Symbole und Grafiken mit scharfen Kanten; bei Fotos wird die Dateigröße jedoch sehr groß.

WebP vereint verlustbehaftete und verlustfreie Komprimierung, Transparenz und Animation in einem einzigen Format. Bei gleicher Bildqualität erzeugt es deutlich kleinere Dateien als JPEG und wird heute von nahezu allen aktuellen Browsern unterstützt.

AVIF ist ein Format der neueren Generation und bietet in der Regel eine noch bessere Komprimierung als WebP. Es zeichnet sich besonders dadurch aus, dass es bei geringen Dateigrößen die Qualität bewahrt; zu seinen Vorteilen zählen außerdem eine große Farbtiefe und HDR-Unterstützung. Im Gegenzug ist die Kodierung langsamer und die Unterstützung in älteren Browsern noch nicht so weit verbreitet wie bei WebP.

Vergleichstabelle der Formate

Eigenschaft	JPEG	PNG	WebP	AVIF
Komprimierungsart	Verlustbehaftet	Verlustfrei	Verlustbehaftet + verlustfrei	Verlustbehaftet + verlustfrei
Transparenz (Alpha)	Nein	Ja	Ja	Ja
Animation	Nein	Nein	Ja	Ja
Typische Dateigröße	Groß	Sehr groß	Klein	Am kleinsten
Browser-Unterstützung	Vollständig	Vollständig	Sehr weit	Weit (zunehmend)
Kodierungsgeschwindigkeit	Schnell	Schnell	Mittel	Langsam

Behalten Sie beim Lesen dieser Tabelle folgende praktische Regel im Kopf: Für fotolastige Bilder sind AVIF und WebP die beste Wahl; bei kleinen Elementen mit scharfen Kanten und Transparenzbedarf bringt WebP im Vergleich zu PNG immer noch erhebliche Einsparungen. In einem modernen Workflow legen Sie AVIF in der Regel als erste Wahl fest, WebP als Reserve und JPEG/PNG als allerletzten sicheren Hafen.

Wie steigt man auf WebP und AVIF um?

Der Umstieg auf neue Formate bedeutet nicht, "alle Bilder zu löschen und neu aufzunehmen". Sie können damit beginnen, Ihre vorhandenen JPEG- und PNG-Dateien zu konvertieren. Der Trick besteht darin, modernen Browsern das effizienteste Format zu liefern, während Sie für ältere Browser eine Rückfalllösung (Fallback) bereithalten.

Werkzeuge zur Bildkomprimierung und -konvertierung

Für die Konvertierung einzelner Bilder sind Werkzeuge mit grafischer Oberfläche praktisch, doch wenn Sie Hunderte von Bildern haben, sind Kommandozeilenwerkzeuge weit effizienter. Mit Open-Source-Tools wie cwebp, avifenc und ImageMagick können Sie eine Stapelkonvertierung durchführen. Um beispielsweise ein Bild in WebP umzuwandeln:

cwebp -q 80 eingabe.jpg -o ausgabe.webp

Hier gibt -q 80 die Qualitätsstufe an. Um ein AVIF zu erzeugen:

avifenc --min 24 --max 30 eingabe.jpg ausgabe.avif

Bei der Stapelkonvertierung können Sie mit einem Skript einen ganzen Ordner auf einen Schlag verarbeiten. Das ist der robusteste Weg, den Prozess der Bildkomprimierung zu automatisieren, und schaltet menschliche Fehler aus.

Mehrere Formate mit dem picture-Tag ausliefern

Damit der Browser automatisch das beste von ihm unterstützte Format auswählt, können Sie das HTML-Element <picture> verwenden. Der Browser wertet die Quellen von oben nach unten aus und lädt das erste Format, das er unterstützt:

<picture>
  <source srcset="produkt.avif" type="image/avif" />
  <source srcset="produkt.webp" type="image/webp" />
  <img src="produkt.jpg" alt="Blaue Keramiktasse" width="800" height="600" />
</picture>

In dieser Struktur erhält ein Browser, der AVIF unterstützt, das AVIF, ein Browser, der nur WebP unterstützt, das WebP, und einer, der keines von beiden unterstützt, das unterste JPEG. Geben Sie die Werte width und height unbedingt an; so reserviert der Browser den Platz, bevor das Bild geladen ist, und verhindert Layout-Verschiebungen.

Korrekte Dimensionierung und responsive Bilder

Einer der häufigsten Fehler bei der Bildoptimierung besteht darin, ein riesiges Bild per CSS zu verkleinern und auf dem Bildschirm klein darzustellen. Der Browser lädt trotzdem die große Datei herunter; Sie quetschen sie lediglich optisch zusammen. Der richtige Ansatz besteht darin, das Bild in der Größe auszuliefern, in der es verwendet wird.

Um an unterschiedliche Bildschirmbreiten Bilder in unterschiedlichen Größen zu senden, verwenden Sie die Attribute srcset und sizes:

<img
  src="banner-800.webp"
  srcset="banner-400.webp 400w, banner-800.webp 800w, banner-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Plakat der Saisonkampagne"
  width="1600"
  height="900"
/>

Hier wählt der Browser anhand der Bildschirmbreite und der Pixeldichte des Nutzers das am besten passende Bild aus. Statt einem mobilen Nutzer das riesige Bild mit 1600 Pixeln zu schicken, liefern Sie ihm die 400-Pixel-Version. Das ist besonders im Hinblick auf die Einsparung mobilen Datenvolumens äußerst wertvoll.

Retina- und Bildschirme mit hoher Pixeldichte

Damit Bilder auf Bildschirmen mit hoher Pixeldichte scharf erscheinen, ist eine Quelle mit der doppelten Anzahl der physischen Pixel erforderlich. Auch diesen Fall können Sie mit srcset steuern. Übertreiben Sie es dennoch nicht; die Dateigröße einer kaum mit bloßem Auge unterscheidbaren Schärfe wegen zu verdoppeln, widerspricht Ihrem Optimierungsziel. In der Praxis reicht eine 2x-Version in den meisten Fällen aus.

Lazy Loading: Bilder nur dann laden, wenn sie gebraucht werden

Lazy Loading, also das verzögerte Laden, bedeutet, das Laden von Bildern, die noch nicht auf dem Bildschirm sichtbar sind, aufzuschieben, bis sich der Nutzer dem betreffenden Bereich nähert. Auf einer langen Seite kann es Dutzende Bilder geben; das Bild ganz unten auf der Seite bekommt der Nutzer aber vielleicht nie zu Gesicht. Dieses Bild von Anfang an herunterzuladen, ist sowohl Verschwendung von Bandbreite als auch von Zeit.

Das integrierte Lazy-Loading-Feature des Browsers

Die einfachste und sicherste Methode ist das integrierte loading-Attribut von HTML:

<img src="galerie-12.webp" alt="Workshop-Arbeit" width="600" height="400" loading="lazy" />

Wenn Sie loading="lazy" hinzufügen, lädt der Browser das Bild nicht herunter, bevor es sich dem Bildschirm nähert. Dieses Attribut wird heute von einer breiten Palette von Browsern unterstützt und benötigt kein JavaScript. Schlicht und wirkungsvoll.

Welche Bilder sollten Sie nicht verzögert laden?

Hier gibt es einen entscheidenden Punkt: Bilder, die beim ersten Laden der Seite auf dem Bildschirm sichtbar sind (insbesondere das LCP-Bild, also das größte Hauptbild), sollten Sie nicht verzögert laden. Andernfalls verzögert der Browser dieses Bild und Ihr LCP-Wert verschlechtert sich. Die Regel ist einfach:

Das Hauptbild, das im ersten Bildschirmbereich (above the fold) sichtbar ist: kein Lazy Loading, priorisieren Sie es sogar.
Bilder weiter unten auf der Seite: mit loading="lazy" verzögern.
Gibt es ein besonders kritisches Hero-Bild, können Sie es mit fetchpriority="high" vorziehen.

Allen Bildern blind Lazy Loading aufzuzwingen, ohne diese Unterscheidung zu treffen, kann die Performance verschlechtern, statt sie zu verbessern.

JavaScript-basierte Lösungen und Platzhalter

In Fällen, in denen die Browser-Unterstützung unzureichend ist oder Sie ein anspruchsvolleres Verhalten wünschen, kommen Lösungen mit der Intersection Observer API zum Einsatz. Mit dieser Methode laden Sie die eigentliche Quelle erst, wenn das Bild in den sichtbaren Bereich gelangt. Zusätzlich können Sie, bis das Bild geladen ist, einen kleinen, unscharfen Platzhalter (Blur-up-Technik) oder eine einfarbige Fläche anzeigen. Das vermittelt dem Nutzer auf positive Weise das Gefühl, dass "etwas geladen wird", und mindert die Sorge vor leeren Flächen.

Layout-Verschiebungen (Layout Shift) vermeiden

Eine oft übersehene, für die Nutzererfahrung aber äußerst kritische Dimension der Bildoptimierung ist, dass Bilder das Seitenlayout nicht durcheinanderbringen. Der Wert Cumulative Layout Shift (CLS) misst, wie stark sich Elemente während des Ladens der Seite verschieben.

Der zuverlässigste Weg, dies zu verhindern, besteht darin, jedem Bild die Attribute width und height zu geben oder per CSS ein aspect-ratio festzulegen. Mit dieser Information reserviert der Browser bereits vor dem Laden des Bildes einen Platz in der richtigen Größe. Wenn das Bild eintrifft, verschiebt sich der Inhalt nicht. In modernem CSS ist folgender Ansatz sehr nützlich:

img {
  max-width: 100%;
  height: auto;
}

Diese Regel sorgt dafür, dass sich das Bild unter Wahrung seines Seitenverhältnisses responsiv verhält. In Kombination mit den Attributen width und height erhalten Sie eine sowohl flexible als auch verschiebungssichere Struktur.

Automatische Optimierung und Integration in den Arbeitsablauf

Die Bildoptimierung bei jedem neuen Bild von Hand vorzunehmen, ist nicht nachhaltig. Der beste Ansatz besteht darin, sie in einen automatischen Prozess zu verwandeln. Dafür gibt es mehrere Möglichkeiten.

Optimierung in der Build-Phase

Viele moderne Website-Build-Werkzeuge optimieren Bilder während des Build-Vorgangs automatisch; sie konvertieren in passende Formate, erzeugen verschiedene Größen und setzen die richtigen Tags ein. Bei diesem Ansatz genügt es, das Bild in den Quellordner zu legen; den Rest erledigt das Werkzeug. Das ist die fehlerärmste und am besten skalierbare Methode.

Bild-CDNs und Konvertierung in Echtzeit

Ein weiterer Ansatz ist die Nutzung eines Content-Delivery-Netzwerks (CDN), das Bilder im Moment der Anfrage konvertiert. Bei diesen Diensten können Sie über Parameter in der URL Breite, Qualität und Format anfordern; das CDN erzeugt dann je nach Browser-Unterstützung AVIF oder WebP und legt es im Cache ab. Für stark frequentierte und bildlastige Websites steigert dies sowohl die Performance als auch die Wartungsfreundlichkeit erheblich.

Manuelle Checkliste

Wenn Sie keinen vollautomatischen Ablauf haben, können Sie für jedes Bild die folgende Checkliste anwenden:

Skalieren Sie das Bild auf die größte Größe, in der es verwendet wird.
Konvertieren Sie es in ein passendes Format (vorzugsweise AVIF oder WebP) und hinterlegen Sie ein Fallback.
Senken Sie die Qualitätsstufe so weit wie möglich, ohne dass die Bildqualität leidet.
Schreiben Sie einen beschreibenden alt-Text.
Fügen Sie Bildern, die nicht im ersten Bildschirmbereich liegen, loading="lazy" hinzu.
Geben Sie die Werte width und height an.

Wenn Sie diese sechs Schritte zur Gewohnheit machen, bleibt die Bildperformance Ihrer Website dauerhaft auf hohem Niveau.

Bilder unter dem Aspekt von SEO und Barrierefreiheit

Bei der Bildoptimierung geht es nicht nur um die Dateigröße; auch für Suchmaschinen und die Barrierefreiheit müssen Bilder korrekt beschrieben werden. Schreiben Sie zu jedem aussagekräftigen Bild einen alt-Text, der den Inhalt wirklich beschreibt. Dieser Text wird von Screenreadern für Nutzer vorgelesen, die das Bild nicht sehen können, und hilft Suchmaschinen, das Bild zu verstehen. Bei rein dekorativen Bildern ist es hingegen richtig, das alt-Attribut leer zu lassen (alt=""), damit Screenreader sie überspringen.

Halten Sie auch die Dateinamen aussagekräftig. Statt IMG_8842.jpg einen beschreibenden Namen wie blaue-keramiktasse.webp zu verwenden, ist sowohl für die Ordnung als auch für die Sichtbarkeit in der Suche von Vorteil. Bei Websites mit vielen großen Bildern erleichtert zudem das Erstellen einer Bild-Sitemap den Suchmaschinen das Auffinden Ihrer Bilder.

Häufige Fehler

Es gibt Fallen, in die selbst erfahrene Teams hin und wieder tappen. Sich dieser bewusst zu sein, schützt Sie vor unnötigen Performance-Verlusten:

Übermäßige Komprimierung: Die Qualität zu stark zu senken, spart Bandbreite, lässt Bilder aber unscharf und mit Artefakten (Bildstörungen) erscheinen. Das Gleichgewicht ist entscheidend.
Eine Größe für alle: Ein einziges riesiges Bild an alle Bildschirme zu senden, bestraft den mobilen Nutzer.
Das LCP-Bild verzögert laden: Das wichtigste Bild zu verzögern, verschlechtert genau den Wert, den Sie messen.
Keine Größenangabe: Ohne width und height verschiebt sich das Layout.
Das Format-Fallback vergessen: AVIF allein auszuliefern, ohne ein Fallback zu hinterlegen, kann in älteren Browsern zum Bildverlust führen.
Animierte GIFs verwenden: Statt großer GIFs sind ein kurzes Video oder ein animiertes WebP/AVIF weitaus leichter.

Diese Fehler durchzugehen und auf Ihrer eigenen Website zu überprüfen, bringt oft mit nur wenigen Stunden Arbeit einen beachtlichen Geschwindigkeitsgewinn.

Häufig gestellte Fragen

Sollte ich WebP oder AVIF verwenden?

Der ideale Ansatz besteht darin, beide gleichzeitig auszuliefern. Definieren Sie mit dem <picture>-Tag zuerst AVIF, dann WebP und zuletzt das JPEG/PNG-Fallback. So erhält jeder Browser das effizienteste von ihm unterstützte Format. AVIF erzeugt in der Regel kleinere Dateien, doch die Unterstützung von WebP ist weiter verbreitet und seine Kodierung schneller. Beide gemeinsam zu verwenden, garantiert sowohl die beste Performance als auch die größtmögliche Kompatibilität.

Schadet Lazy Loading dem SEO?

Nein, richtig angewendet schadet es nicht; im Gegenteil, es trägt durch die Erhöhung der Seitengeschwindigkeit zum SEO bei. Wichtig ist, die kritischen Bilder, die im ersten Bildschirmbereich sichtbar sind, nicht verzögert zu laden und dafür zu sorgen, dass Suchmaschinen die Bilder dennoch entdecken können. Das integrierte loading="lazy"-Attribut von HTML ist in dieser Hinsicht sicher, und moderne Suchmaschinen verarbeiten es problemlos.

Wie stark senkt Bildkomprimierung die Qualität?

Das hängt ganz von der Qualitätseinstellung ab, die Sie wählen. Bei verlustbehafteter Komprimierung senkt ein Qualitätswert zwischen 75 und 85 in der Regel die Dateigröße erheblich, mit einem so geringen Verlust, dass er mit bloßem Auge nicht wahrnehmbar ist. Gehen Sie auf sehr aggressive Werte herunter, werden Störungen in den Farbverläufen sichtbar. Die beste Methode ist, mit mehreren verschiedenen Qualitätswerten zu experimentieren und sie optisch zu vergleichen. Der ideale Wert kann für Fotos und Grafiken unterschiedlich sein.

Sollte ich alle meine Bilder in WebP umwandeln?

In den meisten Fällen ja, aber mit Bedacht. Fotos und große Bilder profitieren am meisten von WebP oder AVIF. Für sehr kleine Symbole ist SVG in der Regel die sinnvollere Wahl, denn dank seiner vektoriellen Struktur bleibt es in jeder Größe scharf und ist meist kleiner. Treffen Sie die Formatentscheidung also nach der Art des Bildes; zwingen Sie nicht ein einziges Format allem auf.

Muss ich meinen Bildern unbedingt width und height hinzufügen?

Ja, das ist eine starke Empfehlung. Dank der Attribute width und height kennt der Browser den für das Bild zu reservierenden Platz bereits vor dem Laden, und der Inhalt verschiebt sich während des Ladens der Seite nicht. Das verbessert den Wert Cumulative Layout Shift und korrigiert die Nutzererfahrung sichtbar. Es widerspricht nicht dem responsiven Design; in Kombination mit der CSS-Regel height: auto wahrt das Bild sowohl sein Seitenverhältnis als auch stabilisiert es das Layout.

Wie optimiere ich meine animierten GIFs?

Animierte GIFs sind in der Regel sehr große Dateien und im Vergleich zu modernen Alternativen äußerst ineffizient. Die beste Lösung ist, sie in ein kurzes Videoformat oder eine animierte WebP/AVIF-Datei umzuwandeln. Diese Umwandlung senkt die Dateigröße meist erheblich und liefert denselben visuellen Effekt mit weit weniger Daten. Für kurze, automatisch abgespielte Videos wählen Sie die Einstellungen stumm und in Schleife.

Fazit

Die Bildoptimierung ist eine der seltenen Techniken, die mit vergleichsweise wenig Aufwand große Gewinne bringen. Das richtige Format zu wählen, Bilder in der Größe auszuliefern, in der sie verwendet werden, moderne Komprimierung anzuwenden und Bilder nur dann zu laden, wenn sie gebraucht werden – wenn diese vier Grundprinzipien zusammenkommen, verbessern sich die Geschwindigkeit, die Nutzererfahrung und die Sichtbarkeit Ihrer Website in der Suche allesamt gemeinsam.

Beginnen Sie mit Ihren größten und am häufigsten angezeigten Bildern; denn sie bringen den höchsten Ertrag. Liefern Sie AVIF und WebP zusammen mit einem Fallback aus, wenden Sie auf Bilder außerhalb des ersten Bildschirmbereichs Lazy Loading an und versehen Sie jedes Bild mit Größenangaben und einem aussagekräftigen alt-Text. Automatisieren Sie diesen Prozess überall dort, wo es möglich ist, damit die Qualität dauerhaft erhalten bleibt.

Denken Sie daran: Performance ist keine einmalige Aufgabe, sondern eine Gewohnheit, die kontinuierliche Pflege erfordert. Indem Sie bei jedem neuen Bild, das Sie hinzufügen, die Checkliste aus diesem Leitfaden anwenden, halten Sie Ihre Website leicht, schnell und nutzerfreundlich. Die kleinen Schritte, die Sie heute gehen, verwandeln sich für Ihre Besucher in eine flüssigere Erfahrung und für Sie in eine stärkere digitale Präsenz.