Bilder für die Website optimieren: Formate, Größen, Ladezeit

Kurz gesagt: Die meisten Bilder auf kleinen Websites sind zu groß, im falschen Format und werden alle auf einmal geladen. Ein fester Ablauf behebt das: Bilder auf die tatsächlich benötigte Größe bringen, moderne Formate wie WebP oder AVIF mit Rückfalloption nutzen, sinnvoll komprimieren, per srcset mehrere Größen anbieten, Breite und Höhe angeben und nur Bilder außerhalb des sichtbaren Bereichs verzögert laden. Das wichtigste Bild oben auf der Seite wird dabei bewusst nicht verzögert.

Warum Bilder so viel ausmachen

Bilder sind auf den meisten Seiten der größte Brocken. web.dev nennt in seinem Artikel zum Lazy Loading, dass Bilder in der Regel mehr Bandbreite verbrauchen als jede andere Ressource und Websites im 90. Perzentil über 5 MB an Bildern ausliefern, auf Desktop und Mobilgeräten.

Ein typisches Beispiel: Ein Handyfoto mit 4.000 Pixeln Breite und mehreren Megabyte wird in einem Kasten angezeigt, der auf dem Handy 400 Pixel breit ist. Der Browser lädt also ein Vielfaches dessen, was er braucht.

Der folgende Ablauf funktioniert unabhängig davon, ob Ihre Website mit WordPress, einem Baukasten oder individuell gebaut ist. Manche Schritte erledigt Ihr System bereits automatisch, das prüfen Sie jeweils kurz.

Schritt 1: Bestandsaufnahme

Öffnen Sie Ihre wichtigsten Seiten, also Startseite, eine Leistungs- oder Produktseite und eine Galerie, in den Entwicklertools des Browsers. Im Netzwerk-Tab filtern Sie nach Bildern und sortieren nach Größe.

Notieren Sie:

die fünf schwersten Bilder pro Seite,
ihre Dateigröße,
ihre Pixelmaße im Vergleich zur angezeigten Größe,
das Format (JPEG, PNG, WebP, AVIF).

Ein PNG-Foto mit mehreren Megabyte ist der klassische Fund. PNG eignet sich für Grafiken mit Transparenz und klaren Kanten, für Fotos ist es meist das falsche Format.

Schritt 2: Auf die richtige Größe bringen

Die Faustregel: Ein Bild sollte nicht deutlich breiter sein als der größte Platz, den es auf der Seite einnimmt, mal Faktor zwei für hochauflösende Bildschirme. Ein Bild in einer Inhaltsspalte von 800 Pixeln braucht also selten mehr als 1.600 Pixel Breite.

Legen Sie für Ihre Website wenige feste Größen fest, zum Beispiel:

Titelbild über die ganze Breite: 2.000 Pixel
Inhaltsbilder: 1.600 Pixel
Vorschaubilder in Rastern: 800 Pixel

Die Originale bewahren Sie getrennt auf. Hochgeladen werden nur die verkleinerten Versionen, falls Ihr System nicht automatisch skaliert.

Schritt 3: Modernes Format wählen

WebP und AVIF

WebP und AVIF erzeugen bei vergleichbarer Qualität meist deutlich kleinere Dateien als JPEG und PNG. web.dev beschreibt AVIF als Format auf Basis des AV1-Videocodecs, das in Chrome seit 2020, in Firefox seit 2021 und in Safari seit 2022 unterstützt wird. Beide Formate können Transparenz und Animation.

Mit Rückfalloption ausliefern

web.dev weist darauf hin, dass neue Formate zwar in modernen Browsern gut unterstützt werden, dies im gesamten Web aber keine Selbstverständlichkeit ist. Deshalb werden sie üblicherweise mit einer Rückfalloption ausgeliefert. Das HTML-Element <picture> erlaubt laut MDN mehrere <source>-Einträge, aus denen der Browser die erste passende Quelle wählt:

<picture>
  <source srcset="werkstatt.avif" type="image/avif">
  <source srcset="werkstatt.webp" type="image/webp">
  <img src="werkstatt.jpg" alt="Blick in die Werkstatt" width="1600" height="1067">
</picture>

Viele Content-Management-Systeme, Bild-Plugins und Bild-CDNs erledigen diese Umwandlung automatisch. Prüfen Sie im Netzwerk-Tab, welches Format tatsächlich ankommt.

Schritt 4: Sinnvoll komprimieren

Jedes verlustbehaftete Format hat eine Qualitätsstufe. Die richtige Einstellung finden Sie am schnellsten durch einen Vergleich: dasselbe Bild in mehreren Qualitätsstufen exportieren und nebeneinander in Originalgröße betrachten. Wählen Sie die niedrigste Stufe, bei der Sie keinen Unterschied sehen.

Achten Sie besonders auf:

Hauttöne und Verläufe im Himmel, wo Kompressionsartefakte zuerst auffallen,
feine Strukturen wie Holzmaserung oder Stoff,
Texte in Bildern, die besser gar nicht in Bildern stehen sollten.

Ein Werkzeug wie Squoosh, das web.dev in diesem Zusammenhang erwähnt, zeigt Original und komprimierte Fassung direkt nebeneinander.

Schritt 5: Mehrere Größen mit srcset anbieten

Ein Handy braucht ein kleineres Bild als ein großer Monitor. Mit den Attributen srcset und sizes geben Sie dem Browser laut MDN mehrere Bildquellen und einen Hinweis, wie breit das Bild angezeigt wird. Der Browser wählt dann selbst die passende Datei:

<img srcset="team-800.jpg 800w, team-1600.jpg 1600w"
     sizes="(width <= 600px) 100vw, 800px"
     src="team-1600.jpg" alt="Unser Team vor dem Laden"
     width="1600" height="1067">

MDN hält fest, dass srcset, sizes und <picture> in modernen Desktop- und Mobilbrowsern unterstützt werden. WordPress und viele Baukästen erzeugen solche Varianten beim Hochladen automatisch. Prüfen Sie im Quelltext, ob das srcset-Attribut vorhanden ist.

Schritt 6: Platz reservieren und klug laden

Breite und Höhe angeben

web.dev empfiehlt, bei Bildern immer die Attribute width und height anzugeben oder den Platz per CSS aspect-ratio zu reservieren. So kann der Browser den Platz zuweisen, bevor das Bild geladen ist, und der Text springt nicht nach unten, wenn das Bild erscheint. Diese Sprünge misst Google als Cumulative Layout Shift.

Lazy Loading für alles unterhalb des sichtbaren Bereichs

Mit loading="lazy" lädt der Browser ein Bild laut web.dev erst, wenn es einen bestimmten Abstand zum sichtbaren Bereich erreicht. Für Galerien, lange Seiten und Bilder im unteren Teil ist das ideal.

Aber nicht für das wichtigste Bild

web.dev warnt ausdrücklich davor, Bilder per Lazy Loading zu laden, die beim Seitenaufruf wahrscheinlich sichtbar sind, insbesondere das größte Element im sichtbaren Bereich, das sogenannte LCP-Bild. Für dieses Bild empfiehlt web.dev stattdessen, die Priorität mit fetchpriority="high" zu erhöhen. Auf den meisten kleinen Websites ist das das Titelbild oben auf der Startseite.

Zum Abschluss: neu messen

Wiederholen Sie die Bestandsaufnahme aus Schritt 1 und vergleichen Sie Gesamtgröße der Bilder und Ladezeit. Prüfen Sie die Seite außerdem auf einem echten Handy im Mobilfunknetz, nicht nur im Büro-WLAN.

Häufige Fragen

Soll ich alle Bilder nur noch als AVIF ausliefern?

Mit Rückfalloption ja, gern. Ohne Rückfalloption riskieren Sie, dass ältere Browser nichts anzeigen. Wenn Ihr System nur WebP unterstützt, ist das bereits ein großer Schritt.

Brauche ich ein Bild-Plugin oder ein Bild-CDN?

Für eine kleine Website reicht oft ein sauberer Ablauf beim Hochladen. Ab vielen Bildern oder häufigen Änderungen spart eine automatische Lösung viel Handarbeit.

Verliere ich durch Kompression Qualität bei Google?

Nicht, wenn die Bilder scharf und ansehnlich bleiben. Ein schnell geladenes, gut aussehendes Bild ist für Besucher und Suchmaschinen besser als ein riesiges Original.

Was ist mit Logos und Icons?

Logos und Icons sind oft als SVG am besten aufgehoben. Sie bleiben in jeder Größe scharf und sind meist sehr klein.

Wenn Sie Ihre Bilder einmal gründlich entrümpeln möchten, gehe ich den Ablauf gern mit Ihnen an Ihrer Website durch: zur Anfrage.