Pixelgrafik und Referenzen für Webseiten

Um Pixelgrafiken (auch als Rastergrafiken bekannt) in Ihre Webseiten einzubinden, referenzieren Sie die Grafikdateien an gewünschten Stellen im HTML-Quelltext. Geeignete Dateiformate für Web-gerechte Grafiken sind GIF, JPEG und PNG.

Bei Grafiken für Webseiten sollten Sie darauf achten, dass sie nicht zu groß sind, denn aufwendige Grafiken verursachen lange Ladezeiten und Missmut beim Anwender. Reduzieren Sie in Ihren Grafiken gegebenenfalls die Anzahl der Farben, verringern Sie die Bildgröße und packen Sie nicht zu viele Grafik-Referenzen in ein einziges HTML-Dokument. Unter grafischen Benutzeroberflächen können Web-Browser die referenzierten Grafiken direkt im Anzeigefenster anzeigen. Web-Browser für textorientierte Oberflächen (z. B. DOS-Textmodus, Unix-Textmodus) müssen ein separates Grafik-Betrachtungsprogramm aufrufen, um eine Grafik anzuzeigen.

HTML bietet die Möglichkeit an, verweissensitive Bereiche für referenzierte Grafiken zu definieren (Image-Maps). Die Grafikdateien selbst bleiben davon unberührt. Auf diese Weise können Sie anklickbare Landkarten und Ähnliches erstellen.

Beispiel:

<div>
<img src="/paris.jpg" alt="Paris" width="240" height="180">
<img src="/london.jpg" alt="London" width="240" height="180">
</div>
<p>Ein <img src="/../smiley.gif" alt=""> ist ein Smiley.</p>
<h1>Die Tänzerin</h1>
<img src="/taenzerin.png" alt="" width="142" height="340">

Pixelgrafik und Referenzen für in HTML5

Erläuterung

Eine Grafikreferenz wird durch ein <img>-Tag markiert (img = image = Bild). Es handelt sich um ein Standalone-Tag, d. h. in XHTML sollte es in der Form <img ... /> notiert werden. Die Grafik wird an der Stelle im Text platziert, an der das Element notiert ist. Das Element erzeugt keine neue Zeile im Textfluss. Im obigen Beispiel ist das besonders bei der Code-Passage <p>Ein <img src="/../smiley.gif"> ist ein Smiley.</p> sichtbar. Hier erscheint die Grafik mitten im Text. Per Voreinstellung wird sie untenbündig zur Schrift-Basislinie ausgerichtet.

Die Grafikdatei, die referenziert werden soll, geben Sie im src-Attribut an. Es gibt HTML-seitig keine festen Vorschriften dafür, welche Grafikformate möglich sind. Was Pixelgrafikformate betrifft, erwarten Browser jedoch in der Praxis eines der drei Formate GIF, JPEG oder PNG.

HTML5-Info

Der HTML5-Standard sieht jedoch auch vor, <img src ... > zum einfachen Referenzieren von SVG-Vektorgrafiken zu verwenden.

Bei der Wertzuweisung an das src-Attribut gelten alle Möglichkeiten, die im Abschnitt über Referenzierung beschrieben sind. Sie können also lokal gespeicherte Grafikdateien referenzieren, aber auch solche von anderen Webservern. Sie können lokal gespeicherte Grafiken absolut oder relativ adressieren.

Beispiel:

<img src="/verzeichnis/datei.gif">
<img src="/verzeichnis/unterverz/datei.gif">
<img src="/../datei.gif">
<img src="/../../../datei.gif">
<img src="/../woanders/datei.gif">
<img src="http://www.example.org/grafiken/datei.gif">

Mit den Attributen width und height können Sie die Breite und Höhe der Grafik in Pixeln angeben. Diese Attribute sind nicht dazu gedacht, die Grafik zu strecken, auch wenn Browser das in aller Regel unterstützen. Geben Sie bei diesen Attributen die tatsächliche Breite und Höhe der Grafik an. Damit unterstützen Sie den Browser beim Bildschirmaufbau, während er die Webseite lädt. Er muss dann nämlich nicht warten, bis er die entsprechende Header-Information der Grafikdatei auslesen kann. Stattdessen kann er die Webseite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen.

Das alt-Attribut enthält den sogenannten Fallback-Text, falls die Grafik nicht geladen oder nicht angezeigt werden kann. Dabei hat das Attribut nicht die Aufgabe, den Inhalt der Grafik zu beschreiben, sondern lediglich die Grafik zu ersetzen, falls diese nicht angezeigt werden kann.

Beispiel:

<img src="/cartoon.png">Das ist die französische Fahne:
<img src="/fahne-fr.gif" alt=""> Reiseziel:
<img src="/fahne-fr.png" alt="Frankreich">

Im ersten Fall fehlt das alt-Attribut, weil die Grafik, zum Beispiel ein Cartoon oder Comic Strip, den eigentlichen Inhalt transportiert. Es gibt keine Möglichkeit, diesen Inhalt in Textform alternativ wiederzugeben (wie schon erwähnt: Alternativtext hat nicht die Aufgabe, prosaische Beschreibungen zu liefern). Im zweiten Fall wird das alt-Attribut notiert, jedoch leer gelassen. Diese Notationsform soll dann verwendet werden, wenn aus dem unmittelbaren Nachbarinhalt hervorgeht, worin der Inhalt der Grafik besteht. Die Zuweisung eines leeren Inhalts bedeutet also: Der Kontext ist eindeutig, und die Grafik visualisiert diesen Kontext lediglich. Geeignet ist diese Form für alle Arten von unmittelbarer Illustration oder Symbolisierung. Im dritten Fall enthält das alt-Attribut einen Inhalt. Der Grund ist, dass die Grafik in diesem Fall anstelle eines Textes notiert ist. Der Alternativtext ist in diesem Fall der natürliche Ersatzinhalt für die Grafik.

Weitere Hinweise

Achten Sie bei der Wertzuweisung an das src-Attribut unbedingt auf Groß-/Klein- schreibung von Dateinamen und Verzeichnisnamen. Viele Server-Rechner laufen mit Betriebssystemen, bei denen streng zwischen Groß- und Kleinschreibung unterschieden wird. Am einfachsten und sichersten ist es, wenn Sie alle Datei- und Verzeichnisnamen kleinschreiben - sowohl beim Vergeben der Namen, als auch beim Referenzieren.

Die referenzierte Quelle muss nicht zwangsläufig eine statische Grafikdatei sein. Es kann sich auch um ein serverseitiges Script handeln, das den Binärcode einer Grafik zum Beispiel auf Basis aktueller Daten generiert. Der gesendete Code muss jedoch einem der erwarteten Dateiformate entsprechen.

Dank der absoluten URL-Adressierung können Sie in einem eigenen <img>-Tag beliebige fremde Grafiken aus dem Web referenzieren. Dies kann jedoch eine Urheberrechtsverletzung und einen Verstoß gegen lizenzrechtliche Nutzungsbedingungen darstellen, da die Grafik für den Anwender in Ihrer Webseite so erscheint, als handele es sich um Ihren eigenen Inhalt. Klären Sie also bei jeder Referenzierung von Grafiken von Fremdanbietern zunächst, ob die Referenzierung rechtlich zulässig ist.

Im HTML-4.01-Standard war das alt-Attribut in jedem Fall Pflicht. HTML5 hat die Pflichtnotation abgeschafft, betont aber die Bedeutung des Attributs. Hintergrund der etwas verkrampft anmutenden Definitionen zum alt-Attribut, sind zum Teil heftige Auseinandersetzungen unter Experten. Das alt-Attribut ist nämlich seit jeher eine Art Inbegriff für ein Minimum an Barrierefreiheit beim Erstellen von Webseiten.

Der Internet Explorer zeigt den Alternativtext als Tooltipp an, wenn man mit dem Mauszeiger länger über der Grafik verweilt. Dieses Verhalten ist nicht im Sinne des alt-Attributs, dessen Wert nur angezeigt werden soll, wenn die Grafik nicht verfügbar ist. Wenn Sie Ihre Grafiken mit erklärenden Tooltipps versehen wollen, nutzen Sie das Attribut title. Dieses Attribut ist ein globales Attribut.

Der Internet Explorer gibt dem title-Attribut bei der Tooltipp-Anzeige übrigens auch Vorrang vor dem alt-Attribut. Verwenden Sie deshalb title="", um die Tooltipp- Anzeige des alt-Attributs im Internet Explorer ganz zu unterdrücken.

HTML5-Info

Die in HTML 4.01 erlaubten Attribute border und longdesc sind in HTML5 ersatzlos gestrichen worden.

Das border-Attribut lässt sich durch eine entsprechende CSS-Definition (Eigenschaft border) ersetzen. Anstelle des longdesc-Attributs wird die Verwendung des figure-Elements empfohlen.