Grafiken und Bilder technisch perfekt in eine Website einbinden

PIONWebdesign BlogGrafiken und Bilder technisch perfekt in eine Website einbinden
Grafiken und Bilder technisch perfekt in eine Website einbinden

Grafiken perfekt in HTML einbinden ist nicht so einfach, wie es sich anhört. Gefühlte 98% machen es falsch. Sie auch?

So trivial diese Aufgabe auch scheint, so sicher ist auch, dass es gefühlte 98% der Webdesigner nicht richtig machen. Es lohnt sich also, ins Detail zu gehen:

IMG-Tag oder Hintergrundbild?

Die erste Frage muss immer sein: Handelt es sich bei der einzubindenden Grafik um ein Hintergrundbild oder um eine Grafik, die tatsächlich zu einem inhaltlichen Mehrwert beiträgt. Nur wenn die Grafik inhaltliche Relevanz hat, ist sie mittels img-Tag einzubinden. Andernfalls muss es sich um eine Layout-Grafik handeln, die nur der Optik dienen soll. Für diese sind die CSS-Regeln - etwa background-image - anzuwenden.

Warum ist das so wichtig?

Für automatische Computerprogramme muss klar sein, welche Grafiken inhaltlich relevant sind. Nur so kann die Website barrierefrei und für Menschen mit Behinderung uneingeschränkt lesbar sein. Außerdem weiß Google, welche Grafiken inhaltlich relevant sind und kann diese Information entsprechend für das Ranking sowie für die Bildersuche verwerten.

Die Priorität beim Herunterladen der Grafiken richtet sich ebenfalls nach dieser Unterscheidung. Moderne Browser kümmern sich immer zuerst um den Inhalt und laden dann erst die Hintergrundgrafiken.

Hintergrundbilder schlank halten

Die Dateigröße von Hintergrundgrafiken sollte unbedingt möglichst gering gehalten werden. Oftmals ließe sich viel Ladezeit sparen, wenn man bei Hintergrundverläufen die Breite oder Höhe auf einen Pixel zuschneidet und mit der CSS-Eigenschaft background-repeat die Grafik optisch multipliziert.

Grafiken im Inhalt richtig einbinden

img-Elemente sollen zumindest die Attribute src und alt definiert haben. Das src-Attribut enthält den absoluten oder relativen Pfad zur einzubindenden Grafik. Mit dem alt-Attribut soll der Webdesigner bestmöglich in Worte fassen, was die Grafik zeigt. Noch vor dem Pfad ist der alt-Text nicht nur das wichtigste Kriterium für das Ranking in der Bildersuche, sondern auch der Hinweis für Screenreader-Programme von sehbehinderten Menschen.

Welche Rolle spielen Höhe und Breite?

Eine wichtige! Zwar sind diese Angaben syntaktisch nicht erforderlich, aber wir raten dringend dazu, den img-Elementen Angaben zu Höhe und Breite beizustellen, vorzugsweise mittels Attribute width und height, andernfalls per CSS. Warum? Weil der Browser zuerst den Quelltext des angefragten Webdokuments erhält und dann beginnt, diesen auszuwerten. Im Zuge dessen erfährt der Browser, das weitere Elemente, unter anderem eben auch Grafiken eingebunden werden sollen und sendet weitere Requests für jede Grafik. Wenn Höhe und Breite weder via Attribute noch via CSS bekannt gemacht wurden, muss der Browser bis zum vollständigen Laden der Grafik warten, damit er ihre Abmessungen kennt. Erst danach kann die Rendering-Engine das Layout der Seite berechnen und optisch zur Darstellung bringen. Um das Rendering nicht unnötig aufzuhalten ist es also ratsam, die Abmessungen möglichst früh anzugeben, am besten schon im HTML-Quelltext.

Bilder niemals skalieren

Wenn ein Webdesigner Grafiken mittels Attribute oder CSS skaliert, dann wollte er sich nicht den Aufwand antun, das Bild in den benötigten Größen abzuspeichern. Den Website-Besucher macht man sich mit browserbasiertem Skalieren nicht zum Freund. Schließlich muss der Browser das Bild meistens mit unnötig höherer Auflösung und Dateigröße herunterladen. Zusätzlich zu diesen Ladezeiten kommen noch jene Zeiten dazu, die der Browser benötigt, um die Grafik auf die gewünschten Abmessungen umzurechnen. Der Browser kann das zwar, ist aber nicht dafür gemacht. Folglich ist er dabei entsprechend langsam und erreicht niemals die Qualität, die jedes Grafikprogramm zustande bringt. Also Nachteile über Nachteile.

Inline oder Block?

img-Elemente haben per default die CSS-Eigenschaft display:inline; und Browser versuchen deshalb, sie als Teil einer Zeile darzustellen. Wenn die Höhe der Grafik jene der Zeile überschreitet (und das tut sie in der überwältigenden Mehrheit aller Fälle), ist es ratsam, der Grafik einen Block-Wert für die display-Eigenschaft zuzuweisen. In weiterer Folge sollte darauf geachtet werden, dass rekursiv geprüft kein parent-Element im DOM den inline-Wert trägt. Denn Inline-Elemente sollten niemals ein Block-Element beherbergen.

Und? Hand aufs Herz: Haben Sie Grafiken immer korrekt eingebunden?

6. September 2012 | Webentwicklung

Kostenlose Erstberatung vereinbaren