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

Das richtige Format

• JPEG: Fotos, weit verbreitet.
• WebP und AVIF: Moderne Formate mit kleineren Dateien bei gleicher Qualität.
• PNG: Grafiken mit Transparenz und scharfen Kanten.
• SVG: Logos und Icons, beliebig skalierbar.

Die richtige Größe

Ein Bild sollte nie größer sein als die Fläche, auf der es angezeigt wird. Ein 4000-Pixel-Foto in einem 600-Pixel-Feld verschwendet Daten. Nutzen Sie mehrere Größen für verschiedene Bildschirme.

Kompression

Moderate Kompression ist meist nicht sichtbar, spart aber viel Platz. Prüfen Sie das Ergebnis am Bildschirm.

Verzögertes Laden

Bilder unterhalb des sichtbaren Bereichs können nachgeladen werden (Lazy Loading). Das Hauptbild oben sollte dagegen sofort laden.

Zusätzlich

• Feste Maße angeben, damit das Layout nicht springt
• Sprechende Dateinamen und Alt-Texte
• Echte Bilder statt austauschbarer Stockfotos, wo es möglich ist

Praxisbeispiel: Ein Titelbild verschlankt

Angenommen, das Titelbild einer Startseite ist ein Foto direkt aus der Kamera: 6000 Pixel breit, mehrere Megabyte groß. Angezeigt wird es auf maximal etwa 1600 Pixel Breite. Schritt eins: auf die benötigte Breite verkleinern. Schritt zwei: in ein modernes Format wie WebP oder AVIF umwandeln. Schritt drei: moderat komprimieren und das Ergebnis am Bildschirm vergleichen. In der Regel schrumpft die Datei dadurch auf einen Bruchteil, ohne dass der Unterschied auffällt. Für kleinere Bildschirme liefern Sie zusätzlich eine schmalere Fassung aus, die der Browser selbst wählt.

Entscheidungshilfe: Welches Format wann?

• Foto mit Verläufen: WebP oder AVIF, als Rückfall JPEG.
• Logo, Piktogramm, einfache Illustration: SVG, weil es scharf bleibt und winzig ist.
• Screenshot mit Text und feinen Linien: PNG oder verlustfreies WebP, damit nichts verwaschen wirkt.
• Foto mit Transparenz: WebP oder PNG, je nach Dateigröße.

Typische Fehler

• Lazy Loading für das Hauptbild: Das oberste große Bild sollte sofort geladen werden. Verzögert man es, verschlechtert sich meist die gefühlte Ladezeit, besonders der Wert „Largest Contentful Paint“.
• Mehrfach komprimieren: Wer ein JPEG immer wieder neu speichert, verliert jedes Mal Qualität. Arbeiten Sie vom Original aus.
• Fehlende Maße: Ohne Breite und Höhe im Code springt der Text, sobald das Bild geladen ist.
• Wichtige Informationen im Bild: Öffnungszeiten oder Preise gehören als Text auf die Seite, nicht in ein Foto.

Mythos gegen Fakt

Mythos: Je höher die Auflösung, desto besser sieht es aus. Fakt: Über die Anzeigegröße hinaus bringt zusätzliche Auflösung nichts, außer für sehr hochauflösende Bildschirme, für die etwa die doppelte Pixelzahl sinnvoll sein kann. Darüber hinaus kostet sie nur Ladezeit.

Prüfen

Öffnen Sie in den Entwicklerwerkzeugen des Browsers den Reiter „Netzwerk“, filtern Sie nach Bildern und sortieren Sie nach Größe. Die größten Dateien zuerst anzugehen, bringt meist am meisten. Ergänzend eignen sich Messwerkzeuge von Google, wie sie bei Core Web Vitals beschrieben sind.

Ein Ablauf für die Redaktion

Damit die Optimierung nicht bei jedem neuen Beitrag neu erfunden wird, hilft ein fester Ablauf. Original behalten und nie überschreiben. Auf die größte benötigte Anzeigebreite verkleinern. In WebP oder AVIF exportieren, bei Bedarf zusätzlich eine kleinere Fassung für Handys. Dateinamen sprechend wählen, zum Beispiel „heizungsbau-stuttgart-team.webp“ statt „IMG_4821“. Alternativtext schreiben, der beschreibt, was zu sehen ist. Zum Schluss die Dateigröße prüfen: Für ein Bild im Inhalt sind schon wenige Hundert Kilobyte oft ein sinnvolles Ziel, ein großes Titelbild darf mehr haben. Diese Richtwerte hängen vom Motiv ab, entscheidend ist der Vergleich am Bildschirm.

Siehe auch Core Web Vitals.