From 67db02df5647cf096a37624218c6a91defc6e45d Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Mon, 23 Dec 2024 13:27:52 +0100
Subject: [PATCH 1/4] Add Solid docs

---
 apps/docs/.vitepress/config.ts    |  1 +
 apps/docs/src/frameworks/ember.md |  4 ++
 apps/docs/src/frameworks/index.md |  1 +
 apps/docs/src/frameworks/solid.md | 61 +++++++++++++++++++++++++++++++
 apps/docs/src/index.md            |  2 +-
 apps/docs/src/usage/component.md  | 27 ++++++++++++++
 6 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/src/frameworks/solid.md

diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts
index 1fec2e69c..254682891 100644
--- a/apps/docs/.vitepress/config.ts
+++ b/apps/docs/.vitepress/config.ts
@@ -88,6 +88,7 @@ export default defineConfig({
         base: '/frameworks',
         items: [
           { text: 'Ember', link: '/ember' },
+          { text: 'Solid', link: '/solid' },
           { text: 'Web Component (Lit)', link: '/wc' },
         ],
       },
diff --git a/apps/docs/src/frameworks/ember.md b/apps/docs/src/frameworks/ember.md
index bc9261a76..5e28c3230 100644
--- a/apps/docs/src/frameworks/ember.md
+++ b/apps/docs/src/frameworks/ember.md
@@ -24,6 +24,10 @@ pnpm add @responsive-image/ember
 
 The addon provides a `<ResponsiveImage>` component for rendering the set of images, taking [local images](#local-images) or [remote images](#remote-images) as the `@src` input. Please refer to the main [image component](../usage/component.md) guide for all details and supported arguments!
 
+### HTML attributes
+
+Attributes used for image loading and rendering like `src`, `width` and `height` will be automatically set by the component. Some attributes like `loading` and `decoding` have defaults applied which can be customized. All other common `HTMLImageElement` attributes can be set on the component and will be proxied to the underlying `<img />` element.
+
 ## Local images
 
 To process [local images](../usage/local-images.md) you will need to setup one of the [build plugins](../build/index.md) depending on your app's setup.
diff --git a/apps/docs/src/frameworks/index.md b/apps/docs/src/frameworks/index.md
index d09de4ffa..b1d2fa864 100644
--- a/apps/docs/src/frameworks/index.md
+++ b/apps/docs/src/frameworks/index.md
@@ -3,6 +3,7 @@
 The [image component](../usage/component.md) and other utilities are provided with framework specific packages:
 
 - [Ember](./ember.md)
+- [Solid](./solid.md)
 - [Web Component](./wc.md) (built with Lit, but usable with any framework)
 
 > [!NOTE]
diff --git a/apps/docs/src/frameworks/solid.md b/apps/docs/src/frameworks/solid.md
new file mode 100644
index 000000000..d852f693e
--- /dev/null
+++ b/apps/docs/src/frameworks/solid.md
@@ -0,0 +1,61 @@
+# Solid
+
+## Installation
+
+In your application's directory:
+
+::: code-group
+
+```bash [npm]
+npm install @responsive-image/solid
+```
+
+```bash [yarn]
+yarn add @responsive-image/solid
+```
+
+```bash [pnpm]
+pnpm add @responsive-image/solid
+```
+
+:::
+
+## Image component
+
+The addon provides a `<ResponsiveImage>` component for rendering the set of images, taking [local images](#local-images) or [remote images](#remote-images) as the `src` prop. Please refer to the main [image component](../usage/component.md) guide for all details and supported arguments!
+
+### HTML attributes
+
+Attributes used for image loading and rendering like `src`, `width` and `height` will be automatically set by the component. Some attributes like `loading` and `decoding` have defaults applied which can be customized. All other common `HTMLImageElement` attributes can be set on the component and will be proxied to the underlying `<img />` element.
+
+## Local images
+
+To process [local images](../usage/local-images.md) you will need to setup one of the [build plugins](../build/index.md) depending on your app's setup.
+
+### SolidStart
+
+If your app is built with SolidStart, add the Vite plugin to your `app.config.ts`:
+
+```ts
+import { setupPlugins } from '@responsive-image/vite-plugin';
+import { defineConfig } from '@solidjs/start/config';
+
+export default defineConfig({
+  vite: {
+    plugins: [
+      setupPlugins({
+        include: /^[^?]+\.jpg\?.*responsive.*$/,
+      }),
+    ],
+  },
+});
+```
+
+> [!IMPORTANT]
+> For more information on how to configure `@responsive-image/vite-plugin` and `setupPlugins()` refer to the [Vite plugin](../build/vite.md) documentation.
+
+## Remote images
+
+The `@responsibe-image/cdn` package provides multiple helper functions to support [remote images](../usage/remote-images.md) served from different image CDNs for use with the `<responsive-image/>` component.
+
+Please refer to the [image CDN](../cdn/index.md) guide for details on all supported options and examples of the respective image CDN.
diff --git a/apps/docs/src/index.md b/apps/docs/src/index.md
index 7406ee40a..cb2e1dd3e 100644
--- a/apps/docs/src/index.md
+++ b/apps/docs/src/index.md
@@ -19,7 +19,7 @@ hero:
 
 features:
   - title: Multi Framework
-    details: 'Supports Vite and Webpack for local image processing, a framework-agnostic core and components for multiple frontend frameworks: Ember.js and web component (more to come)'
+    details: 'Supports Vite and Webpack for local image processing, a framework-agnostic core and components for multiple frontend frameworks: Ember, Solid and web component (more to come)'
   - title: Next-gen image formats
     details: Supports basic PNG and JPEG formats, as well as next-gen WebP and AVIF, for increased performance with optimal image quality at small file sizes.
   - title: Local image processing
diff --git a/apps/docs/src/usage/component.md b/apps/docs/src/usage/component.md
index 7bb38f866..03a39ff44 100644
--- a/apps/docs/src/usage/component.md
+++ b/apps/docs/src/usage/component.md
@@ -15,6 +15,15 @@ import heroImage from './hero.jpg?responsive';
 </template>
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import heroImage from './hero.jpg?responsive';
+
+export default function MyApp() {
+  return <ResponsiveImage src={heroImage} />;
+}
+```
+
 ```ts [Lit]
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -94,6 +103,10 @@ If your image width is not `100vw`, say `70vw` for example, you can specify this
 <ResponsiveImage @src={{heroImage}} @size={{70}} />
 ```
 
+```tsx [Solid]
+<ResponsiveImage src={heroImage} size={70} />
+```
+
 ```ts [Lit]
 html`<responsive-image .src=${heroImage} size="70"></responsive-image>`;
 ```
@@ -110,6 +123,10 @@ You can also set the attribute like this if your responsive image width is more
 <ResponsiveImage @src={{heroImage}} @sizes='(min-width: 800px) 800px, 100vw' />
 ```
 
+```tsx [Solid]
+<ResponsiveImage src={heroImage} sizes="(min-width: 800px) 800px, 100vw" />
+```
+
 ```ts [Lit]
 html`<responsive-image
   .src=${heroImage}
@@ -126,6 +143,7 @@ A fixed layout will render the image with the specific dimensions as specified.
 ::: code-group
 
 ```gjs [Ember]
+import { ResponsiveImage } from '@responsive-image/ember';
 import logoImage from './hero.jpg?w=320;640&responsive';
 
 <template>
@@ -133,6 +151,15 @@ import logoImage from './hero.jpg?w=320;640&responsive';
 </template>
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import logoImage from './hero.jpg?w=320;640&responsive';
+
+export default function () {
+  return <ResponsiveImage src={logoImage} width={320} />;
+}
+```
+
 ```ts [Lit]
 import logoImage from './hero.jpg?w=320;640&responsive';
 

From 56ce1f4de48fe769ce138c58c237decd485e5af5 Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Fri, 27 Dec 2024 18:37:16 +0100
Subject: [PATCH 2/4] Add Solid examples to CDN docs

---
 apps/docs/src/cdn/cloudinary.md | 85 ++++++++++++++++++++++++++++++++-
 apps/docs/src/cdn/imgix.md      | 70 +++++++++++++++++++++++++++
 apps/docs/src/cdn/netlify.md    | 71 ++++++++++++++++++++++++++-
 3 files changed, 224 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/cdn/cloudinary.md b/apps/docs/src/cdn/cloudinary.md
index fe2094f85..67ee2e52f 100644
--- a/apps/docs/src/cdn/cloudinary.md
+++ b/apps/docs/src/cdn/cloudinary.md
@@ -74,6 +74,15 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { cloudinary } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return <ResponsiveImage src={cloudinary('path/to/uploaded/image.jpg')} />;
+}
+```
+
 :::
 
 ### Aspect Ratio
@@ -120,6 +129,21 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { cloudinary } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={cloudinary('path/to/uploaded/image.jpg', {
+        aspectRatio: 1.5,
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Transformations
@@ -172,7 +196,21 @@ export class MyApp extends LitElement {
 }
 ```
 
-:::
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { cloudinary } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={cloudinary('path/to/uploaded/image.jpg', {
+        co: 'rgb:20a020',
+        e: 'colorize:50',
+      })}
+    />
+  );
+}
+```
 
 :::
 
@@ -223,6 +261,21 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { cloudinary } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={cloudinary('path/to/uploaded/image.jpg', {
+        quality: 50,
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Image formats
@@ -273,6 +326,21 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { cloudinary } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={cloudinary('path/to/uploaded/image.jpg', {
+        formats: ['webp', 'avif'],
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Remote source
@@ -320,4 +388,19 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { cloudinary } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={cloudinary(
+        'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
+      )}
+    />
+  );
+}
+```
+
 :::
diff --git a/apps/docs/src/cdn/imgix.md b/apps/docs/src/cdn/imgix.md
index ed460459b..a1cb85518 100644
--- a/apps/docs/src/cdn/imgix.md
+++ b/apps/docs/src/cdn/imgix.md
@@ -72,6 +72,15 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { imgix } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return <ResponsiveImage src={imgix('path/to/uploaded/image.jpg')} />;
+}
+```
+
 :::
 
 ### Aspect Ratio
@@ -118,6 +127,21 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { imgix } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={imgix('path/to/uploaded/image.jpg', {
+        aspectRatio: 1.5,
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Custom parameters
@@ -169,6 +193,22 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { imgix } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={imgix('path/to/uploaded/image.jpg', {
+        monochrome: '44768B',
+        px: 10,
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Quality
@@ -216,6 +256,21 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { imgix } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={imgix('path/to/uploaded/image.jpg', {
+        quality: 50,
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Image formats
@@ -266,4 +321,19 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { imgix } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={imgix('path/to/uploaded/image.jpg', {
+        formats: ['webp', 'avif'],
+      })}
+    />
+  );
+}
+```
+
 :::
diff --git a/apps/docs/src/cdn/netlify.md b/apps/docs/src/cdn/netlify.md
index 908867bf3..ba7ff080f 100644
--- a/apps/docs/src/cdn/netlify.md
+++ b/apps/docs/src/cdn/netlify.md
@@ -72,6 +72,15 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { netlify } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return <ResponsiveImage src={netlify('path/to/uploaded/image.jpg')} />;
+}
+```
+
 :::
 
 This assumes that your application itself is also served from Netlify, so that `/path/to/image.jpg` is an image in your repo that is also deployed to Netlify. If your application containing that image is not on Netlify, you can still make Netlify process and serve it, you just need to point to it with an absolue URL to make use of Netlify's [remote source](#remote-source) support.
@@ -120,11 +129,26 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { netlify } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={netlify('path/to/uploaded/image.jpg', {
+        aspectRatio: 1.5,
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Quality
 
-Use the `quality` parameter to pass a custom [quality](https://cloudinary.com/documentation/transformation_reference#q_quality) setting instead of the default `auto`:
+Use the `quality` parameter to pass a custom [quality](https://netlify.com/documentation/transformation_reference#q_quality) setting instead of the default `auto`:
 
 ::: code-group
 
@@ -166,6 +190,21 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { netlify } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={netlify('path/to/uploaded/image.jpg', {
+        quality: 50,
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Image formats
@@ -216,6 +255,21 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { netlify } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={netlify('path/to/uploaded/image.jpg', {
+        formats: ['webp', 'avif'],
+      })}
+    />
+  );
+}
+```
+
 :::
 
 ### Remote source
@@ -263,4 +317,19 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import { netlify } from '@responsive-image/cdn';
+
+export default function MyApp() {
+  return (
+    <ResponsiveImage
+      src={netlify(
+        'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
+      )}
+    />
+  );
+}
+```
+
 :::

From 68501b31d65f2f891893565c32f11b145eb5a80d Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Mon, 6 Jan 2025 20:49:40 +0100
Subject: [PATCH 3/4] Fix missing Solid examples

---
 apps/docs/src/frameworks/ember.md   |  2 ++
 apps/docs/src/frameworks/solid.md   |  2 ++
 apps/docs/src/usage/component.md    | 46 ++++++++++++++---------------
 apps/docs/src/usage/local-images.md |  9 ++++++
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/apps/docs/src/frameworks/ember.md b/apps/docs/src/frameworks/ember.md
index 5e28c3230..7556fe6dc 100644
--- a/apps/docs/src/frameworks/ember.md
+++ b/apps/docs/src/frameworks/ember.md
@@ -1,5 +1,7 @@
 # Ember.js
 
+The `@responsive-image/ember` package provides a native [Ember.js](https://emberjs.com/) image component.
+
 ## Installation
 
 In your application's directory:
diff --git a/apps/docs/src/frameworks/solid.md b/apps/docs/src/frameworks/solid.md
index d852f693e..36f83dde6 100644
--- a/apps/docs/src/frameworks/solid.md
+++ b/apps/docs/src/frameworks/solid.md
@@ -1,5 +1,7 @@
 # Solid
 
+The `@responsive-image/solid` package provides a native [SolidJS](https://www.solidjs.com/) image component.
+
 ## Installation
 
 In your application's directory:
diff --git a/apps/docs/src/usage/component.md b/apps/docs/src/usage/component.md
index 03a39ff44..2ffc1cad8 100644
--- a/apps/docs/src/usage/component.md
+++ b/apps/docs/src/usage/component.md
@@ -15,15 +15,6 @@ import heroImage from './hero.jpg?responsive';
 </template>
 ```
 
-```tsx [Solid]
-import { ResponsiveImage } from '@responsive-image/solid';
-import heroImage from './hero.jpg?responsive';
-
-export default function MyApp() {
-  return <ResponsiveImage src={heroImage} />;
-}
-```
-
 ```ts [Lit]
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -38,6 +29,15 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import heroImage from './hero.jpg?responsive';
+
+export default function MyApp() {
+  return <ResponsiveImage src={heroImage} />;
+}
+```
+
 :::
 
 This will render an `<img>` element wrapped in `<picture>` referencing all the resized images in the different formats, for the browser to decide which image it can support and fits best given the current context (device, screen size, user preferences like low bandwidth etc.):
@@ -103,14 +103,14 @@ If your image width is not `100vw`, say `70vw` for example, you can specify this
 <ResponsiveImage @src={{heroImage}} @size={{70}} />
 ```
 
-```tsx [Solid]
-<ResponsiveImage src={heroImage} size={70} />
-```
-
 ```ts [Lit]
 html`<responsive-image .src=${heroImage} size="70"></responsive-image>`;
 ```
 
+```tsx [Solid]
+<ResponsiveImage src={heroImage} size={70} />
+```
+
 :::
 
 This will render the corresponding [`sizes` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) on all `<source>` elements.
@@ -123,10 +123,6 @@ You can also set the attribute like this if your responsive image width is more
 <ResponsiveImage @src={{heroImage}} @sizes='(min-width: 800px) 800px, 100vw' />
 ```
 
-```tsx [Solid]
-<ResponsiveImage src={heroImage} sizes="(min-width: 800px) 800px, 100vw" />
-```
-
 ```ts [Lit]
 html`<responsive-image
   .src=${heroImage}
@@ -134,6 +130,10 @@ html`<responsive-image
 ></responsive-image>`;
 ```
 
+```tsx [Solid]
+<ResponsiveImage src={heroImage} sizes="(min-width: 800px) 800px, 100vw" />
+```
+
 :::
 
 ### Fixed layout
@@ -151,6 +151,12 @@ import logoImage from './hero.jpg?w=320;640&responsive';
 </template>
 ```
 
+```ts [Lit]
+import logoImage from './hero.jpg?w=320;640&responsive';
+
+html`<responsive-image .src=${logoImage} with="320"></responsive-image>`;
+```
+
 ```tsx [Solid]
 import { ResponsiveImage } from '@responsive-image/solid';
 import logoImage from './hero.jpg?w=320;640&responsive';
@@ -160,12 +166,6 @@ export default function () {
 }
 ```
 
-```ts [Lit]
-import logoImage from './hero.jpg?w=320;640&responsive';
-
-html`<responsive-image .src=${logoImage} with="320"></responsive-image>`;
-```
-
 :::
 
 It will still render an `<img>` wrapped in a `<picture>`, but this time it will provide the image with the optimal width (smallest width which is equal or above the target width),
diff --git a/apps/docs/src/usage/local-images.md b/apps/docs/src/usage/local-images.md
index 49c41b247..617138c21 100644
--- a/apps/docs/src/usage/local-images.md
+++ b/apps/docs/src/usage/local-images.md
@@ -44,6 +44,15 @@ export class MyApp extends LitElement {
 }
 ```
 
+```tsx [Solid]
+import { ResponsiveImage } from '@responsive-image/solid';
+import image from './image.jpg?w=200;400&quality=90&lqip=inline&responsive';
+
+export default function MyApp() {
+  return <ResponsiveImage src={image} width={200} />;
+}
+```
+
 :::
 
 ## Image parameters reference

From 5933278c47e443f5529de7bd92147186d748ada1 Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Mon, 6 Jan 2025 20:52:00 +0100
Subject: [PATCH 4/4] Move HTML attributes section to main image component
 guide

---
 apps/docs/src/frameworks/ember.md | 4 ----
 apps/docs/src/frameworks/solid.md | 4 ----
 apps/docs/src/frameworks/wc.md    | 4 ----
 apps/docs/src/usage/component.md  | 4 ++++
 4 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/apps/docs/src/frameworks/ember.md b/apps/docs/src/frameworks/ember.md
index 7556fe6dc..f676412e4 100644
--- a/apps/docs/src/frameworks/ember.md
+++ b/apps/docs/src/frameworks/ember.md
@@ -26,10 +26,6 @@ pnpm add @responsive-image/ember
 
 The addon provides a `<ResponsiveImage>` component for rendering the set of images, taking [local images](#local-images) or [remote images](#remote-images) as the `@src` input. Please refer to the main [image component](../usage/component.md) guide for all details and supported arguments!
 
-### HTML attributes
-
-Attributes used for image loading and rendering like `src`, `width` and `height` will be automatically set by the component. Some attributes like `loading` and `decoding` have defaults applied which can be customized. All other common `HTMLImageElement` attributes can be set on the component and will be proxied to the underlying `<img />` element.
-
 ## Local images
 
 To process [local images](../usage/local-images.md) you will need to setup one of the [build plugins](../build/index.md) depending on your app's setup.
diff --git a/apps/docs/src/frameworks/solid.md b/apps/docs/src/frameworks/solid.md
index 36f83dde6..91b29fb99 100644
--- a/apps/docs/src/frameworks/solid.md
+++ b/apps/docs/src/frameworks/solid.md
@@ -26,10 +26,6 @@ pnpm add @responsive-image/solid
 
 The addon provides a `<ResponsiveImage>` component for rendering the set of images, taking [local images](#local-images) or [remote images](#remote-images) as the `src` prop. Please refer to the main [image component](../usage/component.md) guide for all details and supported arguments!
 
-### HTML attributes
-
-Attributes used for image loading and rendering like `src`, `width` and `height` will be automatically set by the component. Some attributes like `loading` and `decoding` have defaults applied which can be customized. All other common `HTMLImageElement` attributes can be set on the component and will be proxied to the underlying `<img />` element.
-
 ## Local images
 
 To process [local images](../usage/local-images.md) you will need to setup one of the [build plugins](../build/index.md) depending on your app's setup.
diff --git a/apps/docs/src/frameworks/wc.md b/apps/docs/src/frameworks/wc.md
index 2c63e5a3c..4d263ed30 100644
--- a/apps/docs/src/frameworks/wc.md
+++ b/apps/docs/src/frameworks/wc.md
@@ -38,10 +38,6 @@ import '@responsive-image/wc';
 > [!Important]
 > As the `src` input is an `ImageData` object, you cannot pass this as an HTML _attribute_. Web components only support string based attributes. So make sure to set it as a _property_ using JavaScript. In case of [Lit](https://lit.dev/), you would use the dot prefix notation for [property expressions](https://lit.dev/docs/templates/expressions/#property-expressions): ``html`<responsive-image .src=${image} ></responsive-image>\` ``.
 
-### HTML attributes
-
-Attributes used for image loading and rendering like `src`, `width` and `height` will be automatically set by the web component. Some attributes like `loading` and `decoding` have defaults applied which can be customized. All other common `HTMLImageElement` attributes can be set on the web component and will be proxied to the underlying `<img />` element.
-
 ### Styling
 
 To style the `<img>` element which is within the web component's Shadow DOM, you can use the [::part(img) selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):
diff --git a/apps/docs/src/usage/component.md b/apps/docs/src/usage/component.md
index 2ffc1cad8..95ec8db53 100644
--- a/apps/docs/src/usage/component.md
+++ b/apps/docs/src/usage/component.md
@@ -198,3 +198,7 @@ and additionally a `2x` variant for devices with high pixel densities:
 
 > [!NOTE]
 > It is sufficient to supply either `width` or `height`, the component will still render the missing attribute according to the image's aspect ratio!
+
+## HTML attributes
+
+Attributes used for image loading and rendering like `src`, `width` and `height` will be automatically set by the component. Some attributes like `loading` and `decoding` have defaults applied which can be customized. All other common [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) attributes can be set on the component and will be proxied to the underlying `<img />` element.