Bilder für das Web optimieren: WebP, AVIF und Lazy Loading

Bilder machen auf den meisten Websites den mit Abstand größten Teil des Datenvolumens aus – oft mehr als die Hälfte der gesamten Seitengröße. Genau deshalb ist die Bildoptimierung der wirkungsvollste Einzelhebel, um eine Website schneller zu machen. Wer hier konsequent arbeitet, verbessert nicht nur die Ladezeit, sondern direkt auch den Largest Contentful Paint und damit ein zentrales Core-Web-Vital. Dieser Artikel zeigt dir Schritt für Schritt, wie du Bilder fürs Web richtig aufbereitest.

Die richtige Formatwahl: JPEG, PNG, WebP, AVIF

Das richtige Dateiformat entscheidet über einen großen Teil der erreichbaren Einsparung. Ein Überblick:

• JPEG: der Klassiker für Fotos. Verlustbehaftete Kompression, gut unterstützt, aber technisch veraltet. Für reine Kompatibilität noch brauchbar, sonst überholt.
• PNG: verlustfrei, unterstützt Transparenz. Ideal für Logos, Icons und Grafiken mit scharfen Kanten, aber bei Fotos unnötig groß.
• WebP: das moderne Allround-Format von Google. Liefert bei vergleichbarer Qualität rund 25–35 % kleinere Dateien als JPEG, unterstützt Transparenz und Animationen. Wird von allen aktuellen Browsern unterstützt.
• AVIF: das derzeit effizienteste Format, basierend auf dem AV1-Videocodec. Komprimiert noch besser als WebP, besonders bei niedrigen Dateigrößen. Die Browser-Unterstützung ist inzwischen breit, das Encoding kann aber rechenintensiver sein.

Die praktische Empfehlung lautet: Setze auf WebP als Standard und biete AVIF zusätzlich für Browser an, die es unterstützen. Den Fallback regelst du elegant über das <picture>-Element, das gleich vorgestellt wird. Für Logos und Icons mit scharfen Kanten bleibt PNG oder – noch besser – das vektorbasierte SVG die richtige Wahl, weil es bei jeder Größe gestochen scharf bleibt.

Bilder richtig komprimieren

Format allein reicht nicht – die Kompressionsstärke macht den Unterschied. Bei verlustbehafteten Formaten wie JPEG, WebP und AVIF steuerst du über einen Qualitätswert, wie stark komprimiert wird. Die Kunst liegt darin, den Punkt zu finden, an dem die Datei klein ist, aber für das menschliche Auge noch makellos aussieht. Für Fotos liegt dieser Sweet Spot meist bei einem Qualitätswert um die 75–85.

Ein häufiger Fehler ist es, riesige Originalbilder direkt aus der Kamera oder von einer Bilddatenbank hochzuladen. Ein 6000 Pixel breites Foto, das auf der Seite nur 800 Pixel breit dargestellt wird, verschwendet enorm viel Bandbreite. Skaliere Bilder immer auf die tatsächlich benötigte Darstellungsgröße, bevor du sie komprimierst.

Wenn du Bilder schnell und ohne Software-Installation verkleinern willst, hilft dir unser Bild-Komprimieren-Tool direkt im Browser. Die Bilder werden lokal verarbeitet und verlassen nicht deinen Rechner. Auch der Bildgröße-ändern-Helfer ist nützlich, um Bilder vor dem Upload auf die richtige Pixelbreite zu bringen.

Responsive Bilder mit srcset und sizes

Ein Bild, das auf einem großen Desktop-Monitor scharf aussehen soll, ist auf einem Smartphone unnötig groß. Die Lösung sind responsive Bilder: Du stellst mehrere Auflösungen bereit, und der Browser wählt je nach Bildschirm und Pixeldichte die passende aus.

Technisch funktioniert das über das srcset-Attribut, in dem du verschiedene Bildvarianten mit ihrer jeweiligen Breite angibst, und das sizes-Attribut, das dem Browser sagt, wie breit das Bild im Layout dargestellt wird. So lädt ein iPhone eine kleine, ein 4K-Monitor eine große Variante – jeweils ohne verschwendete Bytes.

Brauchst du zusätzlich verschiedene Formate mit Fallback, kommt das <picture>-Element ins Spiel. Es enthält mehrere <source>-Elemente, etwa eines für AVIF und eines für WebP, plus ein klassisches <img> als letzte Rückfallebene. Der Browser arbeitet die Quellen von oben nach unten ab und nimmt die erste, die er unterstützt.

Lazy Loading: nur laden, was sichtbar ist

Lazy Loading verzögert das Laden von Bildern, bis der Nutzer in ihre Nähe scrollt. Bei langen Seiten mit vielen Bildern spart das beim ersten Aufruf enorm viel Bandbreite und beschleunigt das Rendern spürbar. Seit einigen Jahren geht das ganz ohne JavaScript, einfach über das Attribut loading="lazy" am Bild.

Eine wichtige Ausnahme: Das wichtigste Bild im sichtbaren Bereich – typischerweise das Hero-Bild – solltest du nicht lazy laden. Es ist meist das LCP-Element, und wenn der Browser es erst später lädt, verschlechterst du genau die Metrik, die du verbessern willst. Für dieses eine Bild ist loading="eager" und gegebenenfalls fetchpriority="high" die richtige Wahl, damit der Browser es bevorzugt behandelt.

Layout-Stabilität: feste Abmessungen angeben

Bilder ohne angegebene Abmessungen sind eine der Hauptursachen für Layout-Sprünge (Cumulative Layout Shift). Lädt ein Bild erst, nachdem der umgebende Text schon dargestellt ist, schiebt es plötzlich alles nach unten – ein Ärgernis, das Google mit einem schlechten CLS-Wert bestraft.

Die Lösung ist simpel: Gib jedem Bild die Attribute width und height mit. Der Browser berechnet daraus das Seitenverhältnis und reserviert den Platz, bevor das Bild geladen ist. Bei responsiven Layouts kannst du zusätzlich per CSS mit aspect-ratio arbeiten. So bleibt das Layout stabil, egal wann das Bild eintrifft. Den passenden Wert berechnest du schnell mit unserem Seitenverhältnis-Rechner.

Weitere Optimierungen

• Metadaten entfernen: Kameras speichern EXIF-Daten (Aufnahmeort, Gerät, Datum) im Bild. Diese sind fürs Web meist überflüssig und vergrößern die Datei. Gute Komprimierungs-Tools entfernen sie automatisch.
• CDN nutzen: Ein Content Delivery Network liefert Bilder von einem Server in der Nähe des Nutzers aus und reduziert so die Latenz. Viele CDNs bieten zusätzlich automatische Format- und Größenanpassung an.
• Preloading für kritische Bilder: Mit <link rel="preload" as="image"> kannst du dem Browser signalisieren, ein wichtiges Bild besonders früh zu laden.
• Sprites und Icon-Fonts vermeiden: Für Icons ist heute SVG meist die bessere, skalierbare und kleinere Lösung.

Ein praktischer Bild-Workflow

1. Bild auf die maximal benötigte Darstellungsbreite skalieren.
2. In WebP (und optional AVIF) konvertieren, Qualität auf etwa 80 setzen.
3. Mehrere Größen für srcset erzeugen, wenn das Bild responsiv dargestellt wird.
4. width und height im HTML angeben, um Layout-Sprünge zu vermeiden.
5. Bilder unterhalb der Falz mit loading="lazy" versehen, das Hero-Bild nicht.
6. Ergebnis mit Lighthouse oder PageSpeed Insights prüfen.

Wenn du die Wirkung der Bildoptimierung auf die Kennzahlen verstehen willst, lies unseren Artikel zu den Core Web Vitals. Für den größeren Zusammenhang lohnt der Blick auf unseren Guide zur Ladezeit-Optimierung. Weitere Bild- und Design-Helfer findest du im Webtools-Bereich.

Häufige Fragen

WebP oder AVIF – was soll ich nehmen?

Am besten beide. Nutze AVIF als erste Quelle für die beste Kompression und WebP als breit unterstützten Fallback, gesteuert über das <picture>-Element. Wenn du dich für nur ein Format entscheiden musst, ist WebP die sicherste Wahl mit nahezu universeller Unterstützung.

Verschlechtert Komprimierung die Bildqualität sichtbar?

Bei moderaten Qualitätswerten (um die 80) ist der Unterschied für das menschliche Auge in der Regel nicht erkennbar, während die Dateigröße drastisch sinkt. Erst bei sehr niedrigen Werten treten sichtbare Artefakte auf. Teste verschiedene Stufen und wähle den niedrigsten Wert ohne sichtbaren Qualitätsverlust.

Soll ich alle Bilder lazy laden?

Nein. Bilder im sofort sichtbaren Bereich – vor allem das Hero-Bild als LCP-Element – sollten eager geladen werden. Lazy Loading ist für Bilder unterhalb der Falz gedacht, die der Nutzer erst beim Scrollen erreicht.

Brauche ich überhaupt responsive Bilder, wenn die Seite ohnehin schnell ist?

Responsive Bilder sparen besonders mobilen Nutzern mit begrenztem Datenvolumen Bandbreite und verbessern deren Ladezeit. Da Google mobil-first bewertet, lohnt sich der Aufwand fast immer – gerade bei Seiten mit vielen oder großen Bildern.