Auf den meisten Websites machen Bilder den größten Teil der Datenmenge aus. Ein einziges unbearbeitetes Handyfoto kann mehr wiegen als der gesamte restliche Code. Mit ein paar Regeln lädt deine Seite deutlich schneller – ohne dass die Bilder schlechter aussehen.

Das richtige Format

AVIF und WebP: Moderne Formate, die bei gleicher Qualität deutlich kleiner sind als JPEG. Alle aktuellen Browser unterstützen sie.
JPEG: Der Klassiker für Fotos. Als Rückfalloption weiterhin sinnvoll.
PNG: Für Grafiken mit Transparenz oder harten Kanten – für Fotos meist viel zu groß.
SVG: Für Logos und Icons. Vektorgrafiken bleiben in jeder Größe scharf und sind oft nur wenige Kilobyte groß.

Die richtige Größe

Ein Bild sollte nicht größer ausgeliefert werden, als es angezeigt wird. Wird ein Foto in einer 600 Pixel breiten Spalte dargestellt, braucht es keine 4000 Pixel. Damit es auf hochauflösenden Displays trotzdem scharf bleibt, stellt man mehrere Größen bereit, und der Browser wählt passend aus – im HTML über die Attribute srcset und sizes.

Gute Systeme erledigen das automatisch: Beim Erstellen der Website werden aus einem Originalbild mehrere Größen in modernen Formaten erzeugt.

Breite und Höhe angeben

Fehlen Breite und Höhe, weiß der Browser beim Laden nicht, wie viel Platz das Bild braucht. Der Text springt dann nach unten, sobald das Bild erscheint. Google misst dieses Verrutschen als CLS (Cumulative Layout Shift). Mit festen Maßen reserviert der Browser den Platz von Anfang an.

Lazy Loading – aber nicht überall

Bilder weiter unten auf der Seite sollten erst geladen werden, wenn Besucher in ihre Nähe scrollen (loading="lazy"). Das spart Datenvolumen. Das wichtigste Bild ganz oben, etwa das große Titelbild, sollte dagegen sofort geladen werden. Wird es verzögert, verschlechtert sich die Ladezeit, die Google als LCP misst.

Gute Alt-Texte

Der Alternativtext beschreibt, was auf einem Bild zu sehen ist. Screenreader lesen ihn vor, und Suchmaschinen verstehen dadurch deine Bilder.

Beschreiben, nicht aufzählen: „Malerin streicht eine Altbaufassade in Hellgrau“ statt „Maler, Malerbetrieb, Fassade, streichen“.
Kurz halten: Ein Satz genügt meistens.
Dekorative Bilder wie Hintergrundmuster bekommen einen leeren Alt-Text (alt=""), damit Screenreader sie überspringen.

Prüfen, wo es hakt

Unser kostenloser Website-Check zeigt dir fehlende Alt-Texte, zu große Bilder und die Ladezeit-Werte von Google auf einen Blick. Wenn du die Bilder deiner Website optimieren lassen möchtest, sprich uns gern an.