Ratgeber Bilder haben keine definierten Höhen- und Breitenangaben

Bilder auf deiner Website haben keine festgelegten width- und height-Attribute im HTML-Code. Diese Angaben sind wichtig, damit der Browser die genaue Größe der Bilder vor dem Laden kennt und den Seiteninhalt entsprechend reservieren kann. Ohne diese Attribute kann es zu Layoutverschiebungen kommen, was die Nutzererfahrung und die Ladegeschwindigkeit deiner Seite negativ beeinflusst.

• Layoutverschiebungen: Wenn der Browser die Bildgröße nicht kennt, wird der Seiteninhalt erst nach dem Laden des Bildes korrekt positioniert. Dies führt zu einer instabilen Benutzeroberfläche.
• Schlechtere Nutzererfahrung: Besucher könnten das ständige Springen von Inhalten als störend empfinden.
• SEO-Nachteile: Google bewertet Layoutverschiebungen (Cumulative Layout Shift, CLS) negativ, was dein SEO-Ranking beeinträchtigen kann.

1. Identifiziere Bilder ohne Größenangaben:
   • Öffne den HTML-Code deiner Website und suche nach <img>-Tags, die keine width- und height-Attribute haben. Beispiel:

     <img src="bild.jpg" alt="Beispielbild">

2. Ermittle die exakten Abmessungen der Bilder:
   • Nutze Bildbearbeitungsprogramme oder den Inspektor deines Browsers, um die tatsächliche Breite und Höhe der Bilder in Pixeln zu bestimmen.
3. Füge die Größenangaben hinzu:
   • Ergänze die Attribute width und height im <img>-Tag basierend auf den tatsächlichen Abmessungen. Beispiel:

     <img src="bild.jpg" alt="Beispielbild" width="800" height="600">

4. Nutze CSS für responsives Design:
   • Um sicherzustellen, dass die Bilder auch auf kleineren Bildschirmen korrekt angezeigt werden, ergänze in deinem CSS:

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

5. Teste die Änderungen:
   • Lade deine Website in einem Browser und überprüfe, ob die Layoutverschiebungen behoben sind.
   • Nutze Tools wie Google PageSpeed Insights, um die Verbesserung des CLS-Wertes zu bestätigen.
6. Automatisiere den Prozess:
   • Wenn du ein CMS wie WordPress nutzt, können Plugins wie Smush oder Lazy Load automatisch Größenangaben für Bilder hinzufügen.

Beispiele & Best Practices

• Falsche Größenangaben: Überprüfe, dass die angegebenen Breite und Höhe mit den tatsächlichen Bilddimensionen übereinstimmen.
• Keine responsiven Einstellungen: Ergänze immer CSS-Regeln, um Bilder auf unterschiedlichen Geräten korrekt darzustellen.
• Vergessene Attribute: Stelle sicher, dass alle Bilder auf der Seite width- und height-Attribute haben.

• width und height sollten in Pixeln angegeben werden.
• Ergänze immer CSS-Regeln wie max-width: 100%, um die Bilder responsiv zu machen.
• Bilder ohne definierte Größen können zu einem schlechten CLS-Wert führen, der sich negativ auf das SEO-Ranking auswirkt.

• Google PageSpeed Insights
• W3C-Dokumentation zu HTML-Bildern
• Google-Richtlinien zur Layout-Stabilität