Mit HTML Bilder, Grafiken und Videos einpflegen

Wenn du es bis zu diesem Teil des HTML Lernen Tutorials geschafft hast: Respekt! Jetzt mal im ernst, HTML ist doch eigentlich gar nicht so schwer oder? Immerhin weißt du schon, wie du…

  • HTML Befehle in deinen Editor schreibst (wurde hier erklärt)
  • das HTML Grundgerüst für deine Website erstellst
  • Text mithilfe von HTML formatierst
  • Webseiten mit einer Verlinkung miteinander verknüpfst

Klingt erstmal nach gar nicht soviel, aber HTML besteht auch nicht aus viel mehr. Natürlich werde ich dir auf den nächsten Seiten noch einiges zeigen, aber später ist es nur noch ein wenig Recherche nach den einzelnen HTML Befehlen.

Ich arbeite nebenbei an einer HTML Referenz in der die einzelnen HTML Befehle und deren Attribute erklärt werden.

Aber nun gut, kommen wir zum eigentlichen Thema des HTML Tutorials: Mit HTML kannst du Bilder, Grafiken und Videos einpflegen.

Die Medienelemente

Du hast richtig gelesen. Mit HTML5 kannst du neben den Bildern und Grafiken auch Videos einpflegen, die auf dem Smartphone abgespielt werden können.

Bevor ich aber anfange dir zu erklären wie man die HTML Elemente auf die eigene Website bringt möchte ich dir grundlegendes über Bilddateien erklären.

Das PNG-Format

Ich finde, das PNG-Format ist das, was ich am meisten verwende. Das Format unterstützt viele Farben, vor allem aber Transparenz. Es eignet sich besonders gut fürs Webdesign, weil es nach der Erstellung mit diversen Tools wie www.tinypng.com nocheinmal komprimiert werden kann – der Qualitätsverlust ist minimal.

Das JP(E)G-Format

Dies eignet sich meiner Erfahrung nach gut für Bildaufnahmen mit der Kamera. Meist besteht allerdings das Problem, dass solche Bilder oft lange Ladezeiten mit sich bringen. Aber auch hier kann mit dem Tool jpegmini.com nachgeholfen werden. Optional kann die Bildqualität mithilfe von GIMP selbst eingestellt werden. Dabei empfehle ich Werte zwischen 70 und 90, dass muss man von Bild für Bild selbst abwägen.

Das SVG-Format

Ein unglaubliches Format. SVG Grafiken sind sogenannte Vektorgrafiken. Diese können in der Breite und Höhe beliebig verändert werden, ohne dass diese dabei pixelig erscheinen. Transparenz wird ebenfalls unterstützt. Das Htaccess24 Logo ist Beispielsweise ebenfalls als SVG-Datei implementiert.

Animationen mit dem GIF-Format

Oft sehe ich die Verwendung solcher Datein in Werbegrafiken, die Animationen enthalten. Ehrlich gesagt verwende ich dieses Format so selten wie möglich, denn oft weisen diese einen erheblichen Qualitätsverlust auf. Mit diversen JavaScripts lassen sich ersatzweise auch SVG-Grafiken animieren.

Mit HTML Videos einpflegen

Eigentlich gibt es hierfür nicht viel zu sagen. Hierbei handelt es sich um ein HTML Element, welches die Wiedergabe von Videodateien ermöglicht. Der HTML Befehl sieht wie folgt aus:

Für die Einbindung von HTML Videos haben sich bisher zwei Dateitypen in den Vordergrund gerückt: OGG und MP4.

Aufgrund rechtlicher Einschränkungen und Patenten sollte man diese zwei Formate für die Wiedergabe von Videos in den HTML Code schreiben.

Browserkompatibilität Mozilla Firefox

Browserkompatibilität Internet Explorer

Browserkompatibilität Opera

Browserkompatibilität Google Chrome

Browserkompatibilität Safari

Browserkompatibilität iOS

Browserkompatibilität Android

OGG

ja

nein

ja

ja

nein

nein

nein

MP4

nein

nein

nein

ja

ja

ja

ja

Bilder und Grafiken implementieren

Es gibt zwei Möglichkeiten, mit denen sich Bilder auf die eigene Website einpflegen lassen. Einmal mit dem HTML Befehl img (<img alt="" /> und dem Befehl picture (<picture><picture>. Das standardmäßige img Element eignet sich dafür, ein einfaches Bild auf die Website zu bringen:

Der <img alt=““ /> HTML Befehl

Im Listing oben siehst du, wie du ein einfaches Bild in deine Website einfügst. Du benötigst dafür nur den HTML <img alt="" /> Befehl und die Attribute src zur Angabe des Pfades zur Bilddatei. Das alt-Attribut sollte für eine kurze Bildbeschreibung verwendet werden. Ich empfehle dir, für die Bildbeschreibung maximal 100 Zeichen zu setzen, selbstverständlich ist dir hier keine Grenze gesetzt, aber weniger ist mehr 😉

Der <picture></picture> HTML5 Befehl

Für den <picture></picture> HTML habe ich im Listing oben ebenfalls ein Beispiel zur Verwendung angegeben. Diesen Befehl gibt es seit HTML5, der aktuellsten HTML Version. Das schöne an diesem Element ist, dass man mehrere Bildquellen angeben kann und der Browser die für sich beste Option wählt. So wird zum Beispiel für das Smartphone ein anderes Bild zur Anzeige ausgewählt als für Tablets. Gerade für responsives Webdesign kann dies interessant werden – dazu aber später mal mehr.

Optional: Mit HTML Audios abspielen

Noch ein nettes Feature seit HTML5 ist die Möglichkeit zur Wiedergabe von Audio Dateien. Dank diesem HTML Befehl wird dem Webentwickler die Möglichkeit geboten, einen Standard zur Einbindung von Audiodateien zu wählen. Vor HTML5 gab es nämlich keinen Standard und die Einbindung wurde über weitere PlugIns wie Flash gelöst. Um Audiodateien auf die Webseite einzupflegen ist folgender HTML-Befehl zuständig:

Browserkompatibilität Mozilla Firefox

Browserkompatibilität Internet Explorer

Browserkompatibilität Opera

Browserkompatibilität Google Chrome

Browserkompatibilität Safari

MP3

ja

ja

ja

ja

ja

WAV

nein

nein

nein

ja

ja

OGG

nein

ja

ja

nein

ja