Zum Hauptinhalt springen

Image

Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.

Die Image-Komponente dient dazu, Bilder darzustellen.

Konstruktion

Die Komponente Image wird über das HTML-Tag <kol-image> erzeugt.

Code

<kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
<kol-image _src="nur-dekoratives-bild.jpg" _alt=""></kol-image>
<kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>

Beispiele

Verwendung

Bilder in unterschiedlicher Auflösung und/oder Seitenverhältnis

Mittels _srcset (und _sizes) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen. Des Weiteren können mittels _srcset auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen. Auch bei Verwendung von _srcset sollte _src genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) srcset nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.

Für weitere Infos zu _srcset siehe Links und Referenzen

Ladeverhalten

Das Attribut _loading ist optional. Gesetzt werden kann hier entweder eager oder lazy, sofern ungesetzt wird lazy verwendet. eager sorgt für ein Laden des Bildes direkt beim Betreten der Seite, bei lazy lädt der Browser das Bild erst, kurz bevor es sichtbar wird. In der Regel muss eager nicht gesetzt werden, setzen Sie es nur sofern Ladeverzögerungen auftreten, oder das Bild sich sicher im, bei Betreten der Seite, sichtbaren Bereich befindet. (z.B.: Logo im Header oder Hero)

Barrierefreiheit

Alternativtext

Das Attribut _alt ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (_alt="") gelassen werden. Diese Beschreibung wird von Screenreadern vorgelesen und von Browsern angezeigt, wenn das Bild nicht geladen werden kann/soll.

Ausführliche Erklärung zu _srcset und _sizes:

Properties

PropertyAttributeDescriptionTypeDefault
_alt (required)_altSetzt den alternativen Text.stringundefined
_loading_loadingDefines the loading mode for the image."eager" | "lazy" | undefined'lazy'
_sizes_sizesDefines the image sizes for different screen resolutions, supporting _srcset.string | undefinedundefined
_src (required)_srcSets the image src attribute to the given string.stringundefined
_srcset_srcsetSetzt eine Liste von Quell-URLs mit Breiten der Bilder.string | undefinedundefined

Live-Editor

Beispiele