michaelheim.com

img kennzeichnet den Tag als Bild-Tag. src definiert die Adresse, unter der das Bild abgespeichert ist. width definiert die angezeigte Breite des Bildes und heigth definiert die angezeigte Höhe.

Alt-Text
Unter alt kann ein Text angegeben wird, der zweierlei Funktionen hat. Einerseits wird er in den meisten Browsern angezeigt, wenn sich der Mauszeiger über das Bild bewegt. Andererseits dient er auch der behindertenfreundlichen Gestaltung von Internet-Seiten. In den USA gibt es sogar ein Gesetz, das eine solche Gespaltung verlangt. Denn der Alt-Text dient auch dazu, in Browsern für Sehbehinderte, welche den Inhalt einer Seite vorlesen, das Bild zu Beschreiben.

Gängige Dateitypen
Im Internet können (und sollten) folgende Dateitypen verwendet werden:
JPEG (*.jpg) für Fotos und nichtgrafische Bilddaten. Die Jpeg-Komprimierung ist besonders gut bei kontrastreichen Bilden (zB Texten sichtbar). Ihr Vorteil ist aber die grosse Farbtiefe. Damit eignet sich die Jpeg-Komprimierung vor allem für Fotos.
GIF (*.gif) für Grafiken und Texte. Anders als die Jpeg-Komprimierung arbeitet GIF mit der Reduktion der Farbtiefe (es werden weniger Farben angezeigt). Sie eignet sich dabei schlecht für Bilder mti Farbverläufen. Weil dies wenig Auswirkung auf kontrastreiche Stellen hat, ist GIF besonders geeignet für Grafiken mit Text und klaren Linien (wie die Beispielgrafik auf dieser Seite). Gif erlaubt ferner, transparente Flächer zu verwenden.
Beide Dateitypen haben den Vorteil, plattformunabhängig zu sein (sei können sowohl auf Windows, Linux, als auch auf Macintosh geöffent werden). Durch die Komprimierung wird - etwa im Gegensatz zum Windwos Bitmap (*.bmp) - die Übertragungszeit der Daten stark minimiert (ein Jpeg ist etwa ein zehntel so gross wie das entsprechende Bitmap).

Angezeigte vs. reale Grösse
Auf einer Website muss die angezeigte Grösse eines Bildes nicht der effektiven Grösse der Grafik-Datei entsprechen. Keinen Sinn macht in der Regel, die angezeigte Grösse kleiner zu setzen als die effektive Grösse.

Angenommen eine Grafik wäre 300 auf 500 pixel Gross (die Auflösung in dpi einer Grafik spielt im Internet KEINE Rolle). Wird diese mit einer engezeigten Grösse von 150 auf 250 Pixeln in eine Seite eingebunden, so sieht das Bild nicht besser aus, als wenn eine Grafik eingebunden würde, die effektiv nur 150 auf 250 Pixel gross ist. Nur dass so eine grössere Datenmenge herunter geladen werden muss. --> Also: Die Datei sollte nie grösser sein, als sie angezeigt wird.

Das umgekehrte, eine Grafik grösser anzuzeigen, als sie ist, kann durchaus Sinn machen. Eigentlich werden durch das grösser Aufziehen die einzelnen Pixel sichtbar. Beinhaltet die Grafik aber nur horizontale und vertikale Linien (wie unser Beispielbild), so kann sie beliebig skaliert werden. Diesen Effekt kann man zB verwenden, um individuelle Balken zu gestalten. Aus dem Beispielbild wird dann ein (auf Seitenbreite) skalierter Balken:

BaZ-Logo
In diesem Beispiel wurde die Weite auf width="549" gesetzt. Alternativ wäre auch ene angabe in Prozenten denkbar. Die originale Breite der Datei ist aber nur 83 pixel.

Unsichtbare Grafiken
Bilddateien des Datentyps GIF (Grafical Interchange Format; *.gif) ermöglichen es, transparente Flächen zu definieren. Weiter gesponnen, sind daher auch ausschliesslich transparente Dateien denkbar. Diese werden in der Regel zur Gestaltung der Website verwendet, wenn es darum geht, absolut definierte Abstände zu setzen.

Das Beispiel (leer.GIF) ist nicht sichtbar, es ist daher mit einem Rahmen versehen:

In diesem Beispiel ist leer.GIF 30 auf 22 pixel gross. Eigentlich ist dies eine Verschwendung von Speicherplatz, denn eine 1 auf 1 px grosse Datei hätte die genau gleiche Wirkung, da sie beliebig skaliert werden kann (siehe vorangehendes Kapitel).

Die transparente Grafik kann nun verwendet wurden, um einen exakt 100 pixel breiten Abstand, wie diesen hier:einzufügen. Der Besucher sieht nicht, dass es sich dabei um eine Grafik handelt.

Animated Gif
Lange Zeit gehörte der schaufelnde Bauarbeiter zum klassiker auf jeder Internetseite, auf der etwas "under construction" war. In letzter Zeit haben die animierten Grafiken stark nachgelassen - unter anderem, weil sie dich Flash-Animationen abgelöst wurden. Ein Beispiel:

Das animierte Gif setzt sich aus eine Mehrzahl einzelner Grafiken zusammen, die - wie beim Film - in einer frei wählbaren Frequenz hinter einander abgespielt werden. Dies gibt zwei Möglichkeiten.
Bei einer Frequenz von rund 24 Bildern pro Skeunde entsteht ein Film. Die einzelnen Grafiken sind also teil einer Bewegungsabfolge (wie im Beispiel).
Bei Frequenzen von weniger als einem Bild pro Sekunden dagegen entsteht eine Diashow, bei der auch komplett verschiedene Grafiken hinter einander gereiht werden können.
Animierte Gif haben der Vorteil, mit einfachen Mitteln bewegte Objekte erstellen zu können. Sie werden auch auf allen Browsern korrekt angezeigt. Der nachteil liegt in relativ grossen Datenmengen. Das - relativ einfache - Beispiel auf dieser Seite ist 54 kB gross. Ein einzelnes Bild dieser Ausmasse umfasste nur einen Bruchteil.
Ein "Overkill" an anim-Gifs hat aber dazu geführt, dass der Ruf der animierten Grafiken gelitten hat. Denn zeitweise prangten auf jeder Seite meist mehrere Bewegte Objekte, deren einziger Sinn oft darin lang, sich zu bewegen. Hier ist weniger oft mehr. Oder - gemäss dem Credo der Special Effects - der Grundsatz: Ein technischer Kniff ist umso besser, je weniger er als technischer Kniff wahrgenommen wird.

Texte formatieren
Zu diesem Thema gibt es eine eigene Seite.

Andere Texte einbinden (mit PHP)
Zu diesem Thema gibt es eine eigene Seite.