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.

Hier die wichtigsten pixelbasierten Grafikformate fürs Web:
weitere Formate siehe Wiki

Bilder, die sofort dargestellt werden sollten nicht größer als 65 kbyte sein. Bei Hintergrundbildern ist das nicht immer möglich. Große Bilder könnten bis zu 1600 oder 1800 haben. Der Name des Bildes sollten dem Thema des Bildes entsprechen (SEO).

Thema dpi siehe hier

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

Lazy Loading Bilder nachladen

siehe auch Mediaevent

Bilder sind mit die größte Last beim Laden der Webseite. Es gibt die Möglichkeit Bilder erst dann zu laden, wenn sie durch scrollen auf der Seite erscheinen. Dazu bietet das Attribut loading 3 Möglichkeiten:

  • Mit auto werden Bilder normal geladen,
  • Mit eager (eifrig) wird es sofort geladen
  • Mit lazy wird das Bild geladen, wenn es im Viewport erscheint.

Es unterstützen noch nicht alle Browser dieses Attribut.

<img src="bild.png" loading="auto">   // Normal laden
<img src="bild.png" loading="eager">  // Bilder "above the fold"
<img src="bild.png" loading="lazy">   // Nachladen, wenn das Bild in den Viewport kommt 

picture Tag /responsive

Siehe auch responsive Images von kulturbanause

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

Hier kann man ein Bild online in verschiedene Größen erstellen lassen und den HTML Code des picture Elements erzeugen lassen. https://www.responsivebreakpoints.com/

<picture>
<source media="(min-width: 900px)" srcset="img/container900.jpg">
<source media="(min-width: 600px)" srcset="img/container600.jpg">
<source srcset="img/container320.jpg">
<img src="img/container600.jpg" alt="Bachner" 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. Das srcset sollman auch innerhalb eines img Tag verwenden können.

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

Siehe Beispiel

Man dann das source Element auch nutzen um 2 Grafiken zur Verfügung stellen für Retina Displays und anderes Displays. Retina Displays haben Bildpunktdichte oder man könnte auch sagen 2 Bildpunkte werden zu einem. Im Endeffekt wird dadurch ein Bild halb so groß dargestellt. Nun kann man ein zweites Bild erstellen, was doppelt so groß ist, sprich doppelt soviele Pixel in der Breite und Höhe haben.

<picture>
<source srcset="bildname1.jpg 1x, bildname2.jpg 2x">
</picture>

Eine andere Möglichkeit. Man gibt in den HTML Attributen width und height die halbe Pixelbreite und Pixelhöhe. Folgendes Beispiel steht für ein Bild mit einer Breite von 800x800.

<img src="bild.jpg" width="400" height="400">

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