Webdesign-Workshop
von Wolfgang Bergt

Wolfdesign

Bilder und Grafiken

zur Startseite
zurück Inhaltsübersicht weiter

 

Inhalt

Grafikformate
Syntax
Grafikgröße
Grafikattribute
Speicherort
Kontext
Daumennägel
ImageMaps
Zusammenfassung
Quellen
 

Grafikformate

Grafiken für das Internet müssen in einem der drei Formate GIF, JPG oder PNG vorliegen. Würde man z. B. folgendes Foto mit den Kantenlängen 150 x 200 Pixel als BMP darstellen, so würde man 150 x 200 x 3 = 90.000 Byte oder 88 KB brauchen. Also dieses kleine Bild würde mit ISDN fast 20 Sekunden brauchen, um geladen zu werden.

Warnow in Rostock
150 x 200 Pixel, 88 KB (unkomprimiert)

Das Graphics Interchange Format (GIF) komprimiert das Bild ohne Qualitätsverlust. Es kann 256 Graustufen bzw. Farbabstufungen darstellen, davon eine transparent. GIF ist somit gut geeignet für gleichmäßig farbige Grafiken, aber nicht für Farbfotos und differenzierte farbige Bilder.

Warnow in Rostock GIF, 256 Graustufen, 25 KB   Warnow in Rostock GIF, 256 Farben, 8 KB
GIF, 256 Graustufen, 25 KB         GIF, 256 Farben, 8 KB

Mit GIF können animierte Grafiken erzeugt werden, bei denen die einzelnen Sequenzen wie bei einem Daumenkino nachenander gezeigt werden.

Die Joint Photographic Experts Group hat für JPG ein anderes Komprimierungsverfahren eingeführt, bei dem die Bildqualität mit stärker werdender Komprimierung schlechter wird. Man muss also einen Kompromiss für den jeweiligen Anwendungszweck finden.

Warnow in Rostock JPG, 6 KB   Warnow in Rostock JPG, 5 KB
JPG, 16 Mill Farben, 6 KB          JPG, 16 Mill Farben, 5 KB

Warnow in Rostock JPG, 4 KB   Warnow in Rostock JPG, 3 KB
JPG, 16 Mill Farben, 4 KB          JPG, 16 Mill Farben, 3 KB

Warnow in Rostock JPG, 2 KB   Warnow in Rostock JPG, 1 KB
JPG, 16 Mill Farben, 2 KB          JPG, 16 Mill Farben, 1 KB

Da die Bilder auf der Webseite nicht vergrößert werden müssen, können sie sehr stark komprimiert werden. Mit JPG können über 16 Mill Farben dargestellt werden.

Das Portable Network Graphics (PNG; sprich "ping") ist ein neues interlacingfähiges Grafikformat für Pixelbilder mit bis zu 24 Bit Farbtiefe, Alpha-Kanal und verlustfreier Komprimierung. Da es allerdings nicht vom MS-Internet Explorer bis zur Version 6.* dargestellt wird, ist es noch nicht sehr weit verbreitet.

zum Anfang

Syntax

Grafiken werden mir dem Image-Tag <img> eingefügt, der nicht durch einen Schluss-Tag geschlossen wird und deshalb wie z. B. <br /> oder <hr /> intern geschlossen werden sollte.

Das wichtigste Attribut ist die Quellenangabe src="Pfad/Dateiname", wodurch die Grafik ausgewählt wird.

Weitere Attribute sind width="" für die Breite, height="" für die Höhe, alt="" für einen alternativen Text, der das Bild kommentiert, title="" für einen weiteren Text, der im Browser angezeigt wird, wenn die Maus auf das Bild zeigt, border="" für einen Rand um das Bild und align="" für die Textausrichtung in der Umgebung des Bildes.

Der Wolf oben rechts wird z. B. mit folgendem Tag aufgerufen:

<img src="../grafik/wolf.gif" width="100" height="55" border="0" alt="zur Startseite" title="zur Startseite" />

zum Anfang

Grafikgröße

Die Grafiken sollten schon genau so groß und komprimiert gespeichert werden, wie sie auf der Webseite optimal dargestellt werden, denn bei einer Vergößerung durch den Browser würde Zeit verschwendet und Qualität verloren gehen. Auch eine Verkleinerung ist ungünstig, weil die Datei mehr Speicherplatz und Übertragungszeit brauchen würde als nötig.

zum Anfang

Grafikattribute

Man sollte unbedingt die Attribute für die Höhe und die Breite richtig angeben. Der Browser liest zuerst den Text ein. Für Grafiken lässt er nur ein kleines Quadrat frei, wenn die Angaben fehlen. Dann muss später der Text wieder neu ausgerichtet werden, wenn die Grafik eingefügt wird. Das kostet Zeit und ist lästig für den Anwender. Wenn die Angaben im Image-Tag stehen, lässt der Browser ein Rechteck in der richtigen Größe frei.

Wenn man auch noch einen Alternativtext angegeben hat, sieht der Anwender schon vor dem Laden der Grafik, welches Bild ihn erwartet.

zum Anfang

Speicherort

Manchmal werde ich gefragt, woran es liegen kann, dass die Grafiken online nicht zu sehen sind, obwohl offline alles geklappt hatte.

Meist liegt es daran, dass der HTML-Editor mit den absoluten und relativen Pfaden nicht korrekt umgeht.

Absolute Pfade sind die URL, die nur online die Grafik aufrufen kann oder die vollständige Angabe von Laufwerk/Orderstruktur/Dateiname. Das funktioniert nur an dem entsprechenden Rechner problemlos.

Günstiger ist es, sowohl auf dem Server im Internet als auch auf dem eigenen Rechner bzw. Datenträger eine gleichartige Ordnerstruktur anzulegen und relative Pfade zu benutzen. Dazu gibt man lediglich die Unterordnerstruktur und den Dateinamen an. Zu einem übergeordneten Ordner gelangt man mit ../

absolut: <img src="http://www.bergt.de/workshop/wolfdesign/grafik/wolf.gif" />
relativ: <img src="../grafik/wolf.gif" />

zum Anfang

Kontext

Grafiken können allein ohne Text einen Absatz bilden. Dann wird ihre Position durch das align-Attribut im Absatz-Tag gesteuert. Mit folgendem Quelltext wird die Grafik rechtsbündig angezeigt:
<p style="text-align:right"><img src="../grafik/wolf.gif" /></p>



Grafiken können aber auch gemeinsam mit Text einen Absatz bilden. Der Text fließt dann um die Grafik herum. Dabei wird das align-Attribut innehalb des Image-Tag benutzt. Mit folgendem Quelltext wird die Grafik rechtsbündig in einem Textabschnitt angezeigt:

<img src="../grafik/wolf.gif" align="left" />

Die Grafik sollte dabei am Absatzanfang aufgerufen werden.

Mit dem Attribut hspace="20" kann man den seitlichen (h wie horizontal) Abstand zwischen Text und Grafik auf 20 Pixel und mit vspace="10" den vertikalen (v) Abstand auf 10 Pixel festlegen.

Allerdings wirkt dieser Abstand auch zwischen Grafik und linkem Text-Rand.

Da sehen wir wieder, dass zur Gestaltung und Formatierung Styles Sheets besser geeignet sind.

zum Anfang

Daumennägel

Werden auf einer Seite mehrere oder große oder sogar mehrere große Grafiken dargestellt, dann dauert der Ladevorgang auch bei schnellen Internetzugängen sehr lange. Es ist zu empfehlen, dass man in solchen Fällen die Bilder in einer kleinen Version anbietet, zu der auch wirklich eine kleine Datei gehört, und erst beim Klick auf dieses Daumennagel-Bild das große Bild geöffnet wird.

Eine Galerie als Beispiel

zum Anfang

ImageMaps

Man kann Grafiken als Link benutzen. Dann klickt der Anwender auf die Grafik, um eine andere HTML-Seite aufzurufen.

Man kann aber auch verschiedenen Bereichen der Grafik unterschiedliche Links zuordnen. Dann handelt es sich um eine ImageMap. Diese Bereiche können kreisförmig (shape="circle"), rechteckig (shape="rect") oder polygon (shape="poly") sein.


<p align="center">
<table width="100%" height="100%">
<tr>
<td style="text-align:center" valign="middle">
<img src="karte.gif" alt="Karte von M-V" border="0" height="310" width="450" useMap="#karte">

</td>
</tr>
</table>
<map name="karte">
<area shape="rect" coords="15,15,265,32" title="Mecklenburg-Vorpommern" href="m-v.htm" target="_self">
<area shape="circle" coords="160,160,20" title="Bützow" href="buetzow.htm" target="_self">
<area shape="circle" coords="192,182,20" title="Güstrow" href="guestrow.htm" target="_self">
<area shape="circle" coords="183,95,25" title="Rostock" href="rostock.htm" target="_self">
<area shape="circle" coords="220,88,20" title="Ribnitz-Damgarten" href="ribnitz.htm" target="_self">
<area shape="circle" coords="238,176,20" title="Teterow" href="teterow.htm" target="_self">
<area shape="circle" coords="310,55,20" title="Bergen" href="bergen.htm" target="_self">
<area shape="circle" coords="325,117,20" title="Greifswald" href="greifswald.htm" target="_self">
<area shape="poly" coords="195,83,221,41,271,49,269,57,219,66,206,77" title="Fischland/Darss" href="darss.htm" target="_self">
<area shape="poly" coords="358,101,372,100,413,139,418,158,385,165,357,106" title="Usedom" href="usedom.htm" target="_self">
</map>

</p>

Und so sieht das aus: Beispiel

zum Anfang

Zusammenfassung

Grafik-Checkliste
zum Anfang

Quellen

zum Seitenanfang zum Workshop-Anfang zur Inhaltsübersicht