Tipps für eine bessere Nutzung von Grafiken mit HTML

Grafik auf Webseiten effektiv nutzen

Die Verwendung von Grafiken auf Webseiten ist heute eine der meistdiskutierten Fragen zwischen Nutzern und Anbietern von Webseiten. Für jeden, der eine Webseite mit mehr, größeren und glänzenden Grafiken gestalten will, um die Vorzüge der grafischen Fähigkeiten des Web auszunutzen, gibt es jemanden mit einer langsamen Netzwerkverbindung, der um weniger Grafiken bittet, damit ihr oder sein Browser nicht stundenlang braucht, um eine Seite zu laden.

Schaffen Sie einen Mittelweg zwischen dem Spaß, eine optisch ansprechende, farbenfrohe Webseite zu erzeugen, und der Notwendigkeit, dass jeder, der es möchte, Ihre Informationen auch erhalten kann – und das sind auch jene Leute, die Ihre Grafiken (weshalb auch immer) nicht brauchen können.

Dieser Abschnitt bietet Ihnen ein paar Hinweise und Kompromisse, die Sie bei der Gestaltung Ihrer Webseiten machen können, sodass Sie jeden zufrieden stellen können (oder auch unglücklich machen, je nachdem, wie Sie es betrachten).

Brauchen Sie die Grafik wirklich?

Bei jeder Grafik, die Sie in Ihre Seite einfügen, sollten Sie sich fragen, weshalb Sie das tun. Was bringt die Grafik für die Gestaltung der Seite? Bietet sie Informationen, die stattdessen auch im Text präsentiert werden könnten? Ist sie nur da, weil Sie sie mögen?

Bemühen Sie sich, Ihre Webseiten nicht mit hübschen, aber ansonsten unnötigen Grafiken zu überhäufen. Eine einfache Webseite mit nur wenigen Symbol-Grafiken ist häufig effektiver als eine, aus der Ihnen ausgefallene 3-D-Buttons entgegenspringen oder große Fotografien, schattierte Knöpfe oder psychedelische Trennlinien.

Verwenden Sie kleine Bilder

Ein kleines Bild benötigt weniger Zeit bei der Übertragung durchs Netz. Daher bewirkt die Verwendung kleinerer Grafiken, dass Ihre Seite schneller geladen wird und Leute, die sie über langsame Netzwerk-Verbindungen lesen wollen, weniger frustriert sind. Was könnte leichter sein?

Mit "kleinerer Grafik" kann gemeint sein: geringere Größe auf dem Bildschirm. Doch Sie können kleinere Grafiken auch erzeugen, indem Sie die Anzahl der Farben verringern, die von dem Bild verwendet werden. Das Ziel ist also, die Dateigröße der Grafik zu verringern, damit sie schneller übertragen wird, doch ein 10 mal 10 cm großes Schwarzweißbild (zwei Farben) kann eine geringere Dateigröße haben als eine zwei Quadratzentimeter große Fotografie mit 8-Bit-Farbtiefe. Mit den meisten Bildverarbeitungs-Programmen können Sie die Anzahl der verwendeten Farben reduzieren und das Ergebnis so bearbeiten, dass es auch mit weniger Farben noch gut aussieht.

Eine gute Regel, an die man sich halten kann, ist, zu versuchen, die Grafiken kleiner als 20 Kbyte zu halten.

Das mag wenig scheinen, doch eine einzige 20-Kbyte-Datei braucht etwa 10 Sekunden, um über eine 28.8 Kbps-Verbindung geladen zu werden (Ich weiss, heute gibt es DSL und Glasfaser). Multiplizieren Sie diese Zeit mit der Anzahl der Grafiken in Ihrer Webseite, und Sie kommen womöglich auf eine spürbare Zeitspanne für das Laden der Seite (auch wenn Sie einen Browser verwenden, der mehrere Bilder gleichzeitig laden kann, bleibt die Übertragungs-Geschwindigkeit doch gleich schnell). Wird sich jemand für Ihre Webseite interessieren, wenn man essen und spazieren gehen kann, während sie geladen wird?

Grafiken so oft wie möglich wiederverwenden

Zusätzlich dazu, dass Sie einzelne Bilder klein halten sollten, versuchen Sie, dasselbe Bild so oft wie möglich auf einzelnen Seiten und über mehrere Seiten hinweg zu wiederholen: Wenn Sie zum Beispiel Grafiken von Hinweispunkten haben, benutzen Sie jedesmal dasselbe Bild, anstatt ein neues einzusetzen. Die Wiederverwendung von Bildern hat zwei bedeutsame Vorteile gegenüber der Verwendung unterschiedlicher Bilder:

• Die Wiederverwendung von Bildern bietet eine Einheitlichkeit im Design über Ihre Seiten hinweg und hilft dabei, ein bestimmtes "Image" für Ihre Site zu schaffen.
• Was noch wichtiger ist: Bilder wieder zu verwenden bedeutet, dass Ihr Browser sie nur ein einziges Mal herunterzuladen braucht. Sobald sich das Bild einmal im Arbeitsspeicher befindet, kann es wiederholt dargestellt werden, ohne dass der Browser wieder neue Verbindungen zum Server herstellen muss.

Um ein Bild wieder zu verwenden, brauchen Sie nichts Besonderes zu tun; vergewissern Sie sich bloß, dass Sie sich auf das Bild jedesmal mit der gleichen URL beziehen. Der Browser kümmert sich dann um den Rest.

Alternativen zu Grafiken anbieten

Wenn Sie bislang bei Ihren Grafiken das alt-Attribut noch nicht benutzt haben, sollten Sie es nun tun. Das alt-Attribut ist außerordentlich nützlich, um Ihre Webseiten auch für textbasierte Browser lesbar zu machen. Was ist jedoch mit Leuten, welche die Grafiken in ihrem Browser ausschalten, weil sie eine langsame Internet-Verbindung haben? Die meisten Browser verwenden in diesem Fall das alt-Attribut nicht (obgleich sie es sollten). Und bisweilen ist alt nicht ausreichend; da Sie lediglich Text im alt-Attribut verwenden können, kann als Ersatz für die Grafik kein HTML-Code benutzt werden.

Um all diese Probleme zu umgehen und Ihre fesche, grafische Webseite zu bewahren, ziehen Sie die Erzeugung einer zusätzlichen reinen Textversion Ihrer Webseiten in Betracht, und fügen Sie Verbindungen zu diesen in die grafischen Versionen der Seiten ein, etwa so:

<p>
	Eine reine <a href="textversion.html"> Text-Version </a> dieser Seite ist ebenfalls verfügbar.
</p>

Die Verknüpfung mit der Textversion der Seite benötigt nur einen kleinen Absatz auf der "eigentlichen" Webseite, macht jedoch die Informationen, die Sie anbieten, für Ihre Leser viel besser erreichbar. Dies ist eine Gefälligkeit, für die Ihnen die Leser mit langsamen Verbindungen dankbar sein werden, während Sie zugleich auch Ihre "eigentliche" Webseite mit so viel Grafik, wie Sie mögen, für diejenigen bereithalten können, die schnelle Netzwerk-Verbindungen haben.