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.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant