Bilder für die Website optimieren: Format, Größe und Ladeverhalten

Kurz zusammengefasst

• Bilder sind oft der schwerste Teil einer Seite. Hier lässt sich am meisten gewinnen.
• Fotos als WebP oder AVIF, Logos und Icons als SVG, Grafiken mit Transparenz als PNG oder WebP.
• Ein Bild sollte nicht deutlich größer sein, als es auf dem Bildschirm dargestellt wird.
• Breite und Höhe im Code verhindern, dass der Text beim Laden nach unten springt.
• Das Attribut loading="lazy" gehört an Bilder weiter unten, nicht an das erste sichtbare Bild.

Warum Bilder so schwer ins Gewicht fallen

Ein Foto vom Handy oder von der Kamera hat oft mehrere Megabyte und weit mehr Bildpunkte, als jeder Bildschirm anzeigen kann. Lädt eine Fotografin ihre Galerie unverändert hoch, überträgt jeder Besucher ein Vielfaches der nötigen Datenmenge. Auf dem Smartphone im Mobilfunknetz ist das spürbar, und die Seite wirkt zäh, obwohl sie gar nicht viel Inhalt hat. Bildpflege ist deshalb für die Ladezeit meist der wirksamste erste Schritt.

Das passende Format

Welches Format sich eignet, hängt vom Motiv ab. Für Fotos ist JPEG der Klassiker, WebP und AVIF liefern bei vergleichbarer Qualität kleinere Dateien. WebP wird von allen gängigen Browsern dargestellt und ist für die meisten Seiten die einfachste Wahl. AVIF komprimiert oft noch besser, die Umwandlung dauert aber länger, und nicht jedes Werkzeug beherrscht es. Wer beides anbieten will, nennt dem Browser in einem picture-Element mehrere Quellen, aus denen er das erste unterstützte Format auswählt. Ein JPEG bleibt dann als Rückfallebene stehen.

Logos, Icons und einfache Zeichnungen sind als SVG am besten aufgehoben. Die Vektorgrafik bleibt in jeder Größe scharf und ist meist winzig. PNG eignet sich für Grafiken mit Transparenz oder viel Text im Bild, ist bei Fotos aber unnötig schwer. Ein Logo als JPEG wirkt dagegen oft verwaschen.

Die passende Größe

Hier geht es um zwei Dinge, die Abmessungen in Bildpunkten und die Dateigröße. Ein Teamfoto in sehr hoher Auflösung, das auf der Seite in einer schmalen Spalte erscheint, verschwendet Datenvolumen. Rechnen Sie mit der größten Darstellung auf der Seite und geben Sie Reserve für hochauflösende Bildschirme dazu, die doppelt so viele Bildpunkte brauchen. Mehr ist selten sinnvoll. Beim Export lässt sich außerdem die Qualitätsstufe wählen. Ein mittlerer Wert reicht meist aus, vergleichen Sie das Ergebnis in der Vergrößerung mit dem Original.

Mehrere Größen anbieten

Mit den Attributen srcset und sizes lässt sich dasselbe Bild in mehreren Breiten bereitstellen. Der Browser sucht sich je nach Bildschirm und Verbindung die passende Variante aus. Ein Smartphone lädt dann die kleine Version, ein großer Monitor die größere. Viele Baukästen und Redaktionssysteme erzeugen solche Varianten selbst, ob sie auch auf der Seite ankommen, sollten Sie im Quelltext kontrollieren.

Breite und Höhe angeben

Ohne Maßangaben weiß der Browser beim Aufbau nicht, wie viel Platz ein Bild braucht. Er lässt zunächst keinen frei, und sobald die Datei geladen ist, rutscht alles darunter nach unten. Wer gerade einen Link anklicken wollte, erwischt einen anderen. Das nennt sich Layout-Sprung und fließt als Cumulative Layout Shift in die Core Web Vitals ein. Die Abhilfe ist einfach: die Attribute width und height mit den echten Maßen des Bildes setzen. Die Darstellung steuert weiter das Stylesheet, doch der Browser kann das Seitenverhältnis sofort berechnen und den Platz reservieren. Das gilt ebenso für eingebettete Videos und Karten. Auf der Speisekarten-Seite eines Restaurants mit vielen Gerichtsfotos macht es den Unterschied zwischen ruhigem Aufbau und hüpfendem Text.

Lazy Loading richtig einsetzen

Mit loading="lazy" lädt der Browser ein Bild erst, wenn es in die Nähe des sichtbaren Bereichs kommt. Das spart bei langen Seiten viel Datenvolumen. Eine Galerie mit Baustellenfotos (mehr dazu unter Baustellenfotos für die Website) oder eine Liste von Referenzen profitiert davon deutlich.

Nicht angewendet werden sollte es auf Bilder im sichtbaren Bereich oben, vor allem nicht auf das große Titelbild. Dort würde das Laden unnötig verzögert, und genau dieses Element beurteilt Google beim Ladegefühl. Das Hauptbild lädt am besten normal, bei Bedarf mit erhöhter Priorität über fetchpriority="high". Hintergrundbilder, die per Stylesheet eingebunden sind, lassen sich mit diesem Attribut nicht steuern.

Sinnvolle Dateinamen

Aus IMG_4821.jpg wird ein Name, der den Inhalt beschreibt, zum Beispiel dachsanierung-satteldach-vorher.jpg. Schreiben Sie klein, trennen Sie Wörter mit Bindestrichen und verzichten Sie auf Leerzeichen, Umlaute und Sonderzeichen. Suchmaschinen lesen den Namen als Hinweis zum Motiv, vor allem aber behalten Sie selbst Ordnung. Wichtiger als der Dateiname ist der Alt-Text, der das Bild für Screenreader und Suchmaschinen beschreibt. Benennen Sie veröffentlichte Dateien nicht ohne Not um, denn sonst brechen bestehende Verweise.

Beachten Sie auch die Metadaten. Handyfotos speichern oft den Aufnahmeort. Bevor Fotos von Privatgrundstücken oder Kundenprojekten auf die Seite kommen, sollten diese Angaben entfernt werden. Die meisten Exportfunktionen bieten das an.

Typische Fehler

• Das Original hochladen und per Stylesheet verkleinern. Die Datei bleibt schwer, nur die Darstellung schrumpft.
• Text als Bild einbinden, etwa Öffnungszeiten oder Preise. Das ist für Screenreader unlesbar und lässt sich nicht kopieren.
• Slider mit vielen großen Bildern, von denen nur eines sichtbar ist.
• Jedes Bild mit loading="lazy" versehen, auch das Titelbild.
• Fotos in einem Online-Werkzeug verkleinern, ohne zu bedenken, dass die Dateien dabei hochgeladen werden. Bei Kundenfotos ist lokale Software die bessere Wahl.

Ein einfacher Ablauf

Wählen Sie zuerst die Bilder aus und schneiden Sie sie auf den gewünschten Ausschnitt zu. Exportieren Sie dann in der benötigten Breite, mit WebP oder AVIF als Format, und vergeben Sie einen sprechenden Namen. Schreiben Sie einen Alt-Text, tragen Sie Breite und Höhe ein und prüfen Sie anschließend auf Smartphone und Desktop, ob alles wie gewünscht erscheint.

Nachmessen

Der kostenlose Ladezeit-Check zählt die Bilder im ausgelieferten HTML und meldet, wie viele keine Angaben zu Breite und Höhe haben, wie viele als JPG, PNG oder GIF eingebunden sind und ob bei mehr als vier Bildern keines verzögert lädt. Er wertet dafür das src-Attribut der img-Elemente aus. Ein JPEG, das als Rückfallebene in einem picture-Element steht, zählt deshalb mit, und Bilder aus Stylesheets oder Skripten sieht er nicht. Wie schwer die Dateien tatsächlich sind, zeigt der Netzwerk-Reiter in den Entwicklerwerkzeugen des Browsers (F12).

Für eine Website von Bemuar genügen neue Fotos als Anhang einer E-Mail oder WhatsApp-Nachricht, eingebaut werden sie bei Bemuar (Website-Pflege).