Ein Layout ohne img-Tags ist wesentlich flexibler und die einzige Möglichkeit das Design (CSS) komplett vom Inhalt (HTML) zu trennen. Gerade in den Zeiten der Optimierung für neue internetfähige Ausgabegeräte ein wichtiger Aspekt. Sind die Tage des Image-Tags gezählt?
Eine Internetseite muss heute höheren Ansprüchen gerecht werden als noch vor zwei oder drei Jahren. Der Markt hat sich rasant entwickelt und es sind viele neuartige Geräte (z. B. Handhelds oder internetfähige Mobiles) erschienen, die schon nach kurzer Zeit einen beachtenswerten Marktanteil besitzen.
Style Sheets lassen sich ja bekanntermaßen für verschieden Medien optimieren. Diese besitzen auch verschiedene Ausgabegrößen. Bei Handhelds geht man z. B. von einem Screen mit durchschnittlich 320 x 240 Pixeln aus, beim Druck könnte man auf DIN A4 optimieren.
Background vs. Image-Tag
Kommen wir zum Showdown. Wo liegen die Stärken und Schwächen das <img />-Tags im direkten Vergeich mit einem Background-Image:
<img />-Tag
Ein img besitzt immer eine feste Höhe und Breite. Dadurch wird ein Layout unflexibel, denn diese Angaben werden im Markup der HTML-Datei festgelegt. Veränderungen dieser Dimensionen bewirken eine Skalierung, die das Bild qualitativ beeinflusst.
Kann das Bild, aus welchen Gründen auch immer, nicht angezeigt werden besteht die Möglichkeit ein alt-Tag zu benutzen, das einen alternativen Text anzeigt.
Ein Image kann als Objekt verlinkt werden und man kann sogar eine Image-Map darüber legen, die wiederum auch verlinkt werden kann. Aber Vorsicht! Image-Maps (wie sie von vielen Editoren generiert werden) sind oft nicht valide.
Als Objekt kann man dieses Bild nicht beliebig positionieren. Es reiht sich in den Dokumentenfluss ein und kann aus diesem nicht ohne weiteres gelöst werden.
…
style=”backround: …;”
Ein Background-Image hat keine eigenen Ausmaße. Es passt sich der Größe des umschließenden Elements an. Dadurch wird es nicht skaliert sondern abgeschnitten. Angaben werden nicht in der HTML-Datei gemacht, es kann komplett über das Stylesheet formatiert werden.
Ein Background-Image wird einfach nicht angezeigt. Es gibt keinen Hinweis auf das fehlende Bild.
Die fehlende Möglichkeit einen Background zu verlinken mag vielen jetzt als entscheidender Nachteil erscheinen. Über einen absolut positinierten Container mit einem transparenten Gif kann man sich allerdings seine eigene, valide “Image-Map” basteln, die zudem ebenfalls größtenteils über das Stylesheet formatiert werden kann.
Über CSS kann man dieses Bild beliebig innerhalb der Internetseite positionieren. Da es nicht als Objekt gilt, beansprucht es keinen Platz innerhalb eines Elements.
…
Fazit:
Zusammenfassend kann man sagen, dass sich Background-Bilder für die Gestaltung des Layouts besser eignen. Man kann sie einfach über das Stylesheet kontrollieren und seine Internetseite somit sehr einfach an alle Ausgabemedien anpassen. Im Idealfall sieht man ohne dem Stylesheet nur noch unformatierten Text.
Trotzdem ist das <img /> nicht totgesagt. Zählt man Bilder zur Information und will sie beispielsweise in einen Fliesstext einbinden, sollte man <img />-Tags benutzen.
Das entspricht dem Gedanken der Trennung der Information (HTML) vom Design (CSS). Bei Zen Garden wird dieses Prinzip schon seit längerem verfolgt.
Die Auswirkungen dieser Arbeitsweise kann man sich beim W3C mobileOK Checker vor Augen führen lassen. Dieser prüft Internetseiten hinsichtlich der Optimierung für Mobiles und Handhelds.
