diff --git a/src/components/image/image.e2e.ts b/src/components/image/image.e2e.ts
index fa31448834..fd14b825cc 100644
--- a/src/components/image/image.e2e.ts
+++ b/src/components/image/image.e2e.ts
@@ -41,7 +41,7 @@ describe(`sbb-image with ${fixture.name}`, () => {
             <source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
             <source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
             <source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
-            <img class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
+            <img alt="" class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
           </picture>
         </div>
       </figure>
diff --git a/src/components/image/image.scss b/src/components/image/image.scss
index 0189465a37..146b21bd2b 100644
--- a/src/components/image/image.scss
+++ b/src/components/image/image.scss
@@ -54,7 +54,7 @@
 
 // aspect ratios 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16', '16-9'
 .image__figure--ratio-free .image__wrapper {
-  aspect-ratio: auto;
+  aspect-ratio: var(--sbb-image-aspect-ratio, auto);
 }
 
 .image__figure--ratio-1-1 .image__wrapper {
diff --git a/src/components/image/image.ts b/src/components/image/image.ts
index c7515ca941..f5a95c6ad4 100644
--- a/src/components/image/image.ts
+++ b/src/components/image/image.ts
@@ -59,6 +59,14 @@ const breakpointMap: Record<string, number> = {
 
 /**
  * It displays an image.
+ *
+ * @cssprop [--sbb-image-aspect-ratio=auto] - When the aspectRatio property
+ * on the component is set to 'free', the CSS declaration of the aspect
+ * ratio is set to var(--sbb-image-aspect-ratio, auto). Since CSS
+ * variables find their way into the shadow DOM, we can use the
+ * --sbb-image-aspect-ratio variable to override the aspect ratio at will.
+ * This way we can have, for example, an image component with an aspect
+ * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
  */
 @customElement('sbb-image')
 export class SbbImageElement extends LitElement {
@@ -457,6 +465,12 @@ export class SbbImageElement extends LitElement {
 
     const pictureSizeConfigs = this._preparePictureSizeConfigs();
 
+    /**
+     * The alt attribute should always be present for the img element.
+     * If it has an empty string as its value, it is simply ignored
+     * by assistive technologies. If we leave it out completely,
+     * they might try to interpret the img element.
+     */
     return html`
       <figure
         class=${classMap({
@@ -501,7 +515,7 @@ export class SbbImageElement extends LitElement {
               ];
             })}
             <img
-              alt=${this.alt || nothing}
+              alt=${this.alt || ''}
               @load=${this._imageLoaded}
               class="image__img"
               src=${this.imageSrc!}
diff --git a/src/components/image/readme.md b/src/components/image/readme.md
index bfee211e7a..f36e5dba36 100644
--- a/src/components/image/readme.md
+++ b/src/components/image/readme.md
@@ -27,3 +27,9 @@ The size can be set with `pictureSizesConfig`.
 | `borderRadius`       | `border-radius`        | public  | `'default' \| 'none' \| 'round'`              | `'default'`      | Border radius of the image. Choose between a default radius, no radius and a completely round image.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `aspectRatio`        | `aspect-ratio`         | public  | `InterfaceImageAttributes['aspectRatio']`     | `'16-9'`         | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `disableAnimation`   | `disable-animation`    | public  | `boolean`                                     | `false`          | Whether the fade animation from blurred to real image should be disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+## CSS Properties
+
+| Name                       | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| -------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-image-aspect-ratio` | `auto`  | When the aspectRatio property on the component is set to 'free', the CSS declaration of the aspect ratio is set to var(--sbb-image-aspect-ratio, auto). Since CSS variables find their way into the shadow DOM, we can use the --sbb-image-aspect-ratio variable to override the aspect ratio at will. This way we can have, for example, an image component with an aspect ratio of 4/3 in smaller viewports and 16/9 in larger viewports. |