Image
#Image
Synonyms: Img, Thumbnail
This new component is marked as untested because the full accessibility test is still pending. The full test of new components and functionalities can only take place after a completed release.
The Image component is used to display images.
Construction
The Image component is created using the HTML tag <kol-image>.
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>
Examples
Usage
Images in different resolutions and/or aspect ratios
Using _srcset (and _sizes), different images can be stored for different resolutions and pixel densities (of the display) in order to deliver sharp images on large screens and not use up bandwidth unnecessarily on small monitors. Furthermore, different file formats can be specified using _srcset in order to save bandwidth for modern browsers, but still support older devices. Even when using _srcset, _src should be used, as this is used by browsers as the last option if a) srcset is not supported, or b) no suitable image was found there.
For more information about _srcset see Links and References
Loading behavior
The _loading attribute is optional. Either eager or lazy can be set here, provided that lazy is used unset. eager ensures that the image is loaded as soon as you enter the page; with lazy the browser only loads the image shortly before it becomes visible. As a rule, eager does not have to be set, only set it if loading delays occur or the image is safely in the visible area when entering the page. (e.g.: logo in the header or hero)
Accessibility
Alternative text
The _alt attribute is mandatory, but can be left blank (_alt="") for purely decorative images. This description is read by screen readers and displayed by browsers if the image cannot/should not be loaded.
Links and references
Detailed explanation of _srcset and _sizes:
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_alt (required) | _alt | Setzt den alternativen Text. | string | undefined |
_loading | _loading | Defines the loading mode for the image. | "eager" | "lazy" | undefined | 'lazy' |
_sizes | _sizes | Defines the image sizes for different screen resolutions, supporting _srcset. | string | undefined | undefined |
_src (required) | _src | Sets the image src attribute to the given string. | string | undefined |
_srcset | _srcset | Setzt eine Liste von Quell-URLs mit Breiten der Bilder. | string | undefined | undefined |