Responsive Bilder für eine schnelle Website

Ein Foto aus der Kamera kann mehrere Megabyte groß sein. Auf einem schmalen Bildschirm wird oft nur ein Bruchteil dieser Auflösung benötigt.

Passen Sie Größe und Format an

Exportieren Sie Varianten für die tatsächlichen Anzeigegrößen oder verwenden Sie eine Bildpipeline, die sie bereitstellt. Moderne Formate wie WebP können helfen, ohne dass jedes Bild sichtbar schlechter wird. Schauen Sie sich das Ergebnis auf echten Geräten an; Logos und Textgrafiken haben andere Anforderungen als Fotos. Ein Bild mit 3000 Pixeln Breite sollte nicht ungeprüft als kleines Kartenbild ausgeliefert werden. Legen Sie Höhe und Breite fest, damit die Seite beim Laden nicht springt.

Priorisieren Sie das erste Bild

Das große Bild im sichtbaren Startbereich trägt oft zum wahrgenommenen Laden bei. Es sollte rechtzeitig geladen werden. Bilder weiter unten dürfen später kommen, wenn das sinnvoll umgesetzt ist. Eine falsche Lazy-Loading-Regel auf dem wichtigsten Hero-Bild kann die erste Ansicht verzögern. Prüfen Sie außerdem, ob mobile Ausschnitte das Motiv noch verständlich zeigen. Ein gutes Bild unterstützt die Aussage der Seite; ein dekoratives Foto ohne Bezug kostet Platz und Ladezeit.

Sehen Sie auf Nutzerwirkung

Messen Sie nicht nur Dateigröße, sondern betrachten Sie die gesamte Seite: Wann erscheint die Überschrift, wann ist das Bild stabil, wann lässt sich der Kontaktknopf bedienen? Ein stark komprimiertes Foto, das wichtige Details unkenntlich macht, ist ebenfalls keine gute Lösung. Arbeiten Sie Seite für Seite, beginnend bei den wichtigsten Einstiegspunkten. Wenn Bilder zugleich gut beschriftet und in passenden Text eingebettet sind, verbessern Sie Orientierung und Zugänglichkeit zusammen.

Ein Hero-Bild mit Priorität

Eine Startseite lädt ein 4-Megabyte-Foto für einen Bereich von 400 Pixeln Breite. Auf einem Smartphone erscheint erst lange Weißraum. Exportieren Sie passende Varianten und prüfen Sie, welches Bild wirklich im ersten Bildschirm sichtbar ist. Dieses Bild kann früh geladen werden; die Galerie darunter darf später folgen. Reservieren Sie feste Abmessungen, damit die Überschrift nicht springt. Testen Sie das Motiv nach dem Zuschnitt: Ist der Mensch oder Gegenstand noch erkennbar? Die beste technische Variante unterstützt die Botschaft, statt nur einen Laborwert zu verbessern.

Weiterlesen: Google: Crawling und Indexierung