Bilder / img

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.

Bildformate

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

jpg - Verlustbehaftetes Komprimierungsverfahren. Wenn man ein jpg Bild immer wieder neu als jpg abspeichert, wird es immer schlechter. Je stärker man es komprimiert, desto kleiner ist die Dateigröße.
gif - Bis zu 256 unterschiedliche Farben sind möglich, davon kann eine Farbe transparent sein. Zu dem Bild kann eine Farbpalette mitgeliefert werden, in der nur die Farben definiert sind, die im Bild vorkommen. Ein Bild, in dessen Farbpalette nur wenige Farben hat, hat eine geringe Dateigröße.(Logos, Flaggen, Icons).

Das folgende Bild wurde als Gif Bild mit 3 Farben gespeichert. Es hat eine Dateigröße von 1,68 kb
png - Verlustfreies Komprimierungsverfahren, auch halbtransparente Pixel sind möglich. Sehr gute Qualität.
webP siehe hier sowohl verlustbehaftet als auch nicht verlustbehaftet. Animationen sind möglich. Erreicht eine hohe Komprimierung. caniuse

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 1800 kb haben. Der Name des Bildes sollten dem Thema des Bildes entsprechen (SEO).

bmp Neuerdings können auch Bitmaps mit der Endung bmp in einigen Browsern dargestellt werden Es ist jedoch davon abzuraten, diese zu nutzen, da die Bilder nicht komprimiert sind und somit eine große Datenlast mit sich bringen.

Thema dpi siehe hier

img

Bilder werden mit dem img Element in die HTML-Seite eingebunden. Es ist ein standalone Element ohne schließendes Tag. Das img-Element benötigt mindestens 2 Attribute: src mit einer URL auf das Bild und alt mit einem alternativen Fallback Text.

<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. Auch wenn das Bild rein dekorativen Zwecken gilt.

Ausführliche Infos zum Alt-Attribut

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, das heißt sie werden der Reihe nach geladen.
Mit eager (eifrig) wird ein Bild sofort geladen
Mit lazy wird das Bild erst 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. Zum Schluß wird ein herkömmliches img Tag eingebunden um Abwärtskompatibilität zu gewährleisten (ältere Browser).

Das srcset kann man auch innerhalb eines img Tag verwenden.

Siehe Beispiel

Man kann 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. Siehe auch meinen Tipp SVG in HTML erzeugen

SVG Logo