Medien

Grafiken

Einbinden von Grafiken mit <img>-Tag

• src: URL von der das Bild geladen werden kann
• alt: Alternativer Text für Sehbehinderte und Textbrowser
• width, height: Abmessungen der Grafik in Pixel

Weitere Attribute (besser per CSS festlegen)

• border: Rahmen anzeigen oder nicht
• hspace, vspace: Abstand zum umgebenden Text
• align: Ausrichtung und Textumfluss

Beispiel für Grafikeinbindung

<img src="img/html-portrait.jpg" alt="Ein weiser Mann" width="100"/>
<img src="img/html-portrait.jpg" height="80"/>
<img src="img/html-portrait.jpg" width="300" height="80"/>

Bildformate (Vektor-Grafik)

• Scalable Vector Graphics (SVG)
• Vektorgrafik-Format
• Beliebig skalierbar
• XML-Beschreibung der Grafik
• Wird von den meisten Browsern nativ unterstützt

Bildformate (Pixel-Bilder)

• Graphics Interchange Format (GIF)
• Palettenbasiert (maximal 256 Farben)
• Eine Transparenz-Farbe wird unterstützt
• Verlustfreie Kompression mit Lempel-Ziv-Welch-Algorithmus (LZW)
• Einfache Animationen möglich
• Gut für Clip-Art, Strichzeichnungen und Schwarz-Weiss-Bilder geeignet

• Portable Network Graphics (PNG)
• Palette (256 Farben) oder bis zu 16 Bit pro Farbkanal (Echtfarben)
• Alphakanal für Transparenz
• Verlustfreie Kompression mit Deflate-Algorithmus (besser als GIF)
• Gut für Clip-Art, Strichzeichnungen und Schwarz-Weiss-Bilder geeignet

• JPEG
• Von der Joint Photographic Experts Group entwickelt
• In ISO/IEC 10918-1 genormt
• Echtfarben-Bilder (bis zu 24 Bit pro Farbkanal)
• Keine Transparenz
• Kompression ist verlustbehaftet
• Gut für Fotos
• Ungeeignet für Strichzeichnungen, Screen-Shots, Rasterbilder oder Schwarz-Weiss-Bilder

JPEG-Kompression

<div>  Qualität: 100, Größe:   kB</div>

Videos

HTML5 kann Videos über das <video>-Tag direkt abspielen

<video src="img/rick.webm" poster="img/rick.png" controls loop>
	This is fallback content to display for user agents that
  do not support the video tag.
</video>

ffmpeg -i rick.mkv -vf scale=640:480 -ss 00:00:42.0 -to 00:00:59.0 rick.webm