Bilder

Bilder werden mit dem Standalone Element img eingebunden. Bilder sind Inline-Block Elemente. Sie verhalten sich wie Inline Elemente im Textfluss. Sie erzeugen keine neue Zeile und werden am unteren Zeilenrand positioniert. Man kann Bildern jedoch eine feste Breite und Höhe zuweisen, was bei normalen Inline-Elementen nicht möglich ist. Achten Sie bei Bildern auf eine möglichst geringe Dateigröße und binden Sie aus diesem Grund nicht zuviele Bilder auf einer HTML- Seite ein.

Pixelgrafiken im Netz können folgende Dateiformate haben:

img Tag

<img src="../images/test.jpg" width="725" height="408" alt="testbild">

Attribute

src

src="bild.jpg"

Verweis / URL zum Bild

alt & title

alt="alternativer fallback Text"
Reiseziel: <img src="fahne-usa.png" alt="USA">

In dem alt Attribut eines Bildes vergibt man einen Fallback- Text. Das ist ein Text, der angzeigt wird, wenn die Grafik nicht angezeigt wird. Das alt Attribut soll das Bild nicht prosaisch beschreiben, sondern lediglich ersetzen, sofern es nicht angzeigt wird.

<img src="cartoon.png">
In HTML5 muss das alt Attribut nicht zwangsläufig vergeben werden. Das kommt dann zum Tragen, wenn man keine Möglichkeit hat, in knapper Form den Inhalt des Bildes zu beschreiben, beispielsweise bei einem kompletten Comic Strip.

alt=""
Das ist die deutsche Fahne: <img src="fahne-fr.gif" alt="">
Wenn sich die Art der Grafik aus dem Zusammenhang ergibt, fügt man ein leeres alt- Atribut hinzu.

title="beschreibender Text"
Wenn man einen beschreibenden Text zur Grafik hinzufügen will, kann man diesen dem title Attribut zuweisen. Er wird in der Regel beim Berühren der Grafik als Tooltip im Browser angzeigt. Die Wertzuweisung im title Attribut wird als normaler Text interpretiert.

width & height

width="725" height="408"

Die Angabe der tatsächlichen Breite und Höhe des Bildes unterstützt den Browser beim Aufbau der Seite. Ohne diese Angaben kann der Browser die Seite erst dann anzeigen, wenn die Seite mit dem Bild komplett geladen ist. Mit der Größenangabe weiß der Browser schon vorher wieviel Platz für das Bild eingeräumt werden muss. Verwenden Sie diese Angaben nicht, um ein Pixelbild in anderer Größe darzustellen. Verkleinern Sie lieber das Bild mit einem Bildbearbeitungsprogramm.

Es ist allerdings möglich ein Bild mit einer anderen Angabe zu verkleinern. Bei SVG Grafiken macht das durchaus Sinn. Mit einem Prozentzeichen hinter der Wertangabe ist auch eine prozentuale Verkleinerung möglich. Wenn Sie nur eine der beiden Größenangaben angeben (width, height), bleiben die Proportionen erhalten.

Anhand folgender Formel können Sie bei einer Änderung der Breite die neue Höhe errechnen.
neue Höhe = original Höhe * (neue Breite / original Breite)

Mit folgender CSS Anweisung passen sich die Bilder dem verfügbaren Platz an.

img{max-width: 100%; height: auto;}

siehe auch Bildgröße mit CSS

Siehe responsive Image srcset

picture Tag /responsive

Das html5 Element picture wurde eingeführt, um verschieden große Grafiken für verschieden große Bildschirme einzubinden. siehe W3schools

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Innerhalb des picture Elements kann man mehrere source Tags einbinden. Über das CSS media Querie kann man die Bildschirmgrößen definieren in denen ein Bild angezeigt werden soll. das srcset Attribut bekommt den Verweis auf das entsprechend große Bild.

Man kann mehrere source Elemente einfügen, das welches zuerst greift, wird ausgeführt, alle weiteren werden ignoriert.

Zum Schluß wird ein herkömmliches img Tag eingebunden um Abwärtskompatibilität zu gewährleisten (ältere Browser).

Siehe Beispiel

SVG Grafiken einbinden.

In HTML 5 kann man SVG Grafiken genau wie Pixelgrafiken mit dem img Element einbinden. SVG = Scalable Vector Graphics. Es sind Vektorgrafiken die in einer XML basierten Sprache definiert werden. Das bedeutet, dass man SVG Grafiken mit jedem Texteditor erzeugen kann, sofern man die Sprache beherrscht.

SVG Logo

 

Imagemap

siehe auch Image Map Generatoren

Free Download Install Fast Image Map / Gebrauchsanleitung
Online Image Map Net Generator

Ein Imagemap zu deutsch eine verweissensitive Grafik ist ein Bild, welches anklickbare Bereiche mit einem Link enthält. Hinter jedem anklickbaren Bereich verbirgt sich also eine URL.

<img src="karte.gif"  usemap="#landkarte">

<map name="landkarte">  
  <area shape="rect" coords="340,100,400,170" href="http://www.muenster.de" alt="Münster">
</map>

map Element

Ein Imagemap wird durch das map Element erzeugt. Es bekommt ein Attribut name mit einem selbstvergebenen Namen als Wert. (keine Leerzeichen, Sonderzeichen etc.)

<map name="landkarte"></map>

usemap Attribut

Damit eine Verbindung zwischen dem Imagemap und dem Bild hergestellt wird, bekommt das img- Element das Attribut usemap mit einem Anker auf das name Attribut des map Elements zugewiesen.

<img src="bild.jpg" usemap="#landkarte">

area Element

Im Gültigkeitsbereich des map Elements werden area Elemente eingefügt. Dort werden die Links mit dem href Attribut und die Bereiche mit einem shape Attribut definiert. Hier lässt sich auch das globale Attribut title einfügen, um zusätzliche Informationen zum Link einzufügen, die im Browser in Form eines Toolstipps dargestellt werden.

shape & coords Attribut

Die Bereiche können rechteckig shape="rect" (Rectangle), beliebig geformt shape="poly" (Polygon) oder kreisförmig shape="circ" oder shape="circle" (Circle) sein.

Das Attribut coords erwartet Werte, welche Entfernung oder Größe in Pixeln des Bildes darstellen.

shape="rect"

coords="x1,y1,x2,y2" Die Koordinaten beim Rechteck werden durch 2 Punkte definiert, die linke, obere Ecke des Rechtecks und die rechte, untere Ecke. Die Punkte werden generell definiert durch den ersten Wert x= horizontaler Abstand vom linken Rand in Pixeln und zweitens dem Wert y= vertikaler Abstand vom oberen Rand in Pixeln.

shape="circ" / shape="circle"

Ein Kreis wird durch 3 Werte definiert, den x,y Koordinaten des Mittelpunktes und dem Radius in Pixeln. Der Kreis wird durch die Wertzuweisung circ oder circle im shape Attribut definiert

shape="poly"

Ein Polygon wird durch mehrere Punkte definiert, die der Reihe nach mit den x und y Koordinaten aufgeführt werden. x1,y1,x2,y2,x3,y3... Der letzte Punkt wird mit dem ersten verbunden.

 

Kreisläufe in der Natur und ökologischem Anbau Fruchfolge Wasserkreislauf Bodenkreislauf Natürliche Schädlingsbekämpfer