Größe des Bildes

Jetzt denkst du vielleicht, über die Größe des Bildes wurde doch schon im Kapitel Bilder gesprochen. Stimmt. Da wurde darüber gesprochen, dass die Dateigröße des Bildes möglichst klein sein sollte, damit das Bild schnell geladen wird. Das hat aber nichts damit zu tun, wie groß das Bild auf der Seite erscheint. Im letzten Kapitel hast du gelernt, wie du Bilder referenzierst. Die Bilder wurden immer orginalgetreu dargestellt. Normalerweise wird beim Laden einer Seite zuerst der Text und dann die Bilder gezeigt. Mit "erst" und "dann" meine ich die zeitliche Abfolge beim Seitenaufbau. Das ist auch sinnvoll, weil die Bilder verhältnismäßig lange Ladezeiten haben.

<img src="../../Bilder/smil14.gif">

Dieses Bild ist 32 Pixel breit und 32 Pixel hoch. Es wird auf der Seite in Orginalgröße dargestellt.

Im Beispiel oben siehst du das noch mal. Da der Browser nicht weiß, wie groß das Bild ist, kann die ganze Seite erst richtig dargestellt werden, nachdem das Bild geladen ist.

<img src="../../Bilder/smil14.gif" width="32" height="32">

Das ist das selbe Bild mit Größenangabe.

In diesem Beispiel konnte die Tabelle und der folgende Text sofort dargestellt werden. Das Bild konnte nachträglich eingefügt werden. Beim Laden der Seite konnte der Browser genug Platz für das Bild lassen, da die Größe von vorn herein bekannt war. Diese Methode ist immer vor zu ziehen, weil der Seitenaufbau schneller geht und sich nach dem Erscheinen des Textes nichts mehr verschiebt. Die Angabe der Breite und Höhe des Bildes wird wie bei der Größe von Tabellen gemacht. Mit width= gibt man die Breite und mit height= die Höhe des Bildes an.

<img src="../../Bilder/smil14.gif" width="20" height="20">

Das ist das selbe Bild mit einer Größenangabe, die von der Orginalgröße abweicht.

Die dargestellte Bildgröße muss nicht unbedingt der tatsächlichen Bildgröße entsprechen. Da die Verkleinerung aber die Dateigröße nicht verändert hat, braucht das Bild genau so lange zum Laden, wie das große.

<img src="../../Bilder/smil14.gif" width="30" height="100">

Das ist das selbe Bild mit einer Größenangabe, die von der Orginalgröße abweicht. Höhe und Breite wurden nicht im selben Verhältnis geändert.

Wenn das Bild nicht in Orginalgröße dargestellt wird, muss man darauf achten dass man Höhe und Breite um den selben Faktor verändert, wenn man verhindern will dass das Bild verzerrt wird. Natürlich sind die Angaben in Pixel. Es sind also nur ganze Zahlen erlaubt.

<img src="../../Bilder/smil14.gif" width="320" height="320">

Wenn das Bild zu groß dargestellt wird, wird es pixelig. Normalerweise ist dieser Effekt nicht erwünscht. Er kann nur durch eine größere Bilddatei verhindert werden. Da bei diesem Bild nur Informationen für 32x32 Bildpunkte vorhanden sind, wird die 320x320 Pixel große Fläche in 32x32 Bildbereiche eingeteilt. Jeder Bereich stellt einheitlich auf allen seinen Pixeln die Bildinformation eines der Orginalpixel dar.

Der Trick mit den vorgeladenen Bildern.

<img src="http://land.heim.at/yellowstone/016_koecherbaumwald.jpg" width="1" height="1">

Bilder die lange zum Laden brauchen und/oder schnell erscheinen sollen, kann man im Voraus laden. Normalerweise werden alle Dateien, die man im Browser anzeigt, im Browsercache gespeichert. Wenn du eine Webseite besuchst, braucht sie oft sehr lange zum Laden. Wenn du sie noch mal besuchst, wird sie oft sehr viel schneller angezeigt. Das liegt daran, dass der Browser alle Dateien auf der Festplatte vorübergehend abspeichert. Wenn du die Seite das nächste mal besuchst, kann die Seite und ihre Bilder von dort wieder geladen werden. Im Beispiel wurde ein Bild mit 1465 Pixel Breite und 2093 Pixel Höhe in der Größe 1x1 Pixel dargestellt. Es erscheint also nur als winziges Pünktchen und ist nicht zu erkennen. Es befindet sich rechts neben dem hellen Bereich mit dem Quellcode oben. Wenn du gute Augen hast erkennst du ein winziges dunkles Pünktchen. Diese Seite hatte wegen diesem Bild eine sehr lange Ladezeit. Wenn du HIER klickst, öffnet sich ein neues Fenster, in dem das Bild in Orginalgröße gezeigt wird. Das Bild wird sehr schnell erscheinen, weil es ja schon im Browsercache zur Verfügung steht.

Größe relativ angeben.

Wie bei den Tabellen kann man auch die Größe eines Bildes in Prozent angeben.

<img src="../../Bilder/smil14.gif" width="60%">

Dieses Bild nimmt immer 60% der Fensterbreite ein. Probier es aus. Mach das Browserfenster kleiner und scroll wieder zu diesem Bild. Es nimmt immer 60% der Fensterbreite ein. Eine Höhenangabe solltest du hier natürlich nicht machen. Ohne Höhenangabe wird die Bildhöhe so gewählt, dass die Proportionen des Bildes stimmen. Schließlich kannst du nicht wissen, ob der Betrachter die Html-Seite in einem schmalen, hohen Fenster oder in einem niedrigen, breiten Fenster betrachtet.

Weiter geht es mit dem Kapitel Position des Bildes.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: