Bilder und Grafiken einbinden

Ein Beispielcode zum Einbinden einer Grafik wäre:

<img src="bild.jpg" alt="eine grafik">

Erklärung:

"img" steht für image, engl. für Bild.
"src" bedeuted source, engl. für Quelle, dort wird der Dateiname der Grafik bzw. den Pfad dorthin angegeben.
"alt" alt ist der alternative Text der angezeigt wird, falls das Bild nicht (mehr) existiert, fehlerhaft benannt worden ist oder ein Besucher alle Bilder ausgeblendet hat.

Um das ganze auf Ihrem Rechner auszuprobieren, erstellen Sie eine Grafik mit dem Namen den Sie bei "src" eingeben, und speichern Sie das Bild im selben Ordner indem auch die HTML-Datei liegt, oder laden Sie sich eine Grafik aus dem Internet (Rechtsklick aufs Bild -> speichern unter) und bennenen Sie das Bild nach Wunsch (Rechtsklick auf die gespeicherte Datei -> umbenennen).

Will man nun das Bild skalieren oder horizontal ausrichten, so ist folgendes Beispiel eine Möglichkeit, einfach mal experimentieren und selber herausfinden was passiert:

<img src="bild.jpg" alt="eine grafik" width="100" height="150" align="left">

Achtung:
Wenn Bilder manuell skaliert werden (wie oben gezeigt) kann es passieren, dass das Bild verzerrt wird. Ein Beispiel wäre ein Bild von einem Gesicht dass in der Höhe gleich bleibt jedoch in die Breite gezogen wird. Dass das ganze nicht schön aussieht ist klar. Prozentuale Angaben der Bildgröße wären eine Möglichkeit. So können sie statt 100 einfach 100% schreiben und der Browser halbiert die Maße.

Bilder fürs Web optimieren

Wenn aber, wie oben erwähnt, viele große Bilder per HTML-Angaben verkleinert werden, müssen diese jedoch trotzdem in Originalgröße auf den Computer des Besuchers geladen werden, erst dort kann der Browser diese dann verkleinert anzeigen. Deshalb beugen Sie lange Ladezeiten vor indem Sie Bilder mit einem Grafikbearbeitungsprogramm verkleinern anstatt sie nur zu skalieren.
Viele Grafikbearbeitungsprogramme bieten die Möglichkeit Bilder "fürs Web optimiert zu speichern", diese Möglichkeit sollten Sie immer in Betracht ziehen, da die Qualität kaum leidet, jedoch die Dateigröße drastisch reduziert wird. Hier ein Beispiel:

Original	Optimiert
JPG 175KB	JPG 41KB

Wie Sie sehen, sehen Sie nichts! Nun ja, fast nicht... das optimierte Bild, dessen Dateigröße 4 mal kleiner ist, hat eine kleine Unschärfe in den Lichtreflexionen im Auge. Da das auch nur mit genauestem Hinsehen erkennbar ist zeigt ziemlich gut, dass eine Optimierung hinsichtlich der Dateigröße bei wenigen Grafiken kein Nachteil bietet, bei vielen, großen Grafiken zur Notwendigkeit wird.
Sollen Grafiken oder Bilder in hervorragender Qualität Ihren Weg zum Besucher finden, binden Sie diese verkleinert auf Ihrer Webseite ein und verlinken diese zusätzlich in Originalgröße. Ein Link auf große Datein (>500KB) sollten Sie immer kenntlich machen sodass Besucher mit limitiertem Datenvolumen (vorallem beim Surfen mit mobilen Endgeräten) die Möglichkeit haben einen datenintensiven Download zu vermeiden.

Grafik als Verweis

Grafiken als Verweise zu definieren ist oft nützlich, z.B. bei einem Button. Mit Hilfe der Schachtelung der beiden Tags (img-Tag + a-Tag) kann man eine Grafik zum Link machen.

Hierbei gibt es allerdings ein kleines Problem. Normale Links werden standardmäßig unterstrichen und um Grafiken wird ein Rahmen gelegt. Um diesen zu vermeiden muss das Attribut border="0" in den img-Tag eingefügt werden.

<a href="http://www.html-einfach.de/"><img src="bild.jpg" alt="das ist ein bild" border="0"></a>

Will man nun auf allen Seite das Umrahmen von Grafiken verhindern könnte man das in einer externen Stylesheetdatei zentral definieren:

*img{ border:0px;}

zurück