Bilder

So schön ein Text auch sein mag – Bilder verdeutlichen einen Sachverhalt oft eindrücklicher, als es Worte allein vermögen. Das Sprichwort „Ein Bild sagt mehr als tausend Worte“ kommt nicht von ungefähr.

Um ein Bild in Ihre Seite einzubauen, verwenden Sie das <img>-Tag (img steht für Image = Bild). Ein typisches Einsatzbeispiel ist:

<img alt="Ansicht A" src="bild.png" width="300" height="400">

Hinweis: Wie <hr> und <br> verfügt auch das <img>-Tag über kein schließendes Gegenstück.

Auf alt= folgt eine knappe Bildbeschreibung. Sie wird angezeigt, wenn der Browser keine Bilder darstellen kann oder so konfiguriert ist, dass Bilder erst auf Anforderung geladen werden.

Hinter src= fügen Sie den Dateinamen des Bildes ein; mit den Angaben hinter width= (Breite) und height= (Höhe) lassen Sie den Browser wissen, welche Größe in Pixeln das Bild hat. Zwar funktioniert das <img>-Tag auch ohne die Angabe von Breite und Höhe, mit ihnen ist der Browser jedoch in der Lage, eine HTML-Seite bereits korrekt darzustellen, bevor die Bilddaten übertragen wurden. Durch die Angabe dieser Werte schonen Sie also die Augen des Betrachters, da der bereits angezeigte Text nicht „springt“, wenn der Browser mit jedem geladenen Bild die Seite neu aufbaut.

Ob eine Bilddatei tatsächlich die angegebene Größe hat, ist unerheblich. Der Browser skaliert das Bild entsprechend den Angaben hinter width= und height= – was Sie jedoch nicht dazu verführen sollte, Ihre Digitalfotos mit der vollen, oft mehrere Megapixel umfassenden Größe zu verwenden und sie lediglich mittels width= und height= zu skalieren. Die meisten Browser glätten („interpolieren“) so skalierte Bilder nicht, was zu unschönen Ergebnissen führt.

Wenn Sie Ihre Digitalfotos auf diese Weise zu kleinen Vorschaubildern („Thumbnails“) verkleinern, strapazieren Sie darüber hinaus die Geduld des Betrachters, da der Browser trotz verkleinerter Darstellung die komplette Bilddatei laden muss. Skalieren Sie Ihre Bilder daher zuvor in einem Bildbearbeitungsprogramm und speichern Sie diese unter einem anderen Namen, z. B. „bild-klein.png“. Der besseren Übersicht wegen können Sie Ihre Bilder auch in einem Unterverzeichnis ablegen. Denken Sie aber in diesem Fall daran, hinter src= den Dateinamen mit Pfad anzugeben, z. B. <img src="bilder/urlaub_2008/hotel.png" width="300" height="200">.

Ein paar Worte zu Dateiformaten

Die Zahl der Dateiformate für Bilddaten ist kaum überschaubar. Neben den häufig von Scanprogrammen verwendeten Formaten TIFF und JPEG existieren TGA, BMP, PCT, PCX und zahlreiche weitere. Viele dieser Formate gliedern sich in weitere Unterformate, die sich beispielsweise durch verschiedene Verfahren zur Datenkompression unterscheiden.

Die im Internet gebräuchlichen Formate sind GIF, JPEG und PNG. PNG („Portable Network Graphics“) ist das jüngste Format und sollte bevorzugt werden, da es die Vorteile der beiden anderen vereint. Darüber hinaus ist PNG frei von Rechten Dritter und offen dokumentiert (www.w3.org/Graphics/PNG). Beherrscht Ihre Bildbearbeitung dieses Format nicht, sollten Sie darüber nachdenken, sich ein solches Programm zuzulegen. Eine überaus gute Wahl stellt zum Beispiel GIMP dar (www.gimp.org), das äußerst leistungsfähig und nahezu kostenlos erhältlich ist (außer den normalen Online-Gebühren fallen keine weiteren Kosten an). GIMP ist durch seinen Funktionsumfang nicht ganz einfach in der Handhabung. Aber wenn man eine Weile damit gearbeitet und sich an die Bedienung gewöhnt hat, lässt es in Sachen Bildbearbeitung kaum einen Wunsch unerfüllt.

Wenn Sie sich in GIMP einarbeiten möchten, empfehle ich Ihnen, sich eines von mehreren verfügbaren Büchern zu diesem Programm zu besorgen.

Bilder als Verweise

Ebenso wie Text lassen sich auch Bilder als Verweise verwenden. Ein einfaches Beispiel ist:

<a href="index.html"><img src="hoch.png" width="20" height="20"></a>

Üblicherweise werden als Verweise definierte Bilder vom Browser mit einem Rahmen versehen. Sie können das verhindern, indem Sie im <img>-Tag die Option border="0" angeben. Selbstverständlich können Sie statt der Null eine positive Ganzzahl angeben – der Browser versieht das Bild dann mit einem entsprechend starken Rahmen.

Weiter zu: Tabellen

Nach oben