Images in HTML
Dies ist eine Zusammenfassung des Artikels: "Images in HTML" von Chris Heilmann
Bilder ja/nein
Achtung! Es gibt Gründe warum man nicht immer Bilder für eine HTML nützen sollte:
User die mit mobilen Geräten surfen, schalten Bilder wegen dem sowieso kleinem Bildschrim, oder der hohen Datenrate aus
Blinde oder sehbehinderte Menschen können Bilder gar nicht, oder wenn dann nur schlecht sehen
Menschen mit anderem kulturellen Hintergrund nehmen Symbole evtl. anderst war
Suchmaschinen analysieren (bisher) nur Text, keine Bilder
Deshalb: Bilder intelligent einsetzen und evtl. eine Alternative anbieten.
Einbinden der Bilder in HTML
Wichtig:
Wenn das Bild für den Inhalt der Seite wichtig ist, sollte es direkt im HTML (<img> Element) und mit dem passenden alternativen Text eingepflegt werden.
Wenn das Bild nur als Verschönerung dient ist es sinnvoller dies mit CSS einzubinden
Und so wird das JPG Beispielbild eingebunden:
<img src="Beispielbild.jpg">
hier ist zu beachten, dasss das Bild im selbern Ordner wie die index.html liegen muss!
Bei diesem Befehl wird das Bild zwar angezeigt, die HTML ist allerdings nicht valide. Hierfür wird ein alternativer Text (<alt>) benötigt. Wird das Bild aus einem bestimmten Grund nicht angezeigt (z.B. Bild kann nicht gefunden oder geladen werden, der Browser unterstützt keine Bilder oder ein User mit Seheinschränkungen ließt die HTML mit einer bestimmten Software), so tritt der "alt-Text an die Stelle des Bildes". Deshalb sollte dieser so aussagekräfitig wie möglich sein.
<img src="Beispielbild.jpg" alt="ein einfaches Beispielbild ohne Inhalt">
Achtung! Nicht mit zusätzlichen Informationen verwechseln die auftauchen wenn der Mauszeiger über dem Bild liegt. Hierfür gibt es das <title> -Attribut.
<img src="Beispielbild.jpg" alt="ein einfaches Beispielbild ohne Inhalt" title="ein super Beispielbild wie ich finde.">
longdesc - Ausführliche Beschreibung
Bei komplexen Bildern, zum Beispiel Schaubildern gibt es das <longdesc> - Attribut. Dieses Attribut verweist auf eine seperate HTML mit ausführlicher Beschreibung. Dies ist visuell nicht festzustellen, wird aber von Screenreadern erkannt und an die Userweitergegeben, ob sie den longdesc nutzen wollen.
Beispiel:
das Bild (inlineimagelongdesc.html) mit "longdesc-Attribut":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example of an inline image with longdesc</title> </head> <body> <img src="chart.png" width="450" height="150" alt="Chart showing the fruit consumption amongst under 15 year olds. Most children ate Pineapples, followed by Pears" longdesc="fruitconsumption.html"> </body> </html>
die "longdesc-HTML" (fruitconsumption.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Fruit consumption</title> </head> <body> <table summary="Fruit Consumption of under 15 year olds, March 2007"> <caption>Fruit Consumption</caption> <thead> <tr><th scope="col">Fruit</th><th scope="col">Amount</th></tr> </thead> <tbody> <tr><td>Apples</td><td>10</td></tr> <tr><td>Oranges</td><td>58</td></tr> <tr><td>Pineapples</td><td>95</td></tr> <tr><td>Bananas</td><td>30</td></tr> <tr><td>Raisins</td><td>8</td></tr> <tr><td>Pears</td><td>63</td></tr> </tbody> </table> <p><a href="inlineimagelongdesc.html">Back to article</a></p> </body> </html>
Schnellere Bilder
Standardmäßig weiß ein Browser nicht die Größe der Bilder. So läd er erst den ganzen Text und passt diesen dann an, wenn das Bild geladen ist. Dies kann man umgehen wenn man die Größe des Bildes schon vorher angibt. Somit wird dieser Bereich gleich für das Bild freigehalten. Zwar kann man das Bild auch per HTML sklieren, dies sollte aber vermieden werden. HTML skaliert zum einen die Bilder nicht verlustfrei und andererseits wird bei einem kleiner skaliertem Bild das Quellbild geladen, was sinnlose Ladezeit verursacht!
<img src="Beispielbild.jpg" alt="ein einfaches Beispielbild ohne Inhalt" title="ein super Beispielbild wie ich finde." width="400" height="360">
CSS
Wenn es darum geht Bilder in irgendeiner Art und Weise in der HTML auszurichten: CSS benutzen. HTML hat zwar auch ein paar dafür, ist aber lange nicht so einsetzbar und flexibel wie CSS. Somit ist die Ausrichtung mit HTML passé.