Das Web stellt unterschiedliche Anforderungen an die Formate von Bildern, Fotos und Grafiken.
Die Qualität soll hoch, aber die Dateigröße soll gering gehalten werden, um lange Ladezeiten zu vermeiden.
Die drei geläufigsten Bildformate sind .jpg .png und .gif. Aber auch .svg oder .swf (z.B. Adobe Flash) können eingebunden werden.
img-Element
Mit dem img-Element werden Grafikdateien in HTML eingebunden. Das img-Tag ist ein inline-block Element (eine Mischung ais Inline und Block-Element) in einem
Standalone-Tag und muss entsprechen notiert werden.
<!--in HTML-->
<img src="bildname.png" alt="Bildbeschreibung">
<!--in XHTML-->
<img src="bildname.png" alt="Bildbeschreibung" />
Folgende Attribute stehen zur Verfügung
- alt: Bildbeschreibung (Pflicht)
- crossorigin: regelt, ob und welche fremden Seiten per Skript direkt auf das Bild zugreifen können
- height: Bildhöhe in Pixel oder Prozent
- width: Bildbreite in Pixel oder Prozent
- ismap: boolescher Wert für klickbare serverseitige Image Map
- longdesc: URL einer Quelle, für ausführliche Beschreibung des Bildes
- src: Bildname und Pfad
- usemap: Name einer Image Map
picture-Element
Das picture-Element ist neu in HTML5 und wird von den meisten, modernen Browsern unterstützt.
Mit dem picture-Element können Sie alternative Bildquellen für verschiedene Viewports (PC, Notebook, Tablet, Handy) angeben.
Ältere Browser können mit dem picture-Element nichts anfangen, aber es gibt ein JavaScript-Polyfill, das älteren Browsern auf die Beine hilft.
Laden sie die Datei picturefill.js herunter und implementieren sie diese im Head-Bereich des Dokuments.
Picturefill Download
<script>
// Create Picture element
document.createElement( "picture" );
</script>
<script src="picturefill.js" async></script>
JavaScript muss dabei asynchron geladen wird um dem Ladevorgang und das rendern der restlichen Seiteninhalte nicht zu beeinflussen.
Das picture-Elemente kennen außer Universalattribute keine weiteren Eigenschaften. (Zumindest weiss ich noch nichts davon!)
Viewport
Viewport beschreibt den aktuellen Anzeigenbereich des Browserfensters.
Der Benutzer betrachtet den sichtbaren Bereich eines HTML-Dokumentes (den body-Bereich) durch den Viewport.
Im Vollbildmodus entspricht die Größe des Viewports (in etwa) der Größe des Browserfensters.
Normalerweise ist der Viewport kleiner als das Browserfenster, weil diverse Symbolleisten, die Statusleiste,
Scrollbalken, eine Sidebar und die Taskleiste des Betriebssystems Platz beanspruchen.
source-Element
Das picture-Element alleine kann nichts machen, sie müssen unbedingten eines oder mehrere source-Tags schreiben.
Mit jedem source-Element definieren sie ein Bild mit unterschiedlichen Größen. Der jeweilige Browser ladet dann das für ihn passende Bild.
Sollte der Browser das picture-Tag nicht kennen, bzw sollte kein media-Attribut zutreffen, steht ein Fallback zur Verfügung, welches nach den source-Elemente geschrieben wird.
<picture>
<source media="(min-width: 980px)" srcset="bild-980.jpg">
<source media="(min-width: 480px)" srcset="bild-480.jpg">
<!---Fallback--->
<img src="bild.jpg" alt="Bild">
</picture>
Folgende Attribute stehen zur Verfügung
- srcset: Pfad und Dateiname für Bilddateien im picture-Element
- media: für media queries z.B. (min-width: 1024px)
- type: MIME-Typ
- sizes: Größenangabe für unterschiedliche Seitenlayouts (nur Bilder)