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.
[a href="https://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.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project