SELFHTML

Grafiken einbinden

Informationsseite

nach unten Allgemeines zu Grafiken
nach unten Grafikreferenz definieren
nach unten Breite und Höhe von Grafiken
nach unten Rahmen um Grafiken
nach unten Namen für Grafiken
nach unten Langbeschreibung für Grafiken
nach unten Weitere Informationen

 nach unten 

Allgemeines zu Grafiken

Um Grafiken in Ihre HTML-Dateien einzubinden, referenzieren Sie die Grafikdateien an gewünschten Stellen im HTML-Quelltext. Geeignete Dateiformate für Web-gerechte Grafiken sind vor allem GIF und JPEG, allmählich aber auch PNG (Einzelheiten zu diesen Formaten siehe Seite Grafikformate für Web-Seiten).

Wenn Sie HTML-Dateien fürs Web erstellen, sollten Sie darauf achten, dass die darin referenzierten Grafiken 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 stopfen Sie nicht zu viele Grafik-Referenzen in eine einzige HTML-Datei. In jedem Fall sollten Sie nach unten Breite und Höhe mit angeben.

Grafiken sind aus HTML-Sicht Seite Inline-Elemente. In der "Strict"-Variante von HTML müssen solche Elemente innerhalb von Seite Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.

Unter grafischen Benutzeroberflächen wie MS-Windows, Macintosh, KDE und anderen 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.

Wenn Sie wichtige HTML-Dateien Ihres Web-Projekts, etwa die Einstiegsseite, vollständig grafisch gestalten, also fast keinen Text, dafür nur Grafikreferenzen verwenden, erschweren Sie automatischen Suchprogrammen, die von vielen Suchdiensten im Web eingesetzt werden, die Identifizierung des Inhalts Ihres Projekts. Im Zweifelsfall müssen Sie abwägen, was Ihnen wichtiger ist: das grafische Erscheinungsbild oder die inhaltliche Identifizierbarkeit. Falls Sie wichtige HTML-Dateien Ihres Web-Projekts vorwiegend durch Grafikreferenzen gestalten, sollten Sie zumindest die Möglichkeit der Seite Meta-Angaben zum Inhalt nutzen.

nach obennach unten

HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Grafikreferenz definieren

An einer gewünschten Stelle können Sie eine Grafik referenzieren.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grafikreferenz definieren</title>
</head>
<body>

<h1>Tanzmaus</h1>

<p><img src="tanzmaus.png" alt="Tanzmaus"></p>

</body>
</html>

Erläuterung:

Für Grafikreferenzen gibt es in HTML das <img>-Tag (img = image = Bild, src = source = Quelle). Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe von Attributen bestimmen Sie nähere Einzelheiten der Grafikreferenz. Zwei Attribute sind Pflicht und müssen immer angegeben werden:

Mit dem Attribut src bestimmen Sie die gewünschte Grafikdatei. Dabei gelten die Regeln zum Seite Referenzieren in HTML. Wenn sich die Grafikdatei also beispielsweise im gleichen Verzeichnis wie die HTML-Datei befindet, in der die Grafikreferenz steht, dann genügt einfach die Angabe des Dateinamens der Grafik - so wie im obigen Beispiel. Das Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso möglich, z.B.:
<img src="verzeichnis/datei.gif" alt="Grafik">
<img src="verzeichnis/unterverz/datei.gif" alt="Grafik">
<img src="../datei.gif" alt="Grafik">
<img src="../../../datei.gif" alt="Grafik">
<img src="../woanders/datei.gif" alt="Grafik">

Auch das Referenzieren von einem vollständigen URI ist möglich, z.B.:
<img src="http://www.example.org/grafiken/taggi01.gif" alt="Taggi">

Das Attribut alt ist Pflichtangabe für jede Grafikeinbindung. Geben Sie darin einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann. Das sollte bei rein illustrierenden Schmuckgrafiken in der Form alt="" geschehen, um die Grafik als inhaltslos zu kennzeichnen. Vermeiden Sie es in solchen Fällen, die alt-Attribute von Grafiken mit unsinnigen Inhalten wie "spacer.gif" o.ä. zu befüllen.

Es gibt viele Gründe, warum eine Grafik nicht angezeigt werden kann, z.B. weil der Anwender das Anzeigen von Grafiken in seinem Browser deaktiviert hat, oder weil der Anwender das Laden der Seite abgebrochen hat, bevor die Grafik übertragen wurde. Der Alternativtext kann ein einzelnes Wort sein, aber auch eine Kurzbeschreibung, etwa so:
<img src="luftbild.jpg alt="Luftaufnahme des Grundst&uuml;cks vom 27.05.2001 aus ca. 300m H&ouml;he">
Welcher Alternativtext der jeweils passendste ist, hängt von den jeweilgen Umständen ab. Grafiken, welche Text enthalten, sollten beispielsweise als Alternativtext auf jeden Fall diesen Text erhalten.

Beachten Sie:

Der Internet Explorer zeigt den Alternativtext als Tooltip an, wenn man mit dem Mauszeiger länger über der Grafik verweilt. Dieses Verhalten ist zwar nicht verboten, stört aber häufig den Seitenautor. Und es verleitet zu der Annahme, das alt-Attribut wäre für diesen Tooltip grundsätzlich zuständig, was aber vollkommen falsch ist. Wenn Sie ihre Grafiken mit erklärenden Tooltips versehen wollen, nutzen Sie das Attribut title. Da es ein Seite Universalattribut ist, können Sie title auch in fast jedem anderen Tag verwenden und so beispielsweise auch einzelne Worte oder Textabsätze mit Tooltips versehen.

Der Internet Explorer gibt dem title-Attribut für die Tooltip-Anzeige Vorrang vor dem alt-Attribut. Verwenden Sie deshalb beispielsweise title="", um die Tooltip-Anzeige des alt-Attributs im Internet Explorer abzuschalten.

Sie können ohne weiteres Grafiken von fremden Adressen in Ihre Seiten einbinden. Fragen Sie in diesem Fall jedoch in jedem Fall den Anbieter der Grafik um Erlaubnis, denn das Einbinden von Grafiken ist - im Gegensatz zu Verweisen auf fremde Inhalte - ein Zueigenmachen von fremden Inhalten. Auch besteht keine Garantie, dass die Grafikreferenz jederzeit bis in alle Zukunft funktioniert, denn wenn der Fremdanbieter die Grafik bei sich entfernt oder umbenennt, wird auf Ihrer Seite nur noch ein so genanntes Beispiel-Seite broken image angezeigt.

Achten Sie bei der Wertzuweisung an das src-Attribut unbedingt auf Groß-/Kleinschreibung von Dateinamen und Verzeichnisnamen. Die meisten 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 in der HTML-Datei.

Netscape interpretiert ein proprietäres Attribut lowsrc, das Sie zusätzlich zum src-Attribut notieren können, und bei dem Sie eine Grafikdatei angeben, die weniger Speicher benötigt als die bei src referenzierte Grafik. Die lowsrc-Grafik lädt der Browser dann zuerst und kann sie schon anzeigen, während die andere Grafik noch geladen wird. Dieses Attribut erzeugt jedoch ungültiges HTML und hat sich in der Praxis auch als überflüssig erwiesen.

Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das img-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <img ... />. Weitere Informationen finden Sie im Kapitel Kapitel XHTML und HTML.

nach obennach unten

HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Breite und Höhe von Grafiken

Wenn Sie Grafiken in HTML-Dateien einbinden, die Sie im Web anbieten wollen, sollten Sie stets die Breite und Höhe der Grafik mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Wenn Sie Breite und Höhe nicht angeben, wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breite und Höhe von Grafiken</title>
</head>
<body>

<h1>Tanzb&auml;r</h1>

<p><img src="tanzbaer.png" width="368" height="383" alt="Tanzb&auml;r"></p>

</body>
</html>

Erläuterung:

Mit dem Attribut width geben Sie die Breite der Grafik an, und mit height die Höhe (width = Breite, height = Höhe). Notieren Sie die Maße ohne Einheiten, wird automatisch px für Pixel herangezogen.

Es existieren mehrere Möglichkeiten, die genaue Breite und Höhe einer Grafik zu ermitteln. Entweder Sie nutzen ein Grafikprogramm, das diese Werte anzeigt, oder einen HTML-Editor, der beim Einbinden einer Grafik im Dialog auch gleich den Dateikopf der Grafik ausliest und die entsprechenden Angaben in das <img>-Tag automatisch einfügt. Ferner sind diese Eigenschaften zumeist via Kontext-Menü in Dateimanagern und Browsern abrufbar.

Beachten Sie:

Sie können auch Angaben zu Breite und Höhe einer Grafik machen, die absichtlich von den tatsächlichen Abmessungen der Grafik abweichen. Dadurch können Sie interessante Verzerrungseffekte erreichen, wie man sie von Cartoons kennt.

Neben Pixelangaben sind bei width und height auch Prozentangaben erlaubt. Solche Angaben beziehen sich auf den zur Verfügung stehenden Raum. Wenn sich die Grafik also beispielsweise in einem normalen Textabsatz befindet, bewirkt die Angabe width="100%", dass die Grafik über die gesamte Breite des Anzeigefensters (abzüglich der Seitenränder der angezeigten Webseite) dargestellt wird. Die Höhe wird hierbei zwar proportional angepasst, aber da Browser keine Bildbearbeitungsprogramme sind, kann die Qualität darunter leiden. Sinnvoll ist eine Prozentangabe beispielsweise bei Grafiken, die eine Linie darstellen (vgl. Seite Bars), um diese über die gesamte verfügbare Breite zu strecken.

Wenn Sie eine Grafik haben, die Sie an anderer Stelle in kleinerer Form wiederholen möchten (zum Beispiel ein Logo, das auf der Einstiegsseite groß angezeigt werden soll und auf den Unterseiten kleiner), brauchen Sie keine zwei Grafiken. Es genügt, wenn Sie, um eine Grafik kleiner darzustellen, die Angaben zu Breite und/oder Höhe proportional verkleinern. Wenn Ihr Logo beispielsweise die Ausmaße 300 Pixel breit und 200 Pixel hoch hat, können Sie es halb so groß darstellen, indem Sie beim Einbinden der Grafik width="150" height="100" angeben. Sinnvoll ist das aber nur, wenn die große Grafik bereits angezeigt wurde und sich im Cache-Speicher des Browsers befindet und wenn sich der Qualitätsverlust durch die fehlende Nachschärfung nicht negativ auswirkt.

nach obennach unten

HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Rahmen um Grafiken

Sie können festlegen, dass der Browser einen Rahmen um die Grafik zeichnet. Das entsprechende Attribut ist jedoch als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Umrahmung ist auch mit Hilfe von Stylesheets möglich, und dort mit viel mehr Möglichkeiten.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahmen um Grafiken</title>
</head>
<body>

<h1>Baum am Abend</h1>

<p><img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"></p>

</body>
</html>

Erläuterung:

Mit dem Attribut border innerhalb der Grafikreferenz wird ein Rahmen um die Grafik definiert (border = Rand). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke. Die Rahmenfarbe ist diejenige, die Text an der gleichen Stelle haben würde.

nach obennach unten

HTML 3.2XHTML 1.0MS IE 4.0Netscape 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Namen für Grafiken

Sie können festlegen, dass eine Grafik einen Namen erhält. Dies ist in Verbindung mit JavaScript sinnvoll. Der Name einer Grafik kann zum Beispiel beim JavaScript-Objekt Seite images von Bedeutung sein.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Namen f&uuml;r Grafiken</title>
</head>
<body>

<h1>Baum</h1>

<p><img src="baum.jpg" width="320" height="400" name="Baumbild" alt="Abendbaum"></p>

</body>
</html>

Erläuterung:

Mit name vergeben Sie einen Namen für die Grafik. Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (_) enthalten. Groß- und Kleinschreibung werden bei Sprachen wie JavaScript ebenfalls unterschieden.

nach obennach unten

HTML 4.0XHTML 1.0Netscape 6.0Mozilla Firefox 1 Langbeschreibung für Grafiken

Wenn Ihnen die Möglichkeit, mit dem alt-Attribut einen gewöhnlichen Alternativtext für eine Grafik zu notieren, nicht genügt, können Sie seit HTML 4.0 auch zu einer anderen Stelle oder Datei verweisen, wo sich nähere Textinformation zu der Grafik befindet. Der Browser könnte beispielsweise nur dann einen Verweis zu dieser Stelle anbieten, wenn die Grafik nicht anzeigbar ist.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Langbeschreibung f&uuml;r Grafiken</title>
</head>
<body>

<h1>Alte Zeiten</h1>

<p><img src="altezeiten.jpg" width="271" height="265" alt="alte Zeiten" longdesc="altezeiten.htm"></p>

</body>
</html>

Erläuterung:

Mit dem Attribut longdesc können Sie auf eine Stelle verweisen, wo die Grafik in Textform näher beschrieben wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum Seite Referenzieren in HTML.

Beachten Sie:

Lediglich Netscape ab 6.0 und Firefox unterstützen dieses Attribut bislang, und auch nur sehr versteckt: mit der rechten Maustaste über der Grafik klicken, aus dem Kontextmenü die Option Eigenschaften wählen, und in dem Dialog, der dann erscheint, auf die Adresse zu Beschreibung klicken bzw. die dort angegebene Adresse in die Adressenzeile des Browsers kopieren.

nach obennach unten

Weitere Informationen

In der Kapitel HTML-Referenz finden Sie Angaben darüber, wo das <img>-Tag vorkommen darf, welche Attribute es haben kann und was bei den einzelnen Attributen zu beachten ist:
Seite Element-Referenz für Grafikreferenzen (<img>)
Seite Attribut-Referenz für Grafikreferenzen (<img>)

Das Kapitel Kapitel Grafik enthält eine Einführung in web-gerechte Grafik, mit Beispielen und Beschreibungen zu einzelnen grafischen Techniken.

 nach oben
weiter Seite Grafiken ausrichten
zurück Seite Tabulator-Reihenfolge und Tastaturkürzel für Verweise
 

© 2005 Seite Impressum