17: Images in HTML


Zusammengefasst nach dem Artikel von Christian Heilmann

Quelle: http://dev.opera.com/articles/view/17-images-in-html/
Semantic HTML and Search Engine Optimization

Es ist sehr verlockend viele Bilder für eine Webseite zu verwenden. Man sollte jedoch bedenken, dass nicht jeder diese in seinem Browser angezeigt bekommt:
User von mobilen Geräten haben vielleicht die Bilder ausgeschaltet, um damit nicht den Verbindungsaufbau zu beeinträchtigen
Menschen mit einer Sehschwäche

Daher sollte schon vorher entschieden werden, ob die verwendeten Bilder relevant für die Seite sind. Besonders wichtig ist es, eine alternative für sehschwache oder blinde Menschen anzubieten.

Bildtypen

Es gibt 2 verschiedene Arten ein Bild in ein Dokument einzufügen: mit Hilfe des <img> Tag oder durch das CSS.
Wenn das Bild essenziell für dein Inhalt der Webseite ist, dann wird der <img> Tag verwendet. Dient das Bild jedoch nur als „eye candy“, dann wird am besten mit dem background image im CSS gearbeitet. Der Grund dafür ist, dass solche Bilder keinen alternative Information brauchen, da sie für blinde Menschen nicht relevant sind.

<img> Element und seine eigenschaften

Voraussetzung im HTML für das Einfügen von Bildern mit dem <img> Tag ist, dass das Bild in dem gleichen Ordner liegt wie das HTML file.

Beispiel:
<img src=“balconyview.jpg“>

Was hier noch fehlt ist das „alt“ Attribut. Diese Eigenschaft zeigt einen Text anstatt des Bildes, wenn dieses nicht verfügbar ist. Das macht es auch für blinde Menschen einfacher die Webseite zu verstehen, da sie diesen alternativen Text vorgelesen bekommen.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“>

Der alternative Text wird jedoch nicht angezeigt, wenn das Bild erfolgreich geladen werden kann. Es ist also somit kein Tooltip, welcher auftaucht, wenn mit der Maus länger über dem Bild verharrt wird.
Um diese zusätzliche Information zu erhalten, sollte das „title“ Attribut zum <img> Tag hinzugefügt werden. Diese Eigenschaft kann sehr hilfreich sein, es ist jedoch keine geeignete Form, um wirklich wichtige Informationen zu transportieren. Stattdessen ist es ein guter Weg, um vielleicht das Bild im allgemeinen zu erklären.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“ title=“What I see when I look out of my window; the castle was one reason to move there.“>

Des Weitern ist es vorteilhaft, einem <img> Tag eine definierte Breite („width“) und Höhe („height“) zuzuweisen. Damit kann verhindert werden, dass das Laden der Bilder bzw. der gesamten Seite nicht zu lange dauert.

Beispiel:
<img src=“balconyview.jpg“ alt=“View from my balcony, showing a row of houses, trees and a castle“ width=“400“ height=“186“>

Hintergrundbilder mit CSS

Mit dem CSS gibt es viele verschiedene Möglichkeiten, ein Bild zu platzieren. Es kann hinter oder rund um einen Text gesetzt werden und auch wiederholt werden.
Eingefügt wird das Bild im CSS mit dem „background-image“ Auswahl und der URL. Im Falle, dass das Bild nicht angezeigt wird, sollte als eine alternative eine Hintergrundfarbe angegeben werden.

Beispiel:
background-image:url (ball.gif);
background-color:#eee;

Als eine weiter Eigenschaft kann angegeben werden, ob sich das Bild wiederholen soll, oder nicht:

• Bild nicht wiederholen: background-repeat: no-repeat;
• Bild nur horizontal wiederholen: background-repeat: repeat-x;
• Bild nur vertikal wiederholen: background-repeat: repeat-y;

Steht beim „background-image“ ansonsten nichts dabei, wird es automatisch horizontal und vertikal wiederholt.
Um das Hintergrundbild dann noch speziell zu platzieren, wird „background-position“ (top, center, bottom, left, right) verwendet.

Mit der Hilfe von CSS können somit erstaunliche Hintergrundbilder entstehen, welche davor nicht möglich waren.