Warum man bei Bild-Tag width und height angibt und welche Vorteile das bringt

Warum man bei Bild-Tag width und height angibt

Beim Erstellen von Webseiten ist das <img>-Tag eines der am häufigsten genutzten Elemente. Dennoch sieht man noch oft, dass Entwickler nur das src-Attribut setzen und die Größenangaben weglassen.

Das führt dazu, dass sich das Layout während des Ladens verschiebt oder die Nutzererfahrung sowie Performance-Metriken negativ beeinflusst werden. In diesem Beitrag schauen wir uns aus technischer Sicht an, warum das Festlegen von width und height bei <img> wichtig ist und welche konkreten Vorteile es bietet.

1. Rendering-Performance und Ladegeschwindigkeit

1-1. Sicherstellung eines stabilen Layouts

Der Browser parst das HTML und versucht, so schnell wie möglich zu rendern. Wenn die Bildgröße unbekannt ist, kann er nicht vorab berechnen, wie viel Platz das Element einnehmen soll.

Das Ergebnis: Sobald das Bild geladen wird, schiebt es den vorhandenen Inhalt nach unten und verursacht unerwünschte Layout-Shift.

<img src="photo.jpg">

In diesem Fall wird das Bild vor dem Laden als Element ohne Höhe behandelt und erst nach dem Laden die tatsächliche Höhe übernommen, was zu einer Neuanordnung führt.

1-2. Reduktion von Cumulative Layout Shift (CLS)

CLS ist ein Bestandteil der Google Core Web Vitals und misst unerwartete Layout-Änderungen während des Ladens.

Durch Angabe von width und height kann der Browser bereits vor dem Laden das korrekte Seitenverhältnis berechnen und den nötigen Platz reservieren.

CLS-Kriterien

• CLS ≤ 0.1 : gut
• CLS ≥ 0.25 : Verbesserung nötig

Die Angabe der Bildgröße ist eine der einfachsten und effektivsten Methoden, um CLS zu senken.

1-3. Genaues Verständnis des Netzwerkbandbreitenverbrauchs

Ein häufiges Missverständnis ist, dass die Angabe von width und height die heruntergeladene Bilddatei verkleinert.

• Der Browser lädt die Originaldatei weiterhin vollständig herunter.
• width / height dienen ausschließlich der Layoutberechnung.

Der tatsächliche Bandbreitenersparnis erfolgt über:

• srcset / sizes
• serverseitiges Bild-Resizing
• <picture>-Element

Trotzdem stabilisiert die Angabe der Bildgröße das Rendering und verbessert die wahrgenommene Ladeperformance.

2. Vorteile aus Sicht der Barrierefreiheit

2-1. Vorhersehbarer Lesefluss

Barrierefreiheit basiert zwar primär auf dem alt-Attribut, aber ein stabiles Layout spielt ebenfalls eine unterstützende Rolle.

Klare Bildgrößen ermöglichen ein vorhersehbares Seitenlayout, sodass sich der Lesefluss für Screenreader nicht plötzlich ändert.

width und height sind keine zwingenden Barrierefreiheitsattribute, aber die Layoutstabilität verbessert die Barrierefreiheit indirekt.

2-2. Vorhersagbarkeit im mobilen Umfeld

Auf mobilen Geräten ist der Bildschirm begrenzt, sodass selbst kleine Layoutänderungen stark wahrgenommen werden.

Fehlen die Größenangaben, kann es zu:

• Verschiebungen während des Ladens
• Plötzlichen Abstandänderungen bei Zoom

Durch die Angabe des Basisverhältnisses lässt sich diese Instabilität reduzieren.

3. SEO‑Perspektive

Suchmaschinen bewerten die Ladeperformance und Nutzererfahrung einer Seite stark. Seiten mit niedrigem CLS und stabilem Initialrender gelten als qualitativ hochwertig.

Klare Bildstrukturen erleichtern Suchmaschinen das Verständnis der Seite und können sich positiv auf die Bildersuche auswirken.

4. Praktische Codebeispiele

4-1. Ohne Größenangabe (Problemfall)

<img src="https://example.com/photo.jpg" alt="Beautiful scenery">

4-2. Mit Größenangabe (empfohlen)

<img
  src="https://example.com/photo.jpg"
  alt="Beautiful scenery"
  width="800"
  height="600">

Hinweis

• width und height sind pixelbasierte Werte.
• Für responsive Layouts wird häufig zusätzlich CSS verwendet.

img {
  max-width: 100%;
  height: auto;
}

5. Praktische Tipps

6. Fazit

• Stabiles Layout → CLS‑Reduktion → bessere Nutzererfahrung
• Vorhersagbares Rendering → wahrgenommene Performance‑Verbesserung
• Positive SEO‑Signale

Die Angabe von width und height ist also nicht nur ein Code‑Style‑Problem, sondern ein grundlegendes Prinzip, das Web‑Performance und UX gleichzeitig verbessert.

Durch das Einbauen dieser beiden Attribute beim Hinzufügen von Bildern kann die Qualität einer Webseite deutlich gesteigert werden.

Weitere nützliche Beiträge für Frontend‑Ingenieure

1. Auch Backend-Entwickler sollten mindestens dies wissen – Die besten 5 Frontend-JS-Methoden und -Module
2. [Web-Upload leicht gemacht] Dropzone.js – Der komplette Leitfaden