Webdesign mit (X)HTML und CSS

Bilder sind Inline-Elemente und werden mit dem img-Element eingebunden.

1. <img src="bild.jpg" alt="alternative Textinformation" />

Der Wert des src-Attributs (source) gibt die Adresse des anzuzeigenden Bildes an.

Wenn ein Bild nicht dargestellt werden kann, zeigt der Browser die Textinformation des alt-Attributes an. Das alt-Attribut ist eine Pflichtangabe. Wenn kein geeigneter Alternativtext angegeben werden kann, so muss das alt-Attribut leer bleiben (alt="").

Attribute width und height

Mit den Attributen width und height wird dem Browser mitgeteilt, in welcher Größe ein Bild darzustellen ist. Wenn die Maße eines Bildes angegeben werden, halten manche Browser bereits beim Laden eines Dokumentes den benötigten Platz frei und ein »Herumspringen« des Inhalts beim Ladevorgang wird vermieden.

1. <img src="bild.jpg" alt="alternative Textinformation" width="150" height="200" />

Pixelgrößen im Attributwert werden ohne Maßeinheit notiert.

Es sind auch Prozentwerte möglich – width="50%" lässt das Bild die Hälfte des verfügbaren horizontalen Platzes einnehmen. Ohne explizite Höhenangabe wird das Bild entsprechend seiner Pixelmaße proportional skaliert.

Geeignete Bildformate fürs Web

• JPEG – für Photos, Bilder mit vielen Farben/Verlauf
• GIF – für Bilder mit wenigen Farben/Farbflächen, Grafiken; Transparenz möglich
• PNG - sowohl für Photo als auch für Grafik; Alphatransparenz möglich (aber vom IE<7 nicht unterstützt)