{"id":611,"date":"2011-10-23T17:06:41","date_gmt":"2011-10-23T15:06:41","guid":{"rendered":"https:\/\/sgaul.de\/?p=611"},"modified":"2015-09-25T12:03:23","modified_gmt":"2015-09-25T10:03:23","slug":"das-width-attribut-von-img","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2011\/10\/23\/das-width-attribut-von-img\/","title":{"rendered":"Das Width-Attribut von Img"},"content":{"rendered":"<p>Es wirkt ja doch ein wenig wie ein Relikt aus alten Zeiten: W\u00e4hrend zur\u00fcckliegende 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 <code>&lt;img&gt;<\/code>.<!--more--><\/p>\n<h2>Bildgr\u00f6\u00dfe<\/h2>\n<p>Wenn sich beim Laden der Bilder die Website-Inhalte hin- und herschieben gibt es ein altes Hausmittel: Wir teilen dem Browser mit, wie gro\u00df das Bild sein wird. So kann dieser diesen Platz reservieren und nach dem Laden die Grafik an ihren Platz setzen:<\/p>\n<pre>&lt;img src=\"klaus.png\" width=\"160\" height=\"120\" alt=\"\" \/&gt;<\/pre>\n<p>Bald darauf folgte jedoch der eingangs erw\u00e4hnte Siegeszug von CSS: Alles, was irgendwie mit Optik zu tun hatte, musste raus aus dem Code, hinein in einen anderen.<\/p>\n<p>Generell ist die Trennung von Inhalt und Darstellung bew\u00e4hrt, gut und richtig (auch wenn sie oft nicht hunderprozentig m\u00f6glich ist). F\u00fcr <code>&lt;img&gt;<\/code> brachen jedoch harte Zeiten an:<\/p>\n<pre>&lt;img style=\"width: 160px; height: 120px;\" src=\"klaus.png\" alt=\"\" \/&gt;<\/pre>\n<p>Oder gar:<\/p>\n<pre>&lt;img style=\"width: 160px; height: 120px;\" src=\"klaus.png\" width=\"160\" height=\"120 \"alt=\"\" \/&gt;<\/pre>\n<p>Das Problem am Width-Attribut ist, dass es die Gr\u00f6\u00dfe eines Bildes manipulieren kann. Als Folge dessen wurde es zunehmend zur Style-Eigenschaft verkl\u00e4rt.<\/p>\n<blockquote><p>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.<\/p>\n<p class=\"cite\"><a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-html\/1998May\/0100.html\">David Norris, 1998<\/a><\/p>\n<\/blockquote>\n<p>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\u00fcr diesen Zweck ohne jeden Vorbehalt gedacht und sollten auch so genutzt werden.<\/p>\n<p>Eine Frage bleibt noch: Was ist, wenn man eine andere Gr\u00f6\u00dfe als die des Bildes angibt? David Norris unterbreitet hierf\u00fcr folgenden Vorschlag:<\/p>\n<pre>&lt;img style=\"width: 80px; height: 60px;\" src=\"klaus.png\" width=\"160\" height=\"120\" alt=\"\" \/&gt;<\/pre>\n<p>Mit den Dimensionsattributen die wirkliche, mit CSS die gew\u00fcnschte Bildgr\u00f6\u00dfe definieren. Ein tolles Beispiel, dass man einiges auch <em>zu<\/em> gut meinen kann.<\/p>\n<p>Ich pers\u00f6nlich w\u00fcrde diese M\u00f6glichkeit einfach nicht wahrnehmen (in vielen Browsern sieht die Skalierung f\u00fcrchterlich aus) oder aber im absoluten Notfall die gew\u00fcnschte Gr\u00f6\u00dfe direkt in Width und Height definieren. Schlie\u00dflich ist es von der W3C auch so <a title=\"Visual presentation of images, objects, and applets\" href=\"http:\/\/www.w3.org\/TR\/html401\/struct\/objects.html#adef-width-IMG\">legitimiert<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Es wirkt ja doch ein wenig wie ein Relikt aus alten Zeiten: W\u00e4hrend zur\u00fcckliegende 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>.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[194],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/611"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=611"}],"version-history":[{"count":27,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/611\/revisions"}],"predecessor-version":[{"id":2818,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/611\/revisions\/2818"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}