Bilder für die Website optimieren: Grösse, Format, Ladezeit

Ein Weingut am Bielersee hat eine neue Website. Oben ein grosses Bild der Rebberge im Herbstlicht, darunter die Weine, jeder mit Flaschenfoto, und eine Galerie vom Hoffest. Auf dem Computer im Büro sieht alles schön aus. Auf dem Telefon, unterwegs im Zug, baut sich die Seite Stück für Stück auf, und der Text springt nach unten, sobald ein Bild fertig geladen ist.

Beides hat mit den Bildern zu tun. Und beides lässt sich mit ein paar Schritten deutlich verbessern, ohne dass die Bilder schlechter aussehen.

Warum Bilder die Ladezeit prägen

Eine verbreitete Kennzahl für die gefühlte Ladezeit einer Seite ist der Largest Contentful Paint (LCP). web.dev, eine Informationsseite von Google für Webentwicklung, beschreibt ihn so: Er misst, wann das grösste Bild, der grösste Textblock oder das grösste Video im sichtbaren Bereich dargestellt ist, gemessen ab dem Aufruf der Seite. Als gut gilt ein Wert von 2,5 Sekunden oder weniger.

Auf einer Seite wie der des Weinguts ist das grösste Element ein Bild — das Bild der Rebberge. Wie schnell dieses eine Bild geladen ist, prägt also den ersten Eindruck.

Die richtige Grösse

Der grösste Hebel ist die Grösse. Ein Foto aus einer aktuellen Kamera ist mehrere tausend Bildpunkte breit; auf einem Telefon erscheint es vielleicht 400 Punkte breit. MDN hält fest, dass es keinen Grund gibt, so grosse Bilder für einen kleinen Bildschirm einzubetten: Das verschwendet Bandbreite, und wer mobil unterwegs ist, möchte kein grosses Bild für den Computer herunterladen, wenn ein kleines genügt.

Dabei ist die Rechnung quadratisch. web.dev weist darauf hin, dass ein Bildschirm mit doppelter Pixeldichte viermal so viele Bildpunkte braucht. Umgekehrt hat ein Bild mit halber Breite nur ein Viertel der Bildpunkte.

Mehrere Fassungen mit srcset und sizes

Weil Telefone, Tablets und Computer unterschiedliche Grössen brauchen, kann eine Website dasselbe Bild in mehreren Fassungen anbieten. MDN beschreibt dafür die Attribute srcset und sizes:

• srcset listet die verfügbaren Fassungen mit ihrer Breite in Bildpunkten auf, etwa eine mit 480 und eine mit 800 Punkten Breite.
• sizes sagt dem Browser, wie breit das Bild bei welcher Bildschirmgrösse dargestellt wird.

Der Browser wählt dann selbst die passende Fassung. Für Bildschirme mit hoher Pixeldichte lassen sich zusätzlich Fassungen mit doppelter Auflösung angeben. Manche Website-Baukästen und Programme für Websites erzeugen solche Fassungen automatisch — ob das geschieht, lohnt sich nachzuprüfen.

Das Format

Für Rasterbilder im Web empfiehlt MDN in erster Linie WebP oder AVIF, mit einer Rückfallebene in JPEG oder PNG für Browser, die diese Formate nicht kennen. MDN nennt als Anhaltspunkt, dass verlustbehaftete WebP-Bilder im Durchschnitt 25 bis 35 Prozent kleiner sind als JPEG-Bilder ähnlicher Qualität. Welches Format für welches Bild passt, beschreibt der Beitrag Welches Bildformat wofür.

Breite und Höhe angeben

Der springende Text hat eine eigene Ursache: Solange ein Bild nicht geladen ist, weiss der Browser nicht, wie viel Platz es braucht. Kommt es an, schiebt es den Rest der Seite nach unten.

MDN beschreibt die Lösung: Werden im HTML Breite und Höhe des Bildes angegeben, kann der Browser das Seitenverhältnis berechnen, bevor das Bild geladen ist, und den nötigen Platz freihalten. Das verringert oder verhindert die Verschiebung — laut MDN ein wichtiger Bestandteil einer guten Nutzererfahrung.

Verzögertes Laden

Die Galerie vom Hoffest liegt weit unten auf der Seite. Wer nur die Weine ansehen will, braucht diese Bilder nicht. Mit dem Attribut loading="lazy" verschiebt der Browser das Laden eines Bildes, bis es sich dem sichtbaren Bereich nähert. MDN beschreibt, dass so Netzwerk und Speicher nicht für Bilder beansprucht werden, bevor einigermassen sicher ist, dass sie gebraucht werden.

Für das grosse Bild ganz oben bringt das Verzögern dagegen wenig: Es ist beim Aufruf ohnehin sichtbar und soll so schnell wie möglich erscheinen. MDN weist zudem darauf hin, dass Breite und Höhe gerade bei verzögert geladenen Bildern wichtig sind.

Alternativtexte

Optimieren heisst auch: Bilder für alle zugänglich machen. Das Attribut alt enthält laut MDN einen Text, der das Bild ersetzen kann — Bildschirmsprachausgaben lesen ihn vor, und er erscheint, wenn ein Bild nicht geladen werden kann. Ein leerer Alternativtext kennzeichnet ein Bild, das nur schmückt. Für die Flaschenfotos des Weinguts genügt ein kurzer Satz wie «Flasche Chasselas 2025 vom Bielersee».

Hintergrundbilder zählen mit

Nicht jedes Bild steht als img im HTML. Manche Websites setzen grosse Bilder als Hintergrund über CSS ein, etwa hinter einem Titel. web.dev führt auch solche Hintergrundbilder unter den Elementen auf, die für den Largest Contentful Paint zählen. Für sie gelten dieselben Regeln: passende Grösse, passendes Format. Nur Breite und Höhe lassen sich dort nicht über Attribute angeben — der Platz wird über die Gestaltung festgelegt.

Messen statt raten

Ob die Änderungen wirken, zeigt eine Messung. web.dev empfiehlt, den Largest Contentful Paint am 75. Perzentil der Seitenaufrufe zu betrachten, getrennt für Mobilgeräte und Computer — also so, dass drei von vier Aufrufen den Wert erreichen. Die Entwicklerwerkzeuge der Browser zeigen ausserdem für jede Seite, welche Bilder geladen werden, wie gross sie sind und wie lange es dauert. Ein Blick darauf vor und nach der Optimierung macht die Wirkung sichtbar.

Metadaten und Aufnahmeort

Fotos aus Kameras und Telefonen enthalten oft Metadaten, manchmal auch den genauen Aufnahmeort. Auf einer Website sind sie überflüssig und machen die Datei grösser. Bei Fotos, die in der eigenen Wohnung entstanden sind, verraten sie zudem die Adresse. Beim Verkleinern lassen sie sich gleich entfernen.

Für das Weingut am Bielersee

Das Weingut geht seine Bilder einmal durch: Das Bild der Rebberge wird in drei Breiten erzeugt und über srcset angeboten, als WebP mit JPEG-Rückfallebene. Alle Bilder erhalten Breite, Höhe und einen Alternativtext, die Galerie wird verzögert geladen, und die Metadaten werden entfernt. Auf dem Telefon im Zug bleibt der Text jetzt stehen, während die Bilder laden.

Die Bild-Werkzeuge, die wir entwickeln, werden Bilder verkleinern, komprimieren, zwischen JPG, PNG, WebP und HEIC umwandeln und von Metadaten befreien — verarbeitet in der Schweiz, im Arbeitsspeicher, ohne dass ein Bild gespeichert bleibt, und im vertraulichen Modus ganz auf dem eigenen Gerät.