Einbinden von Bildinhalten in HTML-Seiten

Bildinhalte

Es gibt verschiedene Typen von Bildinhalten in HTML-Seiten.
  1. JPG-Dateien enthalten vorzugsweise fotografisches Material, d.h. Fotos (mit Helligkeitsverläufen).
  2. GIF-Dateien enthalten vozugsweise Grafik (auch animiert). Sie sind nicht so gut für fotografisches Material geeignet.
  3. Das PNG-Dateiformat ist ein neueres Format, enthält vorzugsweise Grafik, kann aber auch fotografisches Material in hoher Qualität speichern. Die entstehenden Dateien sind für fotograisches Material etwa doppelt so gross wie die entsprechende JPEG-Datei.
  4. SVG-Dateien enthalten Vektorgrafik. Diese Dateien sind die erste Wahl bei der Verwendung von Grafik im Web, da sie sehr klein sind. Es werden sozusagen nur die mathematischen Formeln für die Erstellung der Grafik gespeichert.

Wie bindet man Bilder in HTML-Seiten ein?

Dieses haben Sie bereits vorher geübt.
siehe: http://www.w3schools.com/tags/tag_img.asp

Beispiel: SVG-Grafiken

Auf folgenden Seite finden Sie frei verwendbare Tierkreiszeichen im SVG-Format:
Eigene SVG-Grafiken können Sie auch z.B. mit Adobe-Illustrator erstellen und wie gewohnt einfach mit dem img-Tag in Ihre Seiten integrieren, z.B. wie folgt:
<img
   src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Taurus.svg"
   width=50>
Selbstverständlich funktioniert das ganze auch mit transparenten GIFs, siehe z.B.
oder transparenten PNGs, siehe z.B.
aber die SVG-Dateien sind aufgrund ihrer Größe die allererste Wahl.
  1. http://www.mediaevent.de/svg-in-html-seiten/
  2. http://svg.tutorial.aptico.de/start3.php?knr=2&kname=Darstellung%20v..&uknr=2.1&ukname=SVG-Grafiken%20in%20Webdokumenten
  3. https://pvse.com/blogeintrag/items/svgs-responsive-praktisch-einsetzen.html
  4. http://www.w3schools.com/css/css_rwd_intro.asp
  5. https://blog.kulturbanause.de/2014/02/svg-grafiken-erstellen-und-einbinden/
  6. https://wiki.selfhtml.org/wiki/SVG/Einbindung

Animierte Grafiken

Tracking Pixel / Web Beacon

In HTML-Seiten finden Sie häufig Bilder, welche nur einen Pixel groß sind und oft transpararent oder in der Farbe des Hintergrundes dargestellt werden. Solche Pixel werden zu Tracking-Zwecken eingesetzt, siehe ...