Bilder in HTML

Dieses Wiki ist unterteilt in zwei kleine Bereiche. Den Bereich der Formataufbereitung und den Coding-Bereich. 

Das richtige Format:
Einer der wesentlichen Aspekte bei einer Website ist die Ladegeschwindigkeit. Braucht eine Website besonders lange beim Laden der Inhalte, springen Nutzer:innen regelmäßig wieder ab. Läd eine Website besonders langsam, dann hat das negative Auswirkungen auf die Bounce Rate. Einer der Gründe warum eine Website langsam lädt, können Bilder sein. Deshalb versucht man beim befüllen einer Website Bilder zu verwenden, die zwar ansprechend in ihrer Qualität sind, aber gleichzeitig eine möglichst geringe Datengröße haben um die Ladegeschwindigkeit nicht negativ zu beeinflussen. 

Deshalb sind die häufigsten Datenformate im Internet:
.jpg
.png
.svg
.gif
.WebP

Wann .jpg?
jpg ist ein Bildformat, welches besonders klein in der Größe ist, aber auch besonders Verlustbehaftet in der Qualität. Es wird peu a peu ersetzt durch das .WebP, hat aber noch besonders häufige Verwendung für statische Bilder ohne Transparenzen.

Wann .png?
.png ist ein Bildformat, welches Transparenzen speichern kann. Zusätzlich ist es in der Datenmenge kleiner bei wenigen, verschiedenen Farben als .jpg. Das ändert sich bei komplexeren Pixelwerten wie bspw. Fotos. 

Wann .svg?
.svg ist der Industriestandart für Vektordarstellungen im Web. Also bei Logos. Die Datenmengen sind bei einem sauberen svg enorm gering.

Wann .gif?
.gif wird nur noch verwendet für Bewegtbilder mit enorm geringer Datenmenge. Bewegte Memes sind der häufigste Einsatzbereich.

Wann .WebP?
Quasi immer mittlerweile. WebP ist der neue Industriestandard geworden. Spätestens seit Safari 14 oder seit 2013, seit Mozilla Firefox das Format gängigerweise mit lesen kann.  .WebP ist in seiner Kompression zwischen 25-34% stärker als das vergleichbare jpg, bei gleicher Qualität. Der Nachteil ist die Verabeitung auf dem Rechner außerhalb von Browsern oder Photoshop. Programme wie InDesign, XD oder Illustrator können das Format beispielsweise nicht lesen.

Die Einbettung des Bildes in html

Der html Code für die Einbettung eines Bildes ist recht simpel. Dazu soll uns folgendes Beispiel dienen:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Wie jeden Part eines html Codes müssen wir einen Befehl einschließen in unsere "größer als"-, "kleiner als"-Zeichen:
<>

Danach kommt unser Befehl:
img
das steht für image und sagt uns, dass gleich ein Bild folgen wird

Danach unsere Quelle:
src="img_girl.jpg"
das src steht für source, also Quelle. In Anführungszeichen steht die Benennung unserer Datei. Diese können wir quasi selbst wählen. Oftmals wird auch eine eigene Website referenziert. An der Endung .jpg erkennen wir das Datenformat.

Danach kommt unser alt Text:
alt="Girl in a jacket"
Das ist eine Beschreibung was auf dem Bild zu sehen ist. Diese Beschreibung brauchen wir für zwei Dinge. Zunächst schafft sie Barrierefreiheit und Personen mit einer Sehbehinderung können sich vorlesen lassen, was auf dem Bild zu sehen ist. Andererseits helfen wir mit einer alt-Beschreibung Suchmaschinen bei der Kategorisierung unserer Website. Eine Website die sauber mit alt Texten gefüllt ist, schneidet besser im Google Ranking ab.

Zuguterletzt beschreiben width="500" height="600" die Abmaßungen unseres implementierten Bildes, also 500x600px.