Sollte ich HTML-„img'-Tag-Attribute oder CSS verwenden, um Bildabmessungen für optimale Leistung anzugeben?

Bildanzeige in HTML optimieren: Höhen- und Breitenattribute angeben oder nicht?

Beim Anzeigen von Bildern mit dem HTML Tag ist es wichtig, den effizientesten Ansatz zur Angabe ihrer Abmessungen zu berücksichtigen. Wenn Sie sich ausschließlich auf CSS verlassen, fügen Sie Attribute in das -Element ein. Tag oder verwenden Sie eine Kombination aus beidem?

Optionen:

1. Verwenden von Attributen innerhalb des Tag:

<img src="profilepic.jpg" height="64" width="64" />

2. Verwenden von Stilattributen im Tag:

<img src="profilepic.jpg" height="64" width="64">

3. Nur ​​CSS-Stile verwenden:

<img src="profilepic.jpg">

Empfohlener Ansatz:

Gemäß Google Page Speed ​​wird dies empfohlen Definieren Sie die Höhe und Breite direkt im Tag. Dadurch kann der Browser die Abmessungen sofort ermitteln und so ein unnötiges Umfließen und Neuzeichnen beim Herunterladen des Bildes verhindern.

Überlegungen zur Validierung:

Beachten Sie, dass das Festlegen der Abmessungen über Stilattribute innerhalb der Tag wird von Validatoren nicht als gültiges HTML angesehen. Um die Gültigkeit aufrechtzuerhalten, sollten Sie eine externe CSS-Datei verwenden oder die CSS-Stile inline in eine