Sie sind hier: Startseite -> HTML-Grundlagen -> Bilder

Mit HTML Bilder in die Webseite einbauen

Verschiedenste Bilder auf einer Webseite nutzen

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


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


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. Sie funktionieren zwar, aber wer Bilder hochlädt, lädt meist JPG-Bilder auf den Server und viele Bildbearbeitungsprogramme beziehen sich auch darauf.

Was kann man mit Bilder noch machen?

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.


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


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.

Es gibt leider immer noch zu viele Webseiten, auf denen die Bilder nicht mit dem Alt-Text beschriftet sind, obwohl die Suchmaschinen auf diese Art und Weise sogar ein wichtiges Schlüsselwort nochmals mitgeteilt bekommt.

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.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Bilder in HTML nutzenArtikel-Thema: Mit HTML Bilder in die Webseite einbauen
Beschreibung: Mit 🌍 HTML gelingt es sehr einfach, ✅ Bilder in eine Webseite einzubauen, um optisch mehr bieten zu können.

Kategorien

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

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