Good Website Inspector

making the web better

Regeln

Regel: Bilder sollten alt- und title-Attribute haben

Auf <img>-Tags sollten immer "alt"- oder "title"-Attribute genutzt werden. Sie sind sehr wichtig für eine gute Positionierung in Suchmaschinen, da sie den Inhalt des Bildes beschreiben.

Das "title"-Attribut hat mehr beschreibenden Charakter als das "alt"-Attribut, da der Inhalt des "alt"-Attributs auch optisch dem Benutzer angezeigt wird, sobald ein Bild nicht geladen werden kann.

Für eine optimale Wirkung in Suchmaschinen sollte eine kurze Bildbeschreibung im "alt"-Attribut und eine ausführlichere, für den Benutzer deutlich hilfreichere Beschreibung mit mehr und vor allem anderen Schlüsselwörtern im "title"-Attribut stehen.

Regel: Keine Bildskalierung via HTML- oder CSS-Attribute

Bilder in Websites sollten niemals über die HTML-Attribute "height" und "weight" oder den entsprechenden CSS-Äquivalenzen verkleinert oder vergrößert werden, da sie den Darstellungsprozess des Browsers je nach Ursprungsgröße verlangsamen.

Des weiteren ist von einer veringerten Dateigröße des Bildes auszugehen, wenn es physisch auf die entsprechende Größe herunterskaliert wird. Das verursacht eine kürzere Datenübertragung des Bildes zum Endnutzer und führt daher zu einer schnelleren Ladezeit.

Regel: Keine leeren src-Attribute

Es sollte niemals ein leeres "src"-Attribut in <img>-Tags gesetzt werden, da sie in einigen Browsern einen erneuten, langsamen HTTP-Request auf den Server bewirken. Das erneute Laden verursacht einen 404-Fehler und bremst die Darstellung der Seite für den Benutzer aus.

Regel: Keine Leer-Bilder

Es sollten niemals Spacer-Images genutzt werden! Spacer-Images deuten auf eine schlechte HTML-Struktur und ein unzureichendes Wissen in moderner Webentwicklung.

Seit dem Jahr 2001 kann man Websites komplett via CSS ohne Spacer-Images entwickeln. Vor dem Jahr 2001 wurden tabellenbasierte Layouts sehr oft mit Spacer-Images gebaut, da diese die Seite zusammen hielten.

Spacer-Images erzwingen mehrere unnötige HTTP-Requests auf den Webserver, was die Ladezeit der Seite ebenfalls verlangsamt.

Regel: Vermeide Bilder zu Layoutzwecken

Es sollten CSS-Image-Sprites anstelle von <img>-Tags bei wiederkehrenden und grundlegenden Designelementen genutzt werden.

Damit minimiert man die notwendigen HTML-Requests zu minimieren, was wiederum in einer schnelleren Ladezeit resultiert und beim wiederkehrenden Besuch eine deutlich schnellere Darstellung bewirkt.

Die Nicht-Nutzung von CSS-Sprites deutet auf einen schlechteren Programierstil und unzureichendes Wissen der modernen Webentwicklung.

Regel: Vermeide reine <img>-Navigationen

Bildbasierende Navigationen, gebaut mit <img>-Tags sollten vermieden werden, da Suchmaschinen einfachen Text besser indizieren können. Bildbasierende Navigationen sollten wenn möglich mittels CSS und Hintergrundbildern realisiert werden, wobei der eigentliche Navigationstext mittels CSS ausgeblendet wird.

Wenn sich Bildnavigationen nicht vermeiden lassen, sollten unbedingt alt- und title-Attribute gesetzt werden.

Der Good Website Inspector wurde von Hubert Burda Media entwickelt.
Autor: Stefan Seifarth, Media Innovation Lab GmbH, Hubert Burda Media, Impressum & Datenschutz