0251 / 590 644 - 0
info@a-coding-project.de

Bilder optimieren fürs Web: Tipps für Einbindung und Größenanpassung

Anpassung per Codezeile

Der HTML-Code, mit dem ein Bild in eine Website eingebunden wird, sieht folgendermaßen aus: [img src="Bild.png" width="400" height="50" alt="Bild" /] Idealerweise hat ein Bild bereits die Größe, die es später auch auf der Website haben soll – dies garantiert die höchste Qualität. Mittels width (Breite) und height (Höhe) kann die Größe eines Bildes im Nachhinein verändert werden. Dabei sind sowohl Pixel- als auch Prozentangaben möglich. Bei Pixelangaben sollte darauf geachtet werden, die Seitenverhältnisse des Originalbildes beizubehalten, um das Bild nicht zu verzerren. Prozentangaben beziehen sich auf die Internetseite – 100 Prozent width bedeutet also, dass sich das Bild über die gesamte Breite der Internetseite erstreckt. Bei Prozentangaben wird entweder das width- oder das height-Attribut verwendet, der andere Wert wird proportional dazu ermittelt, eine Verzerrung findet hier also nicht statt. Der im "alt"-Attribut hinterlegte Text wird angezeigt, falls das Bild einmal nicht geladen werden kann. Bilder mit Links Mithilfe eines Bildes kann man einen Link besonders hervorheben: [a href="http://www.meinestartseite.de"] [img src="meinbild.png" width="140" height="10" /] [/a] Mithilfe dieses Codes wird erreicht, dass ein Klick auf das Bild den Nutzer auf den hinterlegten Link leitet.