HTML-Dateien selbst erstellen
	Dokumentation: HTML
		Grafik in HTML

Ladevorgang für Grafiken optimieren

Breite und Höhe einer Grafik mit angeben
Grafik in zwei Versionen laden

Breite und Höhe einer Grafik mit angeben

Anzeigebeispiel: So sieht's aus

Wenn Sie Grafiken in HTML-Dateien einbinden, die Sie im WWW anbieten wollen, sollten Sie immer die Breite und Höhe der Grafik mit angeben. Dadurch entnimmt der WWW-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muß nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. Dadurch kann er die gesamte WWW-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 WWW-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat.

Beispiel:

<img src="datei.gif" width=250 height=450>

Erläuterung:

Mit der Angabe width= [Pixel] geben Sie die Breite der Grafik an, mit height= [Pixel] die Höhe.

Beachten Sie:

Um die genaue Breite und Höhe einer Grafik zu ermiteln, brauchen Sie entweder 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.

Um einem Besucher Ihrer WWW-Seiten nicht ungefragt große Grafiken mit langen Ladezeiten zuzumuten, können Sie auch Vorschaugrafiken verwenden.

Tips:

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.

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 Höhe proportional verkleinern. Wenn Ihr Logo beispielsweise die Außmaß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 WWW-Browsers befindet.

Grafik in zwei Versionen laden

Anzeigebeispiel: So sieht's aus

Dieses Feature ist dann sinnvoll, wenn Sie aufwendige Grafiken im WWW präsentieren wollen. Dazu brauchen Sie zwei Versionen einer Grafik: eine hochauflösende, die Sie am Ende präsentieren wollen, und eine niedrigauflösende, die möglichst schnell angezeigt werden soll. Leider wird diese Möglichkeit bislang nur von Netscape interpretiert. Sie können Netscape veranlassen, erst einmal die kleinere, niedrigauflösende Grafik anzuzeigen. Wenn dann das gesamte Dokument mit allen Grafik- und sonstigen Referenzen geladen ist, lädt Netscape in einem zweiten Schritt die höherauflösende, größere Grafik "über" die bereits geladene einfachere Version. Das kostet zusätzlichen Speicher, hat aber den Vorteil, daß der Anwender die WWW-Seite in ihrem Aufbau schneller am Bildschirm hat.

Beispiel:

<img src="datei.jpg" lowsrc="datei.gif" width=300 height=700>

Erläuterung:

Durch die Zusatzangabe lowsrc= bewirken Sie, daß Netscape zunächst die niedrigauflösendere, kleinere Grafik lädt (das ist die Grafik, die Sie bei lowsrc= angeben). Wenn die komplette Seite geladen ist, lädt Netscape die hochauflösende, größere Grafik (das ist die Grafik, die Sie bei src= angeben).

Beachten Sie:

Beide Grafiken sollten sinnvollerweise den gleichen Inhalt und die gleiche Größe haben. Ihr Unterschied sollte in der Auflösungsqualität und im Speicherbedarf liegen.

Blättern:

Abstand zwischen Grafik und umgebenden Text Grafiken als Verweise

HTML-Dateien selbst erstellen

Dokumentation: HTML

Grafik in HTML

Stefan Münz, s.muenz@euromail.com

	Blättern:
Abstand zwischen Grafik und umgebenden Text			Grafiken als Verweise