Bilder¶
Bilder machen einen Großteil heutiger Websites und Apps aus. Beste Beispiele sind „Pinterest“ und „Instagram“. Aber auch jedes andere soziale Netzwerk verwendet sehr viele Bilder. Bilder unterstützen das Design und auch die Inhaltsvermittlung innerhalb einer Website.
Bilder einfügen¶
Mit dem <img> – image (englisch für Bild) – können Grafikdateien in HTML-Dokumente eingebunden werden. img ist ein sogenanntes Selbstschließendeselement ohne Elementinhalt und ohne End-Tag. Kein End-Tag bedeutet, dass es kein schließendes </img>-Tag gibt.
Bemerkung
Bilder sind Inline-Elemente und erzeugen keinen Zeilenumbruch.
Das Element img besitzt mehrere Attribute.
Das
src-Attribut. Src steht für source und beinhaltet den Pfad zu dem eigentlichen Bild auf dem PC/Server.Das
alt-Attribut. Falls das Bild vom Browser nicht gefunden werden kann, wird es nicht auf der Website angezeigt. Dafür wird dann der alt-Text angezeigt. Der alt-Text ist auch für Google interessant, da Google unteranderem an dem alt Text erkennen kann, welchen Inhalt das Bild hat.
Bemerkung
Es muss immer die Dateiendung angegeben werden. Bei Bilder z.B. .jpg, .png, .webp oder auch .gif.
1<img src="Pfad zum Bild auf dem PC/Server" alt="Hier steht die Beschreibung des Bildes">
2
3<img src="/assets/img/ironman.jpg" alt="Iron Man von vorne in seinem demolierten Kampfanzug">
Über das
width-Attributkann die Breite eines Bildes definiert werden. Die Breite sollte nicht größer angegeben werden, als die eigentliche Bildgröße. Sonst sieht das Bild verpixelt oder verzehrt aus.
1<img src="/assets/img/ironman.jpg" width="150" alt="Iron Man nur 150px breit">
Das gleiche geht auch mit der Höhe. Über das
height-Attributkann diese definiert werden.
1<img src="/assets/img/ironman.jpg" height="150" alt="Iron Man nur 150px hoch">
Bemerkung
Es sollte immer nur ein Attribut, width oder height, angegeben werden. Damit die Bildseitenverhältnisse gleich bleiben und das Bild nicht verzehrt ist.
See the Pen Bilder by Html Website (@html_website) on CodePen.