Es wirkt ja doch ein wenig wie ein Relikt aus alten Zeiten: Während zurückliegende HTML-Standards konsequent alle optischen Modifikatoren und somit auch Width- und Height-Attribute entfernt wurden, haben sie sich an ein Element doch nicht heran getraut: Das gute alte <img>.
Bildgröße
Wenn sich beim Laden der Bilder die Website-Inhalte hin- und herschieben gibt es ein altes Hausmittel: Wir teilen dem Browser mit, wie groß das Bild sein wird. So kann dieser diesen Platz reservieren und nach dem Laden die Grafik an ihren Platz setzen:
<img src="klaus.png" width="160" height="120" alt="" />
Bald darauf folgte jedoch der eingangs erwähnte Siegeszug von CSS: Alles, was irgendwie mit Optik zu tun hatte, musste raus aus dem Code, hinein in einen anderen.
Generell ist die Trennung von Inhalt und Darstellung bewährt, gut und richtig (auch wenn sie oft nicht hunderprozentig möglich ist). Für <img> brachen jedoch harte Zeiten an:
<img style="width: 160px; height: 120px;" src="klaus.png" alt="" />
Oder gar:
<img style="width: 160px; height: 120px;" src="klaus.png" width="160" height="120 "alt="" />
Das Problem am Width-Attribut ist, dass es die Größe eines Bildes manipulieren kann. Als Folge dessen wurde es zunehmend zur Style-Eigenschaft verklärt.
The height and width attributes are not for specifying what the height and width should be. They are for specifying what the height and width are, thus part of the description of the image. Such as alt, longdesc, etc.
Dieser Argumentation folgend sind Width- und Height-Attribute also als Meta-Daten zum Bild zu betrachten, die dem Browser das Leben erleichtern und stellen keine Darstellungseigenschaften dar. Folglich sind sie für diesen Zweck ohne jeden Vorbehalt gedacht und sollten auch so genutzt werden.
Eine Frage bleibt noch: Was ist, wenn man eine andere Größe als die des Bildes angibt? David Norris unterbreitet hierfür folgenden Vorschlag:
<img style="width: 80px; height: 60px;" src="klaus.png" width="160" height="120" alt="" />
Mit den Dimensionsattributen die wirkliche, mit CSS die gewünschte Bildgröße definieren. Ein tolles Beispiel, dass man einiges auch zu gut meinen kann.
Ich persönlich würde diese Möglichkeit einfach nicht wahrnehmen (in vielen Browsern sieht die Skalierung fürchterlich aus) oder aber im absoluten Notfall die gewünschte Größe direkt in Width und Height definieren. Schließlich ist es von der W3C auch so legitimiert.
Ich bin nur „Endverbraucher“. Mich interessiert aber nun der tatsächliche Unterschied zwischen img ohne width-Attribut und mit.
Dateianhänge zum Beispiel können nur mit diesem Attribut dargestellt werden. Warum ist das so?
Danke schon mal
Der Browser weiß leider erst wie groß ein Bild ist, nachdem er es komplett heruntergeladen hat. Daraus entsteht ein unschöner Effekt: Die Seite wird zunächst ohne Bild angezeigt. Wenn nun das Bild geladen wurde verschieben sich die umliegenden Elemente auf einmal. Das wirkt sehr unschön und unruhig.
Gibt man das Width- und das Height-Attribut aber an, weiß der Browser vorher wie groß das Bild sein wird und kann den Platz freihalten. Ist das Bild dann geladen, muss nichts mehr verschoben werden.
In Zeiten schnellerer Internetverbindungen sind diese Probleme weniger relevant geworden, im Zuge zunehmender Mobilisierung des Webs aber doch wieder interessant.
Was du mit Dateianhängen meinst ist mir leider nicht ganz klar. Müsstest nochmal genauer sagen was du meinst.