Vorschaubilder von Webseiten einbinden: HTML, Größen, Lazy Loading

<a href="https://example.org/">
  <img src="/thumbs/example-org-400.webp"
       width="400" height="300"
       alt="Startseite von example.org"
       loading="lazy">
</a>

Warum brauchen Vorschaubilder width und height?

Die Attribute width und height verhindern Layoutsprünge beim Laden von Bildern. Der Browser berechnet aus ihnen das Seitenverhältnis, bevor das Bild geladen ist. Mit diesem Verhältnis reserviert er den Platz. So verringert oder verhindert er eine Layoutverschiebung, wenn das Bild eintrifft. Beide Werte sind ganze Zahlen ohne Einheit (Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img, Stand: Oktober 2026).

Web.dev empfiehlt, für Bilder und Videos immer width und height anzugeben. Alternativ reserviert die CSS-Eigenschaft aspect-ratio den Platz. Erhält das Bild per CSS eine Breite wie width: 100%, errechnet der Browser die Höhe. Er nutzt dafür das Seitenverhältnis der Attribute (Quelle: web.dev/articles/optimize-cls, Stand: Oktober 2026).

Layoutverschiebungen misst Google mit der Kennzahl Cumulative Layout Shift (CLS). Web.dev bezeichnet einen CLS-Wert von 0,1 oder weniger als gut. Werte über 0,25 gelten als schlecht. Gemessen wird am 75. Perzentil der Seitenaufrufe, getrennt nach Mobilgeräten und Desktop (Quelle: web.dev/articles/cls, Stand: Oktober 2026).

Wann sollte man loading="lazy" setzen – und wann nicht?

Das Attribut loading="lazy" verschiebt das Laden eines Bildes. Geladen wird erst, wenn das Bild eine vom Browser berechnete Entfernung zum sichtbaren Bereich erreicht. Der Wert eager lädt sofort und ist der Standard (Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img). Der HTML-Standard definiert das Attribut als „lazy loading attribute“ mit genau diesen beiden Schlüsselwörtern (Quelle: html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes, Stand: Oktober 2026).

Bilder im ersten sichtbaren Bereich sollen laut web.dev nicht verzögert geladen werden. Das gilt besonders für das LCP-Bild, also das größte sichtbare Element. Eine Liste von Vorschaubildern lädt deshalb die ersten Einträge normal. loading="lazy" steht erst bei den Bildern weiter unten (Quelle: web.dev/articles/browser-level-image-lazy-loading, Stand: Oktober 2026).

Chromium lädt verzögerte Bilder nicht erst im letzten Moment. Laut web.dev senkte Chrome im Juli 2020 den Abstand, ab dem ein Bild geholt wird. Bei schnellen Verbindungen (4G) sank er von 3000 auf 1250 Pixel. Bei langsameren Verbindungen (3G oder darunter) sank er von 4000 auf 2500 Pixel (Quelle: web.dev/articles/browser-level-image-lazy-loading, Stand: Oktober 2026).

Fehlende Maße sind bei Lazy Loading besonders heikel. Ohne width und height setzt der Browser ein Bild zunächst mit 0 × 0 Pixeln an. In einer Galerie passen dann scheinbar alle Bilder in den sichtbaren Bereich. Der Browser lädt sie deshalb alle sofort (Quelle: web.dev/articles/browser-level-image-lazy-loading, Stand: Oktober 2026).

Für das wichtigste Bild einer Seite ist fetchpriority="high" das Gegenstück zu Lazy Loading. Web.dev weist darauf hin, dass loading="eager" ein Bild nicht schneller lädt als ein Bild ohne Attribut. Wer das LCP-Bild bevorzugen will, setzt die Abrufpriorität (Quelle: web.dev/articles/browser-level-image-lazy-loading, Stand: Oktober 2026).

Wie liefert man ein Vorschaubild in mehreren Größen aus?

Mit srcset und sizes bietet eine Seite mehrere Dateien desselben Vorschaubilds an. In srcset steht jede Datei mit ihrer tatsächlichen Breite im Einheitszeichen w. sizes nennt für Medienbedingungen die Breite des Platzes, den das Bild einnimmt. Der Browser nimmt die erste zutreffende Bedingung und lädt die passende Datei. Gibt es keine exakt passende, wählt er die nächstgrößere (Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images, Stand: Oktober 2026).

<img src="/thumbs/example-800.webp"
     srcset="/thumbs/example-400.webp 400w,
             /thumbs/example-800.webp 800w"
     sizes="(width <= 600px) 100vw, 400px"
     width="800" height="600" alt="Startseite von example.org">

Das Attribut sizes darf laut MDN nur zusammen mit Breitenangaben in srcset vorkommen. Gemeint sind Angaben mit w. Neben Größenangaben kennt sizes das Schlüsselwort auto (Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img, Stand: Oktober 2026).

Wie schneidet man Screenshots auf ein festes Format zu?

Die CSS-Eigenschaft object-fit bestimmt, wie ein Bild in seinen Rahmen passt. cover füllt den Rahmen unter Erhalt des Seitenverhältnisses und schneidet Überstände ab. contain zeigt das ganze Bild mit Rändern. Der Ausgangswert fill verzerrt es. Mit object-position lässt sich der Ausschnitt verschieben, etwa auf den oberen Rand einer Webseite (Quelle: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit, Stand: Oktober 2026).

.vorschau img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

MDN führt object-fit als „Baseline Widely available“. Laut MDN ist die Eigenschaft seit Januar 2020 in allen gängigen Browsern verfügbar (Quelle: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit, Stand: Oktober 2026).

Wann lohnt sich das picture-Element?

Das Element picture lohnt sich für neuere Formate wie AVIF mit Rückfalloption. Der Browser prüft die srcset-, media- und type-Angaben jedes source-Elements. Laut MDN wählt er unter ihnen die beste Übereinstimmung für Layout und Gerät. Das innere img beschreibt Größe und Darstellung. Passt keine Quelle, dient sein src als Rückfall (Quelle: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture, Stand: Oktober 2026).

Bei Lazy Loading mit picture genügt loading="lazy" am inneren img. Welche Quelle geladen wird, entscheidet der Browser laut web.dev anhand der source-Elemente (Quelle: web.dev/articles/browser-level-image-lazy-loading, Stand: Oktober 2026). Welche Formate sich für Screenshots eignen, behandelt Bildformate für Vorschaubilder.

Was gehört in den Alt-Text eines verlinkten Vorschaubilds?

Ein Vorschaubild, das allein einen Link bildet, ist für die W3C-Initiative WAI ein funktionales Bild. Sein Alt-Text beschreibt das Ziel oder die Aktion, nicht das Aussehen. Die WAI nennt etwa „Example.com homepage“ statt „Example.com logo“ (Quelle: w3.org/WAI/tutorials/images/functional/, Stand: Oktober 2026). Steht im selben Link schon ein Text, bekommt das Bild ein leeres alt="". So lesen Screenreader das Ziel nicht doppelt vor. Ausführlich: Alt-Text für Screenshots und Vorschaubilder.