Grafiken werden mittels des img-Tag eingebunden. Sie haben die Möglichkeit, einer Grafik die tatsächliche Größe per width und height mitzugeben. Auch wenn dies nicht unbedingt notwendig ist, sollten Sie diese Arbeit erledigen. Der Browser reserviert schon beim Aufbau der HTML-Seite den Platz für die Grafik. Da das Laden der Grafik je nach Internet-Leitung einige Sekunden benötigt, verschiebt sich somit die Seite nicht mehr nach dem Laden der Grafik. Auch sollten Sie einen Alternativ-Text der Grafik mitgeben. Diese wird angezeigt, wenn die Grafik nicht geladen wird oder wenn der Benutzer mit der Maus über die Grafik fährt. Suchmaschinen können keine Bilder auswerten. Daher stützen sie sich auf den Alt-Tag der Grafik.
Grafik ohne Attribute eingebunden
<img src="file:///C:/images/rss.png" border="0" alt="" />
Geben Sie der Grafik nach Möglichkeit die Größe mit
<img src="file:///C:/images/rss.png" border="0" alt="" width="149" height="126" />
Die haben auch die Möglichkeit, die Größen zu ändern. Je nach dem wird die Grafik verzerrt
<img src="file:///C:/images/rss.png" border="0" alt="" width="350" height="100" />
Auch der Alternativ-Text sollte mitgegeben werden. Suchmaschinen danken es ihnen
<img src="file:///C:/images/rss.png" border="0" alt="Dies ist der Alternativ-Text" width="149" height="126" />
Link über eine Grafik
<a href="http://www.google.de"><img src="file:///C:/images/rss.png" border="0" alt="Dies ist der Alternativ-Text" width="149" height="126" /></a>
Wir haben in obigem Beispiel jeder Grafik „border=0“ mitgegeben. Dies bewirkt, dass um die Grafik ein Rand angezeigt wird. Dies ist sehr lästig. In unten stehendem Beispiel definieren wir eine CSS-Klasse, die auf alle Grafiken ein border=0 anwendet, so dass wir uns die explizite Anweisung jedes Mal sparen können.
img { border:0; }
Grafik ohne Attribute eingebunden
<img src="file:///C:/images/rss.png" alt="" />