HTML img-Tag für Bilder

Grafik in die HTML-Seite einbauen

Neben Text ist die Grafik ein wesentlicher Bestandteil einer HTML-Webseite und zwar sowohl als Teil des Layout und damit der optischen Darstellung als auch als Teil des Inhaltes bestimmter Unterseiten oder der Startseite. Es geht sogar noch weiter, denn mit Bilder und Videos erreicht man viel mehr Menschen, die gerne Abwechslung haben.

Das ist nicht immer möglich, weil man mitunter einfach eine Textinformation zusammenfassen muss und Bilder kaum dazu passen, aber einen Park zu beschreiben, ohne entsprechendem Bildmaterial enttäuscht dann doch einige Besucherinnen und Besucher.

Mit dem img-Tag Bilder auf die Webseite stellen

Erledigt wird die Aufgabe in beiden Fällen durch den img-Tag, der dem Browser Bilder ankündigt - sei es als Hintergrundgrafik für einen Navigationspunkt, als Hintergrundgrafik für die gesamte Seite, als Teil einer Bildergalerie, als Logo oder in welcher sonstigen Form auch immer man sich die Grafik nutzbar machen möchte.

Dabei haben sich drei Grafikformate durchgesetzt, die von allen Browsern richtig dargestellt werden: PNG, GIF und JPEG (oftmals auch JPG definiert). Diese drei Bildformate werden für die unterschiedlichsten grafischen Aufgaben herangezogen, wobei Fotos fast durchwegs als JPEG geliefert werden, grafische Elemente meist als GIF oder PNG (das GIF aus rechtlichen Gründen ersetzen sollte, es aber nicht geschafft hatte) bestehen. Diese Liste kann sich aber auch jederzeit ändern, wobei sich die drei Formate schon sehr lange halten.

Versuche mit WebP von Google oder JPEG 2000 modernere Bildformate zu etablieren, sind bis dato gescheitert.

Einsatz und Funktionen

Neben dem reinen Bild gibt es auch die Image-Map, eine Möglichkeit, um ein Bild in Bereiche zu unterteilen und individuell zu verlinken. Solche Lösungen trifft man öfter auf Webseiten an und dienen dann als besondere Navigation, speziell auf Übersichtsseiten oder der Startseite selbst.

Wichtig ist bei der Integration der Bilder auch die barrierefreie Programmierung geworden, weshalb man unbedingt bei Inhaltsgrafiken den Alt-Text ausfüllen sollte. Wer die Bilder nicht sehen kann, erhält so eine Information, was es mit dem Bild auf sich hat. Und so ganz nebenbei kann man die Möglichkeit erhöhen, dass die Bilder gefunden und auch über Bildersuchmaschinen aufgesucht werden können.

Lesen Sie auch

Die Bilder kommen eigentlich mit dem img-Tag alleine aus, sind aber enorm wichtig für den Gesamteindruck, wobei das auch vom Thema abhängt. Der img-Tag lässt sich verschieden ergänzen wie mit dem wichtigen ALT-Zusatz als Textinformation zum Bild und dann gibt es auch noch die Image-Map als Navigationsvariante auf Basis eines Hintergrundbildes.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel