Die Optimierung der Webperformance ist ein umfassender Aufwand, der über das Hinzufügen von ein paar Codezeilen oder das Erhöhen der Bildkompression hinausgeht. Es geht darum, den Nutzern an jedem Punkt ihrer Interaktion mit der Website ein angenehmes Erlebnis zu garantieren. Auf dieser Reise gibt es eine ganz einfache HTML-Eigenschaft, die Entwickler oft übersehen, aber deren Wirkung ist bemerkenswert. Dies sind die <img> Tag Attribute width und height. Lassen Sie uns eingehend betrachten, wie diese Attribute entscheidend zur Verbesserung der Webperformance beitragen, insbesondere zur Optimierung der Core Web Vitals, einschließlich LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift).

Core Web Vitals: Neue Maßstäbe für die Messung des Nutzererlebnisses

Die von Google eingeführten Core Web Vitals sind eine entscheidende Kennzahl zur Messung der Qualität des Nutzererlebnisses einer Website. Diese Werte beeinflussen auch das Ranking in Suchmaschinen, weshalb Entwickler sie unbedingt verstehen und optimieren müssen.

  • LCP (Largest Contentful Paint): Ein Indikator zur Messung der Seitenladeleistung. Es zeigt die Zeit, die benötigt wird, bis das größte Inhaltselement im Viewport gerendert wird. Dieses Element ist häufig der Hauptinhalt der Seite (z. B. ein großes Heldenbild, große Textblöcke, Video-Poster usw.), und je schneller LCP ist, desto eher fühlt der Nutzer, dass die Seite schnell lädt. Das Ziel ist innerhalb von 2,5 Sekunden.

  • CLS (Cumulative Layout Shift): Ein Maß zur Beurteilung der visuellen Stabilität der Seite. Es gibt die Summe der unerwartet auftretenden Layoutverschiebungen an. Ein typisches Beispiel dazu ist, wenn Bilder plötzlich geladen werden und den umgebenden Text oder Schaltflächen verschieben, was zu Klickfehlern oder Verwirrung bei Nutzern führen kann. Das Ziel ist unter 0.1.

  • FID (First Input Delay): Ein Indikator zur Messung der Interaktivität der Seite. Er misst die Zeit, die vergeht, bis der Browser auf die erste Interaktion des Nutzers (z. B. einen Button zu klicken oder einen Link antippt) reagiert. Das Ziel ist innerhalb von 100 ms.

Die Attribute width und height haben insbesondere einen direkten Einfluss auf LCP und CLS.

Probleme durch fehlende width und height Attribute

Wenn die width und height Attribute im <img> Tag nicht angegeben sind, kann der Browser den Platz, den das Bild einnehmen wird, nicht ermitteln, bevor das Bild heruntergeladen wurde. Dies führt zu folgenden Problemen:

  1. Verzögerung des LCP: Der Browser muss das Bild herunterladen und analysieren, um die Größe zu ermitteln. Das blockiert den Hauptthread und verzögert die Berechnung des Layouts, was schließlich LCP verlängert. Inhalte, die für den Nutzer am wichtigsten sind, erscheinen verzögert.

  2. Auftritt von CLS (Layoutverschiebung): Wird das Bild verspätet geladen, sorgt der Browser dafür, dass der Platz für das Bild erst jetzt freigegeben wird. In diesem Prozess wird der zuvor leere Raum, den das Bild einnehmen sollte, plötzlich gefüllt, was dazu führt, dass der gesamte umgebende Text, Schaltflächen und andere Inhalte nach unten gedrückt werden, was zu einer 'Layoutverschiebung' führt. Dies beeinträchtigt das Nutzererlebnis erheblich und kann unbeabsichtigte Klicks verursachen. Zum Beispiel könnte der Text, den der Nutzer gerade liest, nach unten gedrückt werden, wenn das Bild geladen wird, oder ein anderer Element wird plötzlich sichtbar, wenn der Nutzer einen Button klicken will, was dazu führen kann, dass versehentlich etwas anderes angeklickt wird.

Die magischen Effekte der Angabe von width und height Attributen

Das explizite Angeben der width und height Eigenschaften im <img> Tag mag sehr einfach erscheinen, aber es verändert grundlegend, wie der Browser Bilder rendert.

<img src="your-image.jpg" alt="Beschreibung Ihres Bildes" width="800" height="600">

Durch das Hinzufügen dieser Attribute können folgende Optimierungseffekte erzielt werden:

  1. Verbesserung des LCP: Der Browser schätzt die endgültige Größe des Bildes auf der Grundlage der width und height Werte, bevor das Bild heruntergeladen wird, und reserviert den entsprechenden Platz im Voraus. Dadurch kann die Layoutberechnung vorgenommen werden, ohne auf den Bilddownload warten zu müssen. Infolgedessen kann der Browser den Rendering-Prozess der Seite effizienter verwalten und die Hauptinhalte, einschließlich des LCP-Elements, schneller dem Nutzer anzeigen.

  2. Verhinderung von CLS: Da der Platz für das Bild im Voraus reserviert ist, kommt es nicht zu einer Layoutverschiebung, wenn das Bild tatsächlich geladen wird. Dies bietet dem Nutzer ein visuell stabiles und angenehmes Erlebnis und verbessert signifikant den CLS-Score.

Nutzung der Seitenverhältnisberechnung des Browsers:

Moderne Browser berechnen intern das Seitenverhältnis (aspect-ratio) auf der Grundlage der width und height Attribute und passen die Höhe automatisch an, wenn nur die Breite in CSS angegeben wird. Dies hilft, Bilder in responsiven Designs flexibel zu behandeln und CLS zu vermeiden. Auch wenn CSS mit width: 100%; height: auto; verwendet wird, ist es wichtig, width und height in HTML anzugeben.

Praktische Anwendungstipps

  • Für alle <img> Tags anwenden: Stellen Sie sicher, dass für alle <img> Tags auf Ihrer Webseite die width und height Attribute angegeben werden. Dies sollte ohne Ausnahme für alles gelten, von Nutzeravatoren bis hin zu großen Heldenbildern. In serverseitigen Rendering (SSR) Umgebungen wie Django können Sie Bibliotheken zur Bildbearbeitung wie Pillow verwenden, um die Breite und Höhe der Bilder auszulesen und diese Werte dynamisch an das Template zu übergeben.

  • Verwendung der tatsächlichen Bildgröße: Geben Sie die width und height Werte basierend auf der ursprünglichen Pixelgröße der Bilddatei an, um dies am genauesten zu machen. Auch wenn Sie diese Größe über CSS anpassen, bezieht sich das HTML-Attribut auf die tatsächlichen Pixelwerte.

  • Harmonie mit responsive Designs: Verwenden Sie CSS-Eigenschaften wie max-width: 100%; height: auto;, damit die Bilder die Größe des übergeordneten Elements responsiv anpassen. In diesem Fall liefert die width und height im HTML die ursprünglichen Verhältnisinformationen, die der Browser benötigt, um Platz zu reservieren.

<style>
  .responsive-image {
    max-width: 100%;
    height: auto; /* zur Beibehaltung des aspect-ratio mit width/height Attributen */
  }
</style>
<body>
  <img src="responsive-example.jpg" alt="Responsive Image" width="1200" height="800" class="responsive-image">
</body>
  • Nutzung mit dem <picture> Tag: Wenn Sie verschiedene Auflösungen und Formate mit srcset und <picture> Tag anbieten, müssen auch die internen <img loading="lazy"> Tags die width und height Attribute enthalten.

Fazit: Kleine Anstrengung, große Leistungsverbesserung

Das Angeben der width und height Attribute im <img> Tag ist eine der besten Möglichkeiten, um in der Webperformance mit 'minimalem Aufwand maximalen Effekt' zu erzielen. Diese einfache Gewohnheit verbessert die LCP Ihrer Website, verhindert unnötige Layoutverschiebungen und reduziert den CLS, was letztendlich den Nutzern ein schnelleres und visuell stabileres Erlebnis bietet. Wenn Sie als Entwickler die Core Web Vitals verbessern und die Nutzerzufriedenheit erhöhen möchten, setzen Sie das Hinzufügen von width und height zu allen <img> Tags jetzt als höchste Priorität.