HTML: Bilder und Grafiken
Bilder oder Grafiken sind in der Regel nicht Teil der HTML-Datei, sondern werden in ihr lediglich referenziert. Das heißt, der Ort, an dem die Grafiken zu finden sind, sowie die Darstellungsart werden im Quelltext angegeben. Dies erfolgt über das <img>-Tag (image). Dieses Tag besitzt kein Endtag.
<img src='img/happy.png' alt='Smiley'><br>
<img src='img/happy.png' height='30' width='50' alt='Smiley'><br>
<img src='http://www.decocode.de/img/decocode.png' alt='decocode-Logo' title='Mein Logo'>
Der Ort der Grafik wird im Attribut src (source) angegeben. Für den Pfad gelten die gleichen Regeln wie für Links. Zugelassene Bildformate sind JPG bzw. JPEG, GIF, PNG und mit wachsender Browserunterstützung auch SVG. Das Format BMP wird meist ebenfalls unterstützt, sollte aber aufgrund der Größe der Bilddateien vermieden werden. Die Angaben für Höhe und Breite einer Grafik (height und width) sind optional. Werden sie angegeben, kann der Browser die Seite aber bereits rendern, bevor die Bilder im Einzelnen geladen sind, wodurch vermieden werden kann, dass das Layout der Seite sich im Verlauf des Ladens noch ändert.
Grafiken sollten immer in Originalgröße angezeigt werden. Zwar ist es möglich, über die Attribute height und width die Größe der Grafik zu manipulieren, jedoch geht das häufig auf Kosten der Bildqualität. Die Angaben in diesen Attributen sind ohne Einheit vorzunehmen. Also beispielsweise height='400' für 400 Pixel Höhe.
Ein Alternativtext wird angezeigt, wenn im Browser die Anzeige von Grafiken ausgeschaltet wurde oder wenn ein rein textbasierter Browser verwendet wird. Dazu dient das Attribut alt. Dieser Alternativtext ist auch für Menschen mit Sehschwäche hilfreich, die über diesen Text verbale Informationen über die Grafik erhalten können. Die Angabe des alt-Attributs ist vorgeschrieben, kann aber leer sein (alt='').
Der Alternativtext sollte nicht mit dem Titel des Bildes verwechselt werden, der durch das title-Attribut festgelegt wird und durch den ein Tooltip-Text wie bei Links erzeugt wird. Der Internet Explorer verwandelt den Wert des alt-Attributs ebenfalls in einen Tooltip, wenn kein Titel angegeben wurde, was jedoch eigentlich nicht korrekt ist und zur fälschlichen Annahme führen könnte, dass man das alt-Attribut für Tooltips verwenden kann. Das entspricht aber nicht der Idee des HTML-Standards zum alt-Attribut. Für Tooltips muss also immer das title-Attribut verwenden werden (funktioniert auch bei anderen HTML-Elementen)!
Für die Planung eines Webprojektes empfiehlt es sich, Grafiken in einem eigenen Verzeichnis unterzubringen, um sie so von den HTML-Dateien getrennt zu halten und eine bessere Übersicht über die vorhandenen Dateien zu gewährleisten.
Favicons
Favicons sind diese kleinen Bildchen, die in der Adresszeile des Browsers vor der Adresse angezeigt werden können. Mitunter werden diese auch in der Lesezeichen-/Favoritenliste angezeigt. Um solche Bilder zu verwenden, benötigt man natürlich zunächst ein solches Bild. Das Grafikformat dieses Bildes musste früher ICO sein, daher musste man eine Grafik erst in dieses Format umwandeln, bevor man sie zu diesem Zweck verwenden konnte. Aktuelle Browser unterstützen aber auch andere Grafikformate. Die Grafik sollte mindestens die Größe 16 × 16 Pixel besitzen. Am besten ist es, diese Grafikdatei unter dem Namen favicon.ico in das Wurzelverzeichnis des Webprojekts zu legen. Dann wird sie im <head> des Skripts mit folgendem Code referenziert:
<!-- ursprüngliches Grafikformat -->
<link rel='shortcut icon' href='favicon.ico'>
<!-- mittlerweile mögliches anderes Grafikformat -->
<link rel='shortcut icon' href='happy.png'>
Abbildungen
Das <figure>-Tag markiert einen Container (Blockelement) für Abbildungen, die Teil eines Textflusses sind. Abbildungen können neben Bilddateien auch SVG-Grafiken, Diagramme, Formeln etc. sein. Das <figcaption>-Tag markiert die Unterschrift der Abbildung.
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<figure>
<img src='img/duckie.png' alt='Quietsche-Entchen'>
<figcaption>Abb. 1: Das Quietsche-Entchen</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
Bilder in den Quelltext einbinden
Um ein Bild fest in das HTML-Dokument einzubinden, kann es im Quelltext in Base64-Kodierung referenziert werden.
Unter Linux steht dazu das Terminal-Programm base64 zur Verfügung, mit dem jede Datei kodiert werden kann:
base64 Schreibtisch/happy.png > Schreibtisch/output
In der so erzeugten Datei output befindet sich dann der Code, der in den Quelltext kopiert werden kann.
<img src='data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAA90lEQVQokaWTTU7DQAyFv6ngBEh0
wyUQXCFBPQziCr0Da7YVZxgOUEVqAuy7pIsW9Qj0dWEm8SRRJIQla2R7np/lnyCJvpRlOXDGGEPf
dzEGinEFbEEbC3w8uphLIglJFEUh6VvSWvq5Mj3QaYNOL8j+GcYB19LpeQiaSDDrStiAlnA8DnrQ
yg2EW2e3rI4RcsbMrjr2Wcv6Bwlze7uyXbk65J/7dpJf5iUA94u7ScZ+3MCfxlrX9SQ4xbVPJaVR
NePNyppW2bjSqLIN4wu0g3A9ZFUFXILevdNvWGOZVY3oyIYFfxjt/j695ax7eHgtgHy3w3+u6gw7
ow71Nyu+LwAAAABJRU5ErkJggg=='>
Das <picture>-Element
Das <picture>-Element wird verwendet, um zu einer Grafik Alternativen anbieten zu können, die unter bestimmten Umständen der eigentlichen Grafik vorgezogen werden können, beispielsweise bei besonderen Dimensionen des Browserfensters, fehlender Unterstützung des Dateiformats durch den Client o. ä. Es stellt einen Container dar, in dem die Alternativen durch <source>-Elementen referenziert werden und die eigentliche Grafik durch ein <img>-Element.
<picture>
<source srcset='img/duckie_small.jpg 700w, img/duckie_normal.jpg 1400w, img/duckie_big.jpg 2800w' sizes='' media='(max-width: 1199px)' type='image/png'>
<img src='duckie.jpg' alt='Foto: Entchen'>
</picture>
Animierte Grafiken
Das <canvas>-Element ist eine der Neuerungen von HTML5 und wurde geschaffen, um das Einbinden von animierten Grafiken zu ermöglichen, wie es bislang vor allem mit proprietären Lösungen wie z. B. Flash praktiziert wurde.
Während dieses Element lediglich einen bestimmten Bereich innerhalb des HTML-Dokuments für die Grafik bereitstellt, muss die Animation selbst mit einer Skriptsprache wie z. B. JavaScript ausgeführt werden.
Zwischen dem öffnenden und dem schließenden Tag dieses Elements kann man einen alternativen Inhalt angeben, der angezeigt wird, falls der verwendete Browser dieses Element nicht unterstützt.
Hier wird beispielsweise eine „analoge“ Uhr über das <canvas>-Element realisiert:
<div class='center'>
<canvas id='clock'><b></b></canvas>
</div>
<script>
// code inspired by Vishnu Haridas (http://jsbin.com/evodil/28)
size = 300;
cv = document.getElementById('clock');
cx = cv.getContext('2d');
cv.width = cv.height = size;
r = size / 2;
// background
cx.lineWidth = size / 15;
m = r + cx.lineWidth / 4;
grd=cx.createRadialGradient(m, m, r - cx.lineWidth, m, m, r + cx.lineWidth / 2);
grd.addColorStop(0, "#577");
grd.addColorStop(0.4, "#022");
grd.addColorStop(0.6, "#022");
grd.addColorStop(1, "#577");
cx.strokeStyle = grd;
cx.fillStyle = "#789";
cx.beginPath();
cx.arc(r, r, r - cx.lineWidth / 2, 0, Math.PI * 2, true);
cx.stroke();
cx.fill();
cx.lineCap="butt";
// scales
length1 = r * 0.9;
cx.strokeStyle = "#022";
for (i = 0; i < 60; i++) {
radian = i * 6 * Math.PI / 180;
if (i / 5 == parseInt(i / 5)) {
cx.lineWidth = size / 40;
length2 = r * 0.76;
} else {
cx.lineWidth = size / 200;
length2 = r * 0.83;
}
cx.beginPath();
cx.moveTo(r + length1 * Math.cos(radian), r + length1 * Math.sin(radian));
cx.lineTo(r + length2 * Math.cos(radian), r + length2 * Math.sin(radian));
cx.stroke();
}
logo = new Image();
logo.onload = function() {
cx.drawImage(logo, 0, 0, 0, 0);
};
logo.src = "http://www.decocode.de/img/html5.png";
_needle = function(cx, r, length, radian) {
cx.beginPath();
cx.moveTo(r + length * Math.cos(radian), r + length * Math.sin(radian));
cx.lineTo(r - r * 0.1 * Math.cos(radian), r - r * 0.1 * Math.sin(radian));
cx.stroke();
}
_clock = function() {
dateObject = new Date();
hours = dateObject.getHours();
minutes = dateObject.getMinutes();
seconds = dateObject.getSeconds();
// clear needles
cx.fillStyle = "#789";
cx.beginPath();
cx.arc(r, r, r * 0.76, 0, Math.PI * 2, true);
cx.fill();
// logo
logow = r / 5;
logoh = logo.height / logo.width * logow;
cx.drawImage(logo, r - logow / 2, r * 0.6, logow, logoh);
cx.shadowBlur = r * 0.03;
cx.shadowColor = "black";
cx.shadowOffsetX = r * 0.02;
cx.shadowOffsetY = r * 0.02;
// needle for hours
length = r * 0.5;
radian = (hours + minutes / 60 + seconds / 3600) * Math.PI / 6 - Math.PI / 2;
cx.lineWidth = size / 30;
cx.strokeStyle = "#022";
_needle(cx, r, length, radian);
// needle for minutes
length = r * 0.69;
radian = (minutes + seconds / 60) * Math.PI / 30 - Math.PI / 2;
cx.lineWidth = size / 40;
_needle(cx, r, length, radian);
// needle for seconds
radian = seconds * Math.PI / 30 - Math.PI / 2;
cx.lineWidth = size / 100;
cx.strokeStyle = "#900";
_needle(cx, r, length, radian);
cx.shadowBlur = 0;
cx.shadowOffsetX = 0;
cx.shadowOffsetY = 0;
setTimeout(_clock, 1000);
}
_clock();
</script>