Ein Großteil einer Webseite besteht aus Grafiken - ob zur Dekoration, als Navigationselemente, zur Information oder einfach um Ihr Logo zu präsentieren. Aber wie bekommen Sie die Grafiken nun auf Ihre Webseite?

Es ist empfehlenswert zunächst in Ihrem Homepage-Verzeichnis einen Ordner anzulegen, in welchem Sie die Bilder ablegen. Diesen können Sie beliebig benennen, Sie müssen aber bei der Angabe der Bildquelle immer den korrekten Ordner (Pfad) angeben. Natürlich können Sie die Grafiken auch im selben Verzeichnis abspeichern, allerdings könnte dies mit der Zeit unübersichtlich werden.

Auch hier gibt es wieder einen Tag, der definiert, dass an der entsprechenden Stelle ein Bild gewünscht ist. Diese Text ist nach dem englischen Begriff für "Bild"=Image benannt. "src" steht in dem Tag für "Source"=Quelle.

<img src="Quelle der Bilddatei">

Als Quelle der Bilddatei müssen Sie den Ordner, wo Sie die Grafik abgelegt haben sowie den Namen der Bilddatei (in den meisten Fällen jpg oder gif) angeben.
Z.B. /img/bild.gif

Wenn Sie dieses einmal testen, werden Sie feststellen, dass Ihr Browser die Grafik in der Originalgröße darstellt. Möchten Sie das Bild verkleinern oder vergrößern, so müssen Sie die Grafik in Ihrem Grafikprogramm ändern. Um unnötige Ladezeiten zu vermeiden, können Sie durch einen entsprechenden Code die Größe des Bildes in Pixel direkt definieren. Bilder können so theoretisch auch verkleinert oder vergößert werden, dies ist aber nicht zu empfehlen. Hat Ihre Grafik z.B. die Maße 80 x 80 Pixel, so geben Sie an:

<img src="Quelle der Bilddatei" width="80" height="80">

Sie können Grafiken auch einen Rahmen zuordnen und über die Eingabe eines Wertes die Dicke dieses Rahmens definieren:

<img src="Quelle der Bilddatei" width="80" height="80" border="2">

Probieren Sie selbst aus, welche Rahmendicke Ihnen am besten in Ihrem Design gefällt. Sollten Sie keinen Rahmen wollen, können Sie als Attribut border="0" setzen.

Eine weitere Möglichkeit, die sich Ihnen bietet, ist das Einfügen von Alternativtext. Dies ist der Text, der erscheint, solange das Bild noch geladen wird oder - wenn das Bild geladen ist - der erscheint, wenn man mit der Maus über das Bild "drüberfährt". Wichtig ist dieser Text auch für Nutzer, die das Laden der Bilder aus Traffic-Gründen abgeschaltet haben oder für blinde Menschen, die sich eine Webseite durch ein Programm vorlesen lassen.

<img src="Quelle der Bilddatei" width="80" height="80" border="2" alt="Alternativer Bildtext">

Beachten Sie bitte, dass Grafiken die Ladezeit Ihrer Webseite erhöhen. Achten Sie daher darauf, dass die Bilder möglichst eine geringe Dateigröße aufweisen.

TIPP:
Wenn Sie Buttons für Ihre Webseite erstellen wollen, testen Sie unseren » Navigations-Creator.

» Übersicht