ResponsiveImage

https://responsive-image.dev/intro/what
Admin
ResponsiveImage is a JavaScript library that simplifies rendering responsive images in web...
Tokens:9,951
Snippets:100
Trust Score:5.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install @responsive-image/solid package

Source: https://responsive-image.dev/intro/what/frameworks/solid

Commands to install the @responsive-image/solid package using npm, yarn, or pnpm.

```bash
npm install @responsive-image/solid
```

```bash
yarn add @responsive-image/solid
```

```bash
pnpm add @responsive-image/solid
```

--------------------------------

### Install Responsive Image Packages for Ember.js and Webpack

Source: https://responsive-image.dev/intro/what/intro/getting-started

This snippet demonstrates how to install the necessary @responsive-image/ember and @responsive-image/webpack packages using npm, yarn, or pnpm. These packages are required to integrate responsive images into an Ember.js project with webpack for local image processing.

```bash
npm install @responsive-image/ember @responsive-image/webpack
```

```bash
yarn add @responsive-image/ember @responsive-image/webpack
```

```bash
pnpm add @responsive-image/ember @responsive-image/webpack
```

--------------------------------

### Install @responsive-image/cdn package

Source: https://responsive-image.dev/intro/what/cdn/imgix

Instructions for installing the `@responsive-image/cdn` package, which provides imgix support, using npm, yarn, or pnpm.

```bash
npm install @responsive-image/cdn
```

```bash
yarn add @responsive-image/cdn
```

```bash
pnpm add @responsive-image/cdn
```

--------------------------------

### Install Responsive Image Vite Plugin and Core

Source: https://responsive-image.dev/intro/what/build/vite

Instructions for installing the necessary npm packages (@responsive-image/vite-plugin and @responsive-image/core) using npm, yarn, or pnpm package managers.

```bash
npm install @responsive-image/vite-plugin @responsive-image/core
```

```bash
yarn add @responsive-image/vite-plugin @responsive-image/core
```

```bash
pnpm add @responsive-image/vite-plugin @responsive-image/core
```

--------------------------------

### Install @responsive-image/react package

Source: https://responsive-image.dev/intro/what/frameworks/react

Instructions on how to install the `@responsive-image/react` package using npm, yarn, or pnpm in your application's directory.

```bash
npm install @responsive-image/react
```

```bash
yarn add @responsive-image/react
```

```bash
pnpm add @responsive-image/react
```

--------------------------------

### Install @responsive-image/wc Package

Source: https://responsive-image.dev/intro/what/frameworks/wc

Install the @responsive-image/wc package in your application's directory using your preferred package manager (npm, yarn, or pnpm).

```bash
npm install @responsive-image/wc
```

```bash
yarn add @responsive-image/wc
```

```bash
pnpm add @responsive-image/wc
```

--------------------------------

### Install Svelte Responsive Image Package

Source: https://responsive-image.dev/intro/what/frameworks/svelte

Commands to install the `@responsive-image/svelte` package using different Node.js package managers.

```bash
npm install @responsive-image/svelte
```

```bash
yarn add @responsive-image/svelte
```

```bash
pnpm add @responsive-image/svelte
```

--------------------------------

### Install ResponsiveImage CDN Package

Source: https://responsive-image.dev/intro/what/cdn/fastly

Instructions for installing the @responsive-image/cdn package, which provides helper functions for various Content Delivery Networks, using common package managers like npm, yarn, and pnpm.

```bash
npm install @responsive-image/cdn
```

```bash
yarn add @responsive-image/cdn
```

```bash
pnpm add @responsive-image/cdn
```

--------------------------------

### Import setupPlugins Utility Function

Source: https://responsive-image.dev/intro/what/build/vite

Import the setupPlugins function from the @responsive-image/vite-plugin package. This utility simplifies the setup of Vite plugins for responsive image processing.

```js
import { setupPlugins } from '@responsive-image/vite-plugin';
```

--------------------------------

### Install @responsive-image/ember package

Source: https://responsive-image.dev/intro/what/frameworks/ember

Instructions for installing the `@responsive-image/ember` package using npm, yarn, or pnpm in an Ember.js application's directory.

```bash
npm install @responsive-image/ember
```

```bash
yarn add @responsive-image/ember
```

```bash
pnpm add @responsive-image/ember
```

--------------------------------

### Install @responsive-image/cdn package

Source: https://responsive-image.dev/intro/what/cdn/netlify

Instructions on how to install the `@responsive-image/cdn` package using popular package managers like npm, yarn, or pnpm. This package is essential for enabling Netlify CDN support.

```bash
npm install @responsive-image/cdn
```

```bash
yarn add @responsive-image/cdn
```

```bash
pnpm add @responsive-image/cdn
```

--------------------------------

### Configure SolidStart with Responsive Image Vite Plugin

Source: https://responsive-image.dev/intro/what/frameworks/solid

Example app.config.ts configuration for SolidStart applications to integrate the @responsive-image/vite-plugin for processing local images.

```ts
import { setupPlugins } from '@responsive-image/vite-plugin';
import { defineConfig } from '@solidjs/start/config';

export default defineConfig({
  vite: {
    plugins: [
      setupPlugins({
        include: /^[^?]+\.jpg\?.*responsive.*$/,
      }),
    ],
  },
});
```

--------------------------------

### Install Cloudinary CDN Package

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

Instructions for installing the `@responsive-image/cdn` package using different package managers (npm, yarn, pnpm). This package provides the helper function for Cloudinary integration.

```bash
npm install @responsive-image/cdn
```

```bash
yarn add @responsive-image/cdn
```

```bash
pnpm add @responsive-image/cdn
```

--------------------------------

### Install Responsive Image Webpack and Core Packages

Source: https://responsive-image.dev/intro/what/build/webpack

This snippet provides commands for installing the necessary @responsive-image/webpack and @responsive-image/core packages using npm, yarn, or pnpm. These packages are required to enable responsive image processing in your webpack project.

```bash
npm install @responsive-image/webpack @responsive-image/core
```

```bash
yarn add @responsive-image/webpack @responsive-image/core
```

```bash
pnpm add @responsive-image/webpack @responsive-image/core
```

--------------------------------

### Example HTML output of ResponsiveImage component

Source: https://responsive-image.dev/intro/what/usage/component

Shows the typical HTML markup generated by the `ResponsiveImage` component, including `<picture>` with multiple `<source>` elements for different image formats (AVIF, WebP, JPEG) and an `<img>` tag. This illustrates how the browser selects the optimal image based on context.

```html
<picture>
  <source
    srcset="
      /assets/images/hero1920w.avif 1920w,
      /assets/images/hero1280w.avif 1280w,
      /assets/images/hero640w.avif   640w
    "
    type="image/avif"
  />
  <source
    srcset="
      /assets/images/hero1920w.webp 1920w,
      /assets/images/hero1280w.webp 1280w,
      /assets/images/hero640w.webp   640w
    "
    type="image/webp"
  />
  <source
    srcset="
      /assets/images/hero1920w.jpg 1920w,
      /assets/images/hero1280w.jpg 1280w,
      /assets/images/hero640w.jpg   640w
    "
    type="image/jpeg"
  />
  <img
    src="1920"
    height="1280"
    class="ri-responsive"
    loading="lazy"
    decoding="async"
  />
</picture>
```

--------------------------------

### Importing and Rendering Local Images with Responsive Parameters

Source: https://responsive-image.dev/intro/what/usage/local-images

This example demonstrates how to import a local static image with specific processing parameters (widths, quality, and Low Quality Image Placeholder) using query parameters in the import path. The imported ImageData structure is then passed to the framework's ResponsiveImage component for rendering, ensuring the image is optimized for different display densities.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import image from './image.jpg?w=200;400&quality=90&lqip=inline&responsive';

<template>
  <ResponsiveImage @src={{image}} @width={{200}} />
</template>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import image from './image.jpg?w=200;400&quality=90&lqip=inline&responsive';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image .src=${image} with="200"></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import image from './image.jpg?w=200;400&quality=90&lqip=inline&responsive';

export default function MyApp() {
  return <ResponsiveImage src={image} width={200} />;
}
```

```tsx
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} />;
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import image from './image.jpg?w=200;400&quality=90&lqip=inline&responsive';
</script>

<ResponsiveImage src={image} width={200} />
```

--------------------------------

### Configure Low Quality Image Placeholders (LQIP)

Source: https://responsive-image.dev/intro/what/usage/local-images

Specifies options for rendering Low Quality Image Placeholders. Refer to the dedicated LQIP guide for comprehensive details and examples on its usage.

```APIDOC
lqip: string | json
  Description: Specify the options to render Low Quality Image Placeholders. Please refer to the [LQIP](./lqip) guide for details and examples.
```

--------------------------------

### Configure Vite Plugin for SvelteKit

Source: https://responsive-image.dev/intro/what/frameworks/svelte

Example `vite.config.ts` configuration for a SvelteKit application to integrate the `@responsive-image/vite-plugin` for processing local images.

```ts
import { sveltekit } from '@sveltejs/kit/vite';
import { setupPlugins } from '@responsive-image/vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    sveltekit(),
    setupPlugins({
      include: /^[^?]+\.jpg\?.*responsive.*$/,
    }),
  ],
});
```

--------------------------------

### Use Cloudinary Provider with ResponsiveImage Component

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

Demonstrates how to use the `cloudinary` provider function to generate image sources for the `ResponsiveImage` component. Examples are provided for Ember (Glimmer and Handlebars), Lit, React, Solid, and Svelte frameworks.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage @src={{cloudinary 'path/to/uploaded/image.jpg'}} />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-cloudinary 'path/to/uploaded/image.jpg'}}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg')}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
  return <ResponsiveImage src={cloudinary('path/to/uploaded/image.jpg')} />;
}
```

```tsx
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')} />;
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { cloudinary } from '@responsive-image/cdn';
</script>

<ResponsiveImage src={cloudinary('path/to/uploaded/image.jpg')} />
```

--------------------------------

### Integrate Fastly Provider with ResponsiveImage Component

Source: https://responsive-image.dev/intro/what/cdn/fastly

This section provides examples for integrating the fastly provider function with the ResponsiveImage component across multiple JavaScript frameworks. The fastly function takes the image's pathname on the CDN and returns a source object compatible with the ResponsiveImage component, ensuring optimized image delivery.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';

<template>
  <ResponsiveImage @src={{fastly 'path/to/uploaded/image.jpg'}} />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-fastly 'path/to/uploaded/image.jpg'}}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${fastly('path/to/uploaded/image.jpg')}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return <ResponsiveImage src={fastly('path/to/uploaded/image.jpg')} />;
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return <ResponsiveImage src={fastly('path/to/uploaded/image.jpg')} />;
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { fastly } from '@responsive-image/cdn';
</script>

<ResponsiveImage src={fastly('path/to/uploaded/image.jpg')} />
```

--------------------------------

### Specify Image Formats with Imgix CDN

Source: https://responsive-image.dev/intro/what/cdn/imgix

Illustrates how to use the `formats` parameter to specify desired image formats (e.g., 'webp', 'avif') for the `ResponsiveImage` component when using `imgix`. This creates a `<picture>` tag with multiple `<source>` tags for browser-specific format selection, overriding the default automatic format selection. Examples are provided for Ember (Glimmer JS and Handlebars), Lit, React, Solid, and Svelte.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      'path/to/uploaded/image.jpg'
      formats=(array 'webp' 'avif')
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-imgix
    'path/to/uploaded/image.jpg'
    formats=(array 'webp' 'avif')
  }}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { imgix } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={imgix('path/to/uploaded/image.jpg', {
    formats: ['webp', 'avif'],
  })}
/>
```

--------------------------------

### Render ResponsiveImage component with src

Source: https://responsive-image.dev/intro/what/usage/component

Demonstrates how to use the `ResponsiveImage` component by passing an `ImageData` structure to its `src` prop/attribute. This example shows basic integration for Ember, Lit (Web Component), React, Solid, and Svelte.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import heroImage from './hero.jpg?responsive';

<template>
  <ResponsiveImage @src={{heroImage}} />
</template>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import heroImage from './hero.jpg?responsive';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image .src=${heroImage}></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import heroImage from './hero.jpg?responsive';

export default function MyApp() {
  return <ResponsiveImage src={heroImage} />;
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/solid';
import heroImage from './hero.jpg?responsive';

export default function MyApp() {
  return <ResponsiveImage src={heroImage} />;
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import heroImage from './hero.jpg?responsive';
</script>

<ResponsiveImage src={heroImage} />
```

--------------------------------

### Configure BlurHash LQIP Mode for Responsive Images

Source: https://responsive-image.dev/intro/what/usage/lqip

Provides examples for enabling BlurHash as the Low Quality Image Placeholder (LQIP) mode. This can be done on a case-by-case basis via import query parameters or globally through Vite or Webpack configuration. BlurHash requires a runtime library for decoding.

```js
import heroImage from './hero.jpg?lqip=blurhash&responsive';
```

```js
setupLoaders({
  lqip: { type: 'blurhash' },
});
```

```js
setupPlugins({
  lqip: { type: 'blurhash' },
});
```

--------------------------------

### Configure Netlify CDN domain for responsive-image

Source: https://responsive-image.dev/intro/what/cdn/netlify

Example demonstrating how to configure a custom Netlify domain for the responsive-image library. This is useful when your application is not deployed directly on Netlify but you still want to leverage its image processing capabilities.

```js
import { setConfig } from '@responsive-image/core';

setConfig('cdn', {
  netlify: {
    domain: 'my-org.netlify.app'
  }
});
```

--------------------------------

### Configure ThumbHash LQIP Mode for Responsive Images

Source: https://responsive-image.dev/intro/what/usage/lqip

Provides examples for enabling ThumbHash as the Low Quality Image Placeholder (LQIP) mode. Similar to BlurHash, it can be configured per-import or globally via Vite/Webpack. ThumbHash offers better image quality at a similar size but also requires a runtime library.

```js
import heroImage from './hero.jpg?lqip=thumbhash&responsive';
```

```js
setupLoaders({
  lqip: { type: 'thumbhash' },
});
```

```js
setupPlugins({
  lqip: { type: 'thumbhash' },
});
```

--------------------------------

### Separate JavaScript and CSS imports for ResponsiveImage

Source: https://responsive-image.dev/intro/what/frameworks/react

Demonstrates how to import the JavaScript and CSS for the `ResponsiveImage` component separately. This is useful if the default export, which includes the component's CSS, causes problems with your build setup.

```diff
- import { ResponsiveImage } from "@responsive-image/react";
+ import { ResponsiveImage } from "@responsive-image/react/responsive-image.js";
+ import "@responsive-image/react/responsive-image.css";
```

--------------------------------

### Set Image Quality with Imgix CDN

Source: https://responsive-image.dev/intro/what/cdn/imgix

Demonstrates how to use the `quality` parameter with the `ResponsiveImage` component and `imgix` CDN to control image compression quality, overriding the default `auto` setting. The `quality` parameter accepts a numeric value (e.g., 50). Examples are provided for Ember (Glimmer JS and Handlebars), Lit, React, Solid, and Svelte.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      'path/to/uploaded/image.jpg'
      quality=50
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-imgix 'path/to/uploaded/image.jpg' quality=50}}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { imgix } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={imgix('path/to/uploaded/image.jpg', {
    quality: 50,
  })}
/>
```

--------------------------------

### Configure Webpack for Embroider-powered Ember.js build

Source: https://responsive-image.dev/intro/what/frameworks/ember

Example `ember-cli-build.js` configuration for integrating `@responsive-image/webpack` loaders into an Embroider-powered Ember.js application. It passes the Webpack configuration via `packagerOptions` in `compatBuild`.

```javascript
const { Webpack } = require('@embroider/webpack');
return require('@embroider/compat').compatBuild(app, Webpack, {
  packagerOptions: {
    webpackConfig: {
      module: {
        rules: [
          {
            resourceQuery: /responsive/,
            use: require('@responsive-image/webpack').setupLoaders(),
          },
        ],
      },
    },
  },
});
```

--------------------------------

### Configure Fastly Domain for ResponsiveImage

Source: https://responsive-image.dev/intro/what/cdn/fastly

This snippet demonstrates how to configure your Fastly domain within your application's setup. The setConfig function from @responsive-image/core is used to specify the domain for the fastly CDN provider, enabling the library to correctly generate image URLs.

```js
import { setConfig } from '@responsive-image/core';

setConfig('cdn', {
  fastly: {
    domain: 'images.mydomain.com',
  },
});
```

--------------------------------

### Use Netlify provider function with ResponsiveImage component

Source: https://responsive-image.dev/intro/what/cdn/netlify

Examples illustrating how to use the `netlify` provider function from `@responsive-image/cdn` to generate image sources for the `ResponsiveImage` component across different JavaScript frameworks. This assumes the image path is relative to your Netlify-deployed application.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { netlify } from '@responsive-image/cdn';

<template>
  <ResponsiveImage @src={{netlify '/path/to/image.jpg'}} />
</template>
```

```hbs
<ResponsiveImage @src={{responsive-image-netlify '/path/to/image.jpg'}} />
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { netlify } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${netlify('/path/to/image.jpg')}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
  return <ResponsiveImage src={netlify('path/to/uploaded/image.jpg')} />;
}
```

```tsx
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')} />;
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { netlify } from '@responsive-image/cdn';
</script>

<ResponsiveImage src={netlify('path/to/uploaded/image.jpg')} />
```

--------------------------------

### Apply Custom Imgix Parameters to Responsive Image

Source: https://responsive-image.dev/intro/what/cdn/imgix

Beyond the implicit transformations handled by the addon, you can apply custom imgix rendering parameters to your images. This example demonstrates how to pass a `params` object containing custom key-value pairs like `monochrome` and `px` to the `imgix` helper or function, allowing for advanced image manipulation.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      'path/to/uploaded/image.jpg'
      params=(hash monochrome='44768B' px=10)
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-imgix
    'path/to/uploaded/image.jpg'
    params=(hash monochrome='44768B' px=10)
  }}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg', {
        monochrome: '44768B',
        px: 10,
      })}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        monochrome: '44768B',
        px: 10,
      })}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { imgix } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={imgix('path/to/uploaded/image.jpg', {
    monochrome: '44768B',
    px: 10,
  })}
/>
```

--------------------------------

### Specify Image Formats for ResponsiveImage Component

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

This snippet illustrates how to explicitly define image formats for the `ResponsiveImage` component using the `formats` parameter. By default, the component uses Cloudinary's automatic format selection. Specifying formats like 'webp' and 'avif' generates a <picture> tag with corresponding <source> tags, ensuring browser compatibility and optimized delivery. Examples are provided for Ember (Glimmer/Handlebars), Lit, React, Solid, and Svelte frameworks.

```Ember Glimmer
import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{cloudinary
      'path/to/uploaded/image.jpg'
      formats=(array 'webp' 'avif')
    }}
  />
</template>
```

```Ember Handlebars
<ResponsiveImage
  @src={{responsive-image-cloudinary
    'path/to/uploaded/image.jpg'
    formats=(array 'webp' 'avif')
  }}
/>
```

```TypeScript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    ></responsive-image>`;
  }
}
```

```React TSX
import { ResponsiveImage } from '@responsive-image/react';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={cloudinary('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    />
  );
}
```

```Solid TSX
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'],
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { cloudinary } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={cloudinary('path/to/uploaded/image.jpg', {
    formats: ['webp', 'avif'],
  })}
/>
```

--------------------------------

### Configure Webpack for classic Ember.js build with ember-auto-import

Source: https://responsive-image.dev/intro/what/frameworks/ember

Example `ember-cli-build.js` configuration to integrate `@responsive-image/webpack` loaders for local image processing in a classic Ember.js application using `ember-auto-import`. It includes `allowAppImports` to specify image file locations for Webpack processing.

```javascript
// ember-cli-build.js
let app = new EmberApp(defaults, {
  autoImport: {
    allowAppImports: ['images/**/*'],
    webpack: {
      module: {
        rules: [
          {
            resourceQuery: /responsive/,
            use: require('@responsive-image/webpack').setupLoaders(),
          },
        ],
      },
    },
  },
});
```

--------------------------------

### Configure Image Quality with ResponsiveImage Component

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

This snippet demonstrates how to set a custom image quality for the `ResponsiveImage` component using the `quality` parameter. It overrides the default automatic quality selection provided by Cloudinary, allowing fine-grained control over image compression. The example shows integration with Ember (Glimmer/Handlebars), Lit, React, Solid, and Svelte frameworks.

```Ember Glimmer
import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{cloudinary
      'path/to/uploaded/image.jpg'
      quality=50
    }}
  />
</template>
```

```Ember Handlebars
<ResponsiveImage
  @src={{responsive-image-cloudinary 'path/to/uploaded/image.jpg' quality=50}}
/>
```

```TypeScript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    ></responsive-image>`;
  }
}
```

```React TSX
import { ResponsiveImage } from '@responsive-image/react';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={cloudinary('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    />
  );
}
```

```Solid TSX
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,
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { cloudinary } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={cloudinary('path/to/uploaded/image.jpg', {
    quality: 50,
  })}
/>
```

--------------------------------

### Configure Responsive Image Quality with Fastly

Source: https://responsive-image.dev/intro/what/cdn/fastly

Demonstrates how to use the `quality` parameter with `ResponsiveImage` component and `fastly` CDN helper to set a custom image quality instead of the default `auto`. This allows fine-grained control over image compression.

```Ember GJS
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{fastly
      'path/to/uploaded/image.jpg'
      quality=50
    }}
  />
</template>
```

```Ember HBS
<ResponsiveImage
  @src={{responsive-image-fastly 'path/to/uploaded/image.jpg' quality=50}}
/>
```

```TypeScript (Lit)
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${fastly('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    ></responsive-image>`;
  }
}
```

```TypeScript (React)
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    />
  );
}
```

```TypeScript (Solid)
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { fastly } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={fastly('path/to/uploaded/image.jpg', {
    quality: 50,
  })}
/>
```

--------------------------------

### Import setupLoaders Function for Webpack Configuration

Source: https://responsive-image.dev/intro/what/build/webpack

This JavaScript snippet demonstrates how to import the setupLoaders utility function from the @responsive-image/webpack package. This function simplifies the process of configuring webpack loaders for responsive image processing.

```js
const { setupLoaders } = require('@responsive-image/webpack');
```

--------------------------------

### Apply Global Configuration for Responsive Images

Source: https://responsive-image.dev/intro/what/build/vite

Customize default image processing options globally by passing an optional configuration object to the setupPlugins() function. This allows setting parameters like desired widths (w) and output formats (format) for all included image imports.

```js
setupPlugins({
  include: /^[^?]+\.jpg\?.*responsive.*$/,
  w: [1024, 2048],
  format: ['original', 'avif'],
});
```

--------------------------------

### Import Local Image with Responsive Query Parameters

Source: https://responsive-image.dev/intro/what/build/webpack

This JavaScript snippet demonstrates how to import a local image file and apply specific responsive image parameters directly via query parameters in the import statement. Query parameters take precedence over any global settings defined in setupLoaders().

```js
import logo from './logo.jpg?&w=32;64&quality=95&responsive';
```

--------------------------------

### Specify Responsive Image Formats with Fastly

Source: https://responsive-image.dev/intro/what/cdn/fastly

Demonstrates how to use the `formats` argument to specify one or more image formats (e.g., 'webp', 'avif') for a `picture` tag with `source` tags. This overrides Fastly's automatic format selection, allowing explicit control over the delivered image types.

```Ember GJS
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{fastly
      'path/to/uploaded/image.jpg'
      formats=(array 'webp' 'avif')
    }}
  />
</template>
```

```Ember HBS
<ResponsiveImage
  @src={{responsive-image-fastly
    'path/to/uploaded/image.jpg'
    formats=(array 'webp' 'avif')
  }}
/>
```

```TypeScript (Lit)
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${fastly('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    ></responsive-image>`;
  }
}
```

```TypeScript (React)
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    />
  );
}
```

```TypeScript (Solid)
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif'],
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { fastly } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={fastly('path/to/uploaded/image.jpg', {
    formats: ['webp', 'avif'],
  })}
/>
```

--------------------------------

### Use imgix provider with ResponsiveImage component

Source: https://responsive-image.dev/intro/what/cdn/imgix

Demonstrates how to pass the return value of the `imgix` provider function to the `ResponsiveImage` component across various frameworks. The `imgix` function takes a path to an uploaded image on the CDN and optional transformations.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage @src={{imgix 'path/to/uploaded/image.jpg'}} />
</template>
```

```hbs
<ResponsiveImage @src={{responsive-image-imgix 'path/to/uploaded/image.jpg'}} />
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('path/to/uploaded/image.jpg')}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return <ResponsiveImage src={imgix('path/to/uploaded/image.jpg')} />;
}
```

```tsx
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')} />;
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { imgix } from '@responsive-image/cdn';
</script>

<ResponsiveImage src={imgix('path/to/uploaded/image.jpg')} />
```

--------------------------------

### Apply Global Configuration to Responsive Image Loaders

Source: https://responsive-image.dev/intro/what/build/webpack

This JavaScript snippet illustrates how to pass an optional configuration object to the setupLoaders() function. This allows you to define global defaults for image parameters, such as desired widths and formats, which will apply to all responsive image imports unless overridden by query parameters.

```js
setupLoaders({
  w: [1024, 2048],
  format: ['original', 'avif'],
});
```

--------------------------------

### Override Settings with Image Import Query Parameters

Source: https://responsive-image.dev/intro/what/build/vite

Specify configuration options directly as query parameters when importing an image. These query parameters take precedence over any global settings defined in setupPlugins(), allowing for fine-grained control per image import.

```js
import logo from './logo.jpg?&w=32;64&quality=95&responsive';
```

--------------------------------

### Configure imgix domain for ResponsiveImage

Source: https://responsive-image.dev/intro/what/cdn/imgix

Sets up the imgix domain for the responsive image library using `setConfig` from `@responsive-image/core`. This is a crucial step for the library to correctly generate imgix URLs.

```js
import { setConfig } from '@responsive-image/core';

setConfig('cdn', {
  imgix: {
    domain: 'my-org.imgix.net',
  },
});
```

--------------------------------

### Fetch Remote Images with Cloudinary using ResponsiveImage Component

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

Demonstrates how to use the `@responsive-image` component with Cloudinary's `fetch` mode to load images from a remote URL. The `cloudinary` helper or function is used to wrap the image URL, enabling Cloudinary's CDN delivery and optional transformations.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{cloudinary
      'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-cloudinary
    'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'
  }}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary(
        'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
      )}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
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',
      )}
    />
  );
}
```

```tsx
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',
      )}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { cloudinary } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={cloudinary(
    'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
  )}
/>
```

--------------------------------

### Configure Color LQIP for Responsive Images

Source: https://responsive-image.dev/intro/what/usage/lqip

Demonstrates how to enable the dominant color LQIP technique. This can be done per-import using query parameters or globally via Webpack or Vite configuration, providing a lightweight placeholder by setting the image's background to its dominant color.

```js
import heroImage from './hero.jpg?responsive&lqip=color';
```

```js
setupLoaders({
  lqip: { type: 'color' }
});
```

```js
setupPlugins({
  lqip: { type: 'color' }
});
```

--------------------------------

### Specify Image Formats for ResponsiveImage Component with Netlify CDN

Source: https://responsive-image.dev/intro/what/cdn/netlify

Demonstrates how to explicitly define image formats (e.g., 'webp', 'avif') for the `ResponsiveImage` component using the `formats` argument with the Netlify CDN provider. This generates a `picture` tag with `source` tags for the specified formats, overriding Netlify's automatic format selection.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { netlify } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{netlify
      '/path/to/image.jpg'
      formats=(array 'webp' 'avif')
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-netlify
    '/path/to/image.jpg'
    formats=(array 'webp' 'avif')
  }}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { netlify } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${netlify('/path/to/image.jpg', {
        formats: ['webp', 'avif']
      })}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={netlify('path/to/uploaded/image.jpg', {
        formats: ['webp', 'avif']
      })}
    />
  );
}
```

```tsx
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']
      })}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { netlify } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={netlify('path/to/uploaded/image.jpg', {
    formats: ['webp', 'avif']
  })}
/>
```

--------------------------------

### Integrate Responsive Image Plugins into Vite Configuration

Source: https://responsive-image.dev/intro/what/build/vite

Add the array of plugins returned by setupPlugins to your vite.config.js file. This configuration enables responsive image processing for imports matching the specified include pattern, such as those with a ?responsive query parameter.

```js
import { defineConfig } from 'vite';
import { setupPlugins } from '@responsive-image/vite-plugin';

export default defineConfig({
  plugins: [
    // all your other plugins ...
    setupPlugins({
      include: /^[^?]+\.jpg\?.*responsive.*$/,
    }),
  ],
});
```

--------------------------------

### Webpack Specific Configuration Options for Responsive Images

Source: https://responsive-image.dev/intro/what/build/webpack

This section details webpack-specific configuration options available for responsive image processing, which can be set globally via setupLoaders() or per-import via query parameters. These options control file naming, public URLs, and output paths for generated images.

```APIDOC
name: string
  Description: The template for the generated image files. Certain placeholders like [ext] and [width] and all the common Webpack placeholders are replaced with real values.
  Default: [name]-[width]w-[hash].[ext]
  Example Usage:
    setupLoaders({
      name: '[name]_[width].[hash].[ext]',
    });

webPath: string
  Description: The public URL the emitted files are referenced from. By default, this matches Webpacks public URL and the path generated from outputPath.
  Example Usage:
    setupLoaders({
      webPath: 'https://images.example.com/',
    });

outputPath: string
  Description: The file path where the public image files are emitted to. This is relative to the default folder configured for public asset files in Webpack.
  Default: images
```

--------------------------------

### Use Remote Image Sources with ResponsiveImage Component and Netlify CDN

Source: https://responsive-image.dev/intro/what/cdn/netlify

Illustrates how to configure the `ResponsiveImage` component to fetch images from a fully qualified HTTP(s) URL. The Netlify CDN's `remote path` mode automatically fetches the image from the specified remote source and delivers it through the CDN.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { netlify } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{netlify
      'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-netlify
    'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'
  }}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { netlify } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${netlify(
        'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
      )}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
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',
      )}
    />
  );
}
```

```tsx
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',
      )}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { netlify } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={netlify(
    'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
  )}
/>
```

--------------------------------

### Configure Inline Image LQIP for Responsive Images

Source: https://responsive-image.dev/intro/what/usage/lqip

Shows how to enable the inline image LQIP technique, which creates a very small, blurry thumbnail of the original image. Configuration is available per-import with query parameters or globally in Webpack/Vite, offering a visual placeholder as a base64 encoded data-URL.

```js
import heroImage from './hero.jpg?responsive&lqip=inline';
```

```js
setupLoaders({
  lqip: { type: 'inline' }
});
```

```js
setupPlugins({
  lqip: { type: 'inline' }
});
```

--------------------------------

### Configure Webpack Rule for Responsive Image Processing

Source: https://responsive-image.dev/intro/what/build/webpack

This JavaScript snippet shows how to integrate the setupLoaders function into your webpack.config.js file. It defines a module rule that applies the responsive image loaders to imports using the ?responsive query parameter, allowing selective processing of images.

```js
const { setupLoaders } = require('@responsive-image/webpack');

const config = {
  entry: './src/index.ts',
  // ...
  module: {
    rules: [
      // other rules...
      {
        resourceQuery: /responsive/,
        use: setupLoaders(),
      },
    ],
  },
};
```

--------------------------------

### Import Responsive Image Web Component

Source: https://responsive-image.dev/intro/what/frameworks/wc

To make the <responsive-image> web component available in the browser by registering it as a custom element, include a side-effect import in your JavaScript application.

```js
import '@responsive-image/wc';
```

--------------------------------

### Setting Responsive Image Width with `size` Property (vw)

Source: https://responsive-image.dev/intro/what/usage/component

Demonstrates how to specify a custom width using the `size` property (in `vw` units) for the ResponsiveImage component across different frameworks, rendering the corresponding `sizes` attribute.

```hbs
<ResponsiveImage @src={{heroImage}} @size={{70}} />
```

```ts
html`<responsive-image .src=${heroImage} size="70"></responsive-image>`;
```

```tsx
<ResponsiveImage src={heroImage} size={70} />
```

```svelte
<ResponsiveImage src={heroImage} size={70} />
```

--------------------------------

### Tint Image with Query Parameter (JavaScript)

Source: https://responsive-image.dev/intro/what/usage/local-images

Import an image and apply a tint using the 'tint' query parameter. The tint preserves image luminance while adjusting chroma.

```js
import image from 'image.jpg?tint=#ffaa22&responsive';
import image from 'image.jpg?tint=rgba(10,33,127)&responsive';
```

--------------------------------

### Integrate BlurHash Runtime Script for SSR in Ember

Source: https://responsive-image.dev/intro/what/usage/lqip

Demonstrates how to include the BlurHash runtime script in an Ember application's `index.html` for Server-Side Rendering (SSR). This ensures that BlurHash-encoded LQIPs are displayed early, improving perceived performance on slow networks. It includes prefetching the script and calling `applySSR()`.

```html
<html>
  <head>
    <!-- other head elements... --->

    <link
      rel="prefetch"
      href="{{rootURL}}@responsive-image/ember/blurhash.js"
    />

    {{content-for "head-footer"}}
  </head>
  <body>
    {{content-for "body"}}

    <script type="module" async data-fastboot-ignore>
      import { applySSR } from '{{rootURL}}@responsive-image/ember/blurhash.js';
      applySSR();
    </script>
    <script src="{{rootURL}}assets/vendor.js"></script>
    <script src="{{rootURL}}assets/app.js"></script>

    {{content-for "body-footer"}}
  </body>
</html>
```

--------------------------------

### Customize Generated Image File Naming Template

Source: https://responsive-image.dev/intro/what/build/vite

Configure the template for the names of the generated image files. Placeholders like [name], [ext], and [width] are automatically replaced with actual values, allowing for custom file naming conventions.

```js
setupPlugins({
  name: '[name]_[width].[ext]',
});
```

--------------------------------

### Configure CSS Output Strategy for Responsive Images

Source: https://responsive-image.dev/intro/what/build/vite

Defines how CSS generated by plugin options (e.g., LQIP) is handled. 'external' bundles CSS into an external file for performance, while 'inline' integrates it directly into the JavaScript bundle, which is necessary for Shadow DOM environments like web components.

```APIDOC
styles: 'external' | 'inline'
Default: 'external'
Description: Some plugin options like LQIP color and inline options produce CSS output. By default the CSS is emitted in a way that makes it get bundled into an external CSS file. By changing this to inline, the CSS is integrated into the same JavaScript bundle and applied inline by the image component. This is especially needed for the web component based image component, as Shadow DOM prevents any global styles by the external CSS to get applied correctly. For all other cases, using external is recommended for performance reasons.
```

--------------------------------

### ResponsiveImage Component HTML Attribute Handling

Source: https://responsive-image.dev/intro/what/usage/component

Documents how the ResponsiveImage component automatically sets core image attributes (`src`, `width`, `height`), allows customization of defaults (`loading`, `decoding`), and proxies other `HTMLImageElement` attributes to the underlying `<img>` element.

```APIDOC
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.
```

--------------------------------

### Expose Browser Globals for FastBoot Remote Images

Source: https://responsive-image.dev/intro/what/frameworks/ember

This JavaScript snippet provides a solution for FastBoot environments that require access to browser globals like `URL` and `URLSearchParams` when handling remote images. It shows how to create a `config/fastboot.js` file to override `buildSandboxGlobals` and explicitly expose these necessary objects to the FastBoot sandbox, addressing common server-side rendering limitations.

```js
'use strict';

module.exports = function () {
  return {
    buildSandboxGlobals(defaultGlobals) {
      return { ...defaultGlobals, URL, URLSearchParams };
    },
  };
};
```

--------------------------------

### Setting Responsive Image `sizes` Attribute for Complex Layouts

Source: https://responsive-image.dev/intro/what/usage/component

Illustrates how to use the `sizes` attribute for more complex responsive image width definitions, which renders the corresponding HTML `sizes` attribute on all `<source>` elements.

```hbs
<ResponsiveImage @src={{heroImage}} @sizes='(min-width: 800px) 800px, 100vw' />
```

```ts
html`<responsive-image
  .src=${heroImage}
  sizes="(min-width: 800px) 800px, 100vw"
></responsive-image>`;
```

```tsx
<ResponsiveImage src={heroImage} sizes="(min-width: 800px) 800px, 100vw" />
```

```svelte
<ResponsiveImage src={heroImage} sizes="(min-width: 800px) 800px, 100vw" />
```

--------------------------------

### Configuring Fixed Image Layout with Width or Height

Source: https://responsive-image.dev/intro/what/usage/component

Shows how to render an image with specific dimensions by providing either `width` or `height` to the ResponsiveImage component, ensuring appropriate image variants are generated.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import logoImage from './hero.jpg?w=320;640&responsive';

<template>
  <ResponsiveImage @src={{logoImage}} @width={{320}} />
</template>
```

```ts
import logoImage from './hero.jpg?w=320;640&responsive';

html`<responsive-image .src=${logoImage} with="320"></responsive-image>`;
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import logoImage from './hero.jpg?w=320;640&responsive';

export default function () {
  return <ResponsiveImage src={logoImage} width={320} />;
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/solid';
import logoImage from './hero.jpg?w=320;640&responsive';

export default function () {
  return <ResponsiveImage src={logoImage} width={320} />;
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import logoImage from './hero.jpg?w=320;640&responsive';
</script>

<ResponsiveImage src={logoImage} width={320} />
```

--------------------------------

### Generated HTML for Fixed Layout Responsive Image

Source: https://responsive-image.dev/intro/what/usage/component

Displays the resulting HTML structure for a fixed-layout responsive image, including `<picture>`, `<source>`, and `<img>` elements with srcset and density variants for optimal display.

```html
<picture>
  <source
    srcset="/assets/images/hero320w.avif 1x, /assets/images/hero640w.avif 2x"
    type="image/avif"
  />
  <source
    srcset="/assets/images/hero320w.webp 1x, /assets/images/hero640w.webp 2x"
    type="image/webp"
  />
  <source
    srcset="/assets/images/hero320w.jpg 1x, /assets/images/hero640w.jpg 2x"
    type="image/jpeg"
  />
  <img
    src="/assets/images/hero320w.jpg"
    width="320"
    height="213"
    class="ri-fixed"
    loading="lazy"
    decoding="async"
  />
</picture>
```

--------------------------------

### Configure ResponsiveImage with Aspect Ratio for Layout Stability

Source: https://responsive-image.dev/intro/what/cdn/fastly

This snippet demonstrates how to supply the aspectRatio parameter to the ResponsiveImage component when using the fastly CDN. Providing the aspect ratio prevents layout shifts by allowing the component to render width and height attributes upfront, which is crucial for remote images where the aspect ratio cannot be known in advance.

```Ember Glimmer JS
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{fastly
      '/path/to/image.jpg'
      aspectRatio=1.5
    }}
  />
</template>
```

```Ember Handlebars
<ResponsiveImage
  @src={{responsive-image-fastly '/path/to/image.jpg' aspectRatio=1.5}}
/>
```

```TypeScript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${fastly('/path/to/image.jpg', {
        aspectRatio: 1.5,
      })}
    ></responsive-image>`;
  }
}
```

```TypeScript JSX
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        aspectRatio: 1.5,
      })}
    />
  );
}
```

```TypeScript JSX
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        aspectRatio: 1.5,
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { fastly } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={fastly('path/to/uploaded/image.jpg', {
    aspectRatio: 1.5,
  })}
/>
```

--------------------------------

### Adjust Image Quality with Query Parameter (JavaScript)

Source: https://responsive-image.dev/intro/what/usage/local-images

Import an image and specify its quality using the 'quality' query parameter. Higher numbers result in better quality but larger file sizes.

```js
import image from 'image.jpg?format=webp&quality=100&responsive';
```

--------------------------------

### Enable Lossless Compression for Images

Source: https://responsive-image.dev/intro/what/usage/local-images

Applies lossless compression mode where supported, specifically for `avif` and `webp` formats.

```js
import image from 'image.jpg?format=webp&lossless&responsive';
```

--------------------------------

### Image Parameter: tint

Source: https://responsive-image.dev/intro/what/usage/local-images

Tints the image using the provided chroma while preserving image luminance.

```APIDOC
tint: string
  Format: CSS color string (e.g., '#ffaa22', 'rgba(10,33,127)')
```

--------------------------------

### Specify Image Formats for Responsive Images

Source: https://responsive-image.dev/intro/what/usage/local-images

Sets the desired image formats to generate, such as original, jpeg, png, webp, or avif. Multiple formats can be specified as a semicolon-separated list when using query parameters.

```js
import image from 'image.jpg?format=original;webp;avif&responsive';
```

--------------------------------

### Configure Responsive Image Vite Plugin for Ember Embroider

Source: https://responsive-image.dev/intro/what/frameworks/ember

This snippet demonstrates how to integrate the `@responsive-image/vite-plugin` into an Ember application's `vite.config.mjs` when using Embroider and Vite. It shows how to add `setupPlugins` to the `plugins` array, specifying an `include` regex to target responsive images.

```js
import { defineConfig } from 'vite';
import { setupPlugins } from '@responsive-image/vite-plugin';

export default defineConfig({
  // other config...
  plugins: [
    // all your other Ember/Vite plugins ...
    setupPlugins({
      include: /^[^?]+\.jpg\?.*responsive.*$/,
    }),
  ],
});
```

--------------------------------

### Set Aspect Ratio for Responsive Image Component

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

This snippet demonstrates how to provide the `aspectRatio` parameter to the `ResponsiveImage` component when using remote images with Cloudinary. Supplying the aspect ratio helps the component render `width` and `height` attributes, preventing layout shifts after image loading. This is crucial for remote images where the aspect ratio cannot be known upfront.

```Ember Glimmer JS
import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{cloudinary
      '/path/to/image.jpg'
      aspectRatio=1.5
    }}
  />
</template>
```

```Ember Handlebars
<ResponsiveImage
  @src={{responsive-image-cloudinary '/path/to/image.jpg' aspectRatio=1.5}}
/>
```

```TypeScript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('/path/to/image.jpg', {
        aspectRatio: 1.5,
      })}
    ></responsive-image>`;
  }
}
```

```TypeScript JSX
import { ResponsiveImage } from '@responsive-image/react';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={cloudinary('path/to/uploaded/image.jpg', {
        aspectRatio: 1.5,
      })}
    />
  );
}
```

```TypeScript JSX
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,
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { cloudinary } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={cloudinary('path/to/uploaded/image.jpg', {
    aspectRatio: 1.5,
  })}
/>
```

--------------------------------

### Apply Custom Image Transformations with ResponsiveImage and Fastly

Source: https://responsive-image.dev/intro/what/cdn/fastly

This snippet illustrates how to pass custom image transformation parameters to the ResponsiveImage component via the params object when using the fastly CDN. These parameters allow for advanced image manipulations beyond the implicit resizing added by the addon, such as orientation or saturation adjustments.

```Ember Glimmer JS
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{fastly
      'path/to/uploaded/image.jpg'
      params=(hash orient='l' saturation=-100)
    }}
  />
</template>
```

```Ember Handlebars
<ResponsiveImage
  @src={{responsive-image-fastly
    'path/to/uploaded/image.jpg'
    params=(hash orient='l' saturation=-100)
  }}
/>
```

```TypeScript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${fastly('path/to/uploaded/image.jpg', {
        orient: 'l',
        saturation: -100,
      })}
    ></responsive-image>`;
  }
}
```

```TypeScript JSX
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        orient: 'l',
        saturation: -100,
      })}
    />
  );
}
```

```TypeScript JSX
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={fastly('path/to/uploaded/image.jpg', {
        orient: 'l',
        saturation: -100,
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { fastly } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={fastly('path/to/uploaded/image.jpg', {
    orient: 'l',
    saturation: -100,
  })}
/>
```

--------------------------------

### Set Responsive Image Quality Parameter

Source: https://responsive-image.dev/intro/what/cdn/netlify

This snippet demonstrates how to customize the image quality setting for responsive images by using the `quality` parameter. This allows overriding the default `auto` quality setting, aligning with Netlify's image transformation options.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { netlify } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{netlify
      '/path/to/image.jpg'
      quality=50
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-netlify '/path/to/image.jpg' quality=50}}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { netlify } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${netlify('/path/to/image.jpg', {
        quality: 50,
      })}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={netlify('path/to/uploaded/image.jpg', {
        quality: 50,
      })}
    />
  );
}
```

```tsx
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,
      })}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { netlify } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={netlify('path/to/uploaded/image.jpg', {
    quality: 50,
  })}
/>
```

--------------------------------

### Declare Responsive Image Module for TypeScript

Source: https://responsive-image.dev/intro/what/usage/local-images

Add this ambient declaration to a TypeScript definition file (e.g., 'types/global.d.ts') to enable TypeScript to understand image imports tagged with the 'responsive' query parameter. Ensure the file is included in 'tsconfig.json'.

```ts
declare module '*responsive' {
  import type { ImageData } from '@responsive-image/core';
  const value: ImageData;
  export default value;
}
```

--------------------------------

### Configure Responsive Image with Aspect Ratio

Source: https://responsive-image.dev/intro/what/cdn/imgix

To prevent layout shifts when loading remote images, the responsive image component requires the aspect ratio of the source image. This snippet demonstrates how to supply the `aspectRatio` parameter to the `imgix` helper or function across different frameworks, ensuring proper `width` and `height` attributes are rendered.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { imgix } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{imgix
      '/path/to/image.jpg'
      aspectRatio=1.5
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-imgix '/path/to/image.jpg' aspectRatio=1.5}}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { imgix } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${imgix('/path/to/image.jpg', {
        aspectRatio: 1.5,
      })}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={imgix('path/to/uploaded/image.jpg', {
        aspectRatio: 1.5,
      })}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { imgix } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={imgix('path/to/uploaded/image.jpg', {
    aspectRatio: 1.5,
  })}
/>
```

--------------------------------

### Convert Image to Grayscale

Source: https://responsive-image.dev/intro/what/usage/local-images

Converts the image to a grayscale representation.

```js
import image from 'image.jpg?grayscale&responsive';
```

--------------------------------

### Specify Image Widths for Responsive Images

Source: https://responsive-image.dev/intro/what/usage/local-images

Defines the image widths to be generated for responsive images, matching typical device sizes or fixed sizes for 2x displays. Can be passed as a semicolon-separated list when using query parameters.

```js
import image from 'image.jpg?w=200;400&responsive';
```

--------------------------------

### Rotate Image with Query Parameter (JavaScript)

Source: https://responsive-image.dev/intro/what/usage/local-images

Import an image and rotate it by a specified number of degrees using the 'rotate' query parameter. The background color for empty parts can be set with the 'background' parameter.

```js
import image from 'image.jpg?rotate=90&responsive';
```

--------------------------------

### Set Image Position with Aspect Ratio and Fit

Source: https://responsive-image.dev/intro/what/usage/local-images

Sets the position of the image when an `aspect` ratio is provided and `fit` is set to `cover` or `contain`. Refer to sharp's resize options for detailed explanations.

```APIDOC
position: string
  Description: When `aspect` is provided and `fit` is one of `cover` or `contain`, then this parameter can be used to set the position of the image.
  See sharp's [resize options](https://sharp.pixelplumbing.com/api-resize#resize) for a detailed explanation of each.
```

--------------------------------

### Image Parameter: aspect

Source: https://responsive-image.dev/intro/what/usage/local-images

Adjusts image height to match a specified aspect ratio. Width is implicit.

```APIDOC
aspect: string | number
  Format: '16:9' or positive number (width/height ratio)
```

--------------------------------

### Control Image Fit Method with Aspect Ratio

Source: https://responsive-image.dev/intro/what/usage/local-images

Specifies how the image should fit into given dimensions when an `aspect` ratio is provided. Options include `cover`, `contain`, `fill`, `inside`, and `outside`.

```js
import image from 'image.jpg?fit=cover&responsive';
```

--------------------------------

### Adjust Inline Image LQIP Placeholder Size

Source: https://responsive-image.dev/intro/what/usage/lqip

Illustrates how to customize the `targetPixels` option for inline image LQIP, controlling the total number of pixels in the generated placeholder image. This can be applied per-import or as a global setting in build configurations for fine-tuning the placeholder's resolution.

```js
import heroImage from './hero.jpg?lqip={"type":"inline","targetPixels":120}&responsive';
```

```js
setupLoaders({
  lqip: { type: 'inline', targetPixels: 120 }
});
```

```js
setupPlugins({
  lqip: { type: 'inline', targetPixels: 120 }
});
```

--------------------------------

### Configure Responsive Image Aspect Ratio

Source: https://responsive-image.dev/intro/what/cdn/netlify

To prevent layout shifts and ensure proper rendering of `width` and `height` attributes, the responsive image component requires the aspect ratio of remote source images. This snippet demonstrates how to supply the `aspectRatio` parameter when using the `@responsive-image/cdn` and various framework-specific responsive image components, as the aspect ratio cannot be determined upfront for remote images.

```gjs
import { ResponsiveImage } from '@responsive-image/ember';
import { netlify } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{netlify
      '/path/to/image.jpg'
      aspectRatio=1.5
    }}
  />
</template>
```

```hbs
<ResponsiveImage
  @src={{responsive-image-netlify '/path/to/image.jpg' aspectRatio=1.5}}
/>
```

```ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { netlify } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${netlify('/path/to/image.jpg', {
        aspectRatio: 1.5,
      })}
    ></responsive-image>`;
  }
}
```

```tsx
import { ResponsiveImage } from '@responsive-image/react';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
  return (
    <ResponsiveImage
      src={netlify('path/to/uploaded/image.jpg', {
        aspectRatio: 1.5,
      })}
    />
  );
}
```

```tsx
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,
      })}
    />
  );
}
```

```svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { netlify } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={netlify('path/to/uploaded/image.jpg', {
    aspectRatio: 1.5,
  })}
/>
```

--------------------------------

### Set Image Aspect Ratio with Query Parameter (JavaScript)

Source: https://responsive-image.dev/intro/what/usage/local-images

Import an image and set its aspect ratio using the 'aspect' query parameter. The value can be a string like '16:9' or a numeric width/height ratio.

```js
import image from 'image.jpg?aspect=16:9&responsive';
import image from 'image.jpg?aspect=1.5&responsive';
```

--------------------------------

### Default CSS for Responsive Image Layout

Source: https://responsive-image.dev/intro/what/usage/component

Explains the default CSS applied to images for responsive behavior, making them automatically take the full available width of their parent element.

```css
img {
  width: 100%;
  height: auto;
}
```

--------------------------------

### Apply Cloudinary Transformations to Responsive Image

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

This snippet illustrates how to apply custom Cloudinary transformations to images using the `transformations` parameter of the `ResponsiveImage` component. Besides implicit resizing, users can add various Cloudinary transformations like color adjustments. The parameter accepts an object of transformations or an array of objects for chained transformations.

```Ember Glimmer JS
import { ResponsiveImage } from '@responsive-image/ember';
import { cloudinary } from '@responsive-image/cdn';

<template>
  <ResponsiveImage
    @src={{cloudinary
      'path/to/uploaded/image.jpg'
      transformations=(hash co='rgb:20a020' e='colorize:50')
    }}
  />
</template>
```

```Ember Handlebars
<ResponsiveImage
  @src={{responsive-image-cloudinary
    'path/to/uploaded/image.jpg'
    transformations=(hash co='rgb:20a020' e='colorize:50')
  }}
/>
```

```TypeScript
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { cloudinary } from '@responsive-image/cdn';
import '@responsive-image/wc';

@customElement('my-app')
export class MyApp extends LitElement {
  render() {
    return html`<responsive-image
      .src=${cloudinary('path/to/uploaded/image.jpg', {
        co: 'rgb:20a020',
        e: 'colorize:50',
      })}
    ></responsive-image>`;
  }
}
```

```TypeScript JSX
import { ResponsiveImage } from '@responsive-image/react';
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',
      })}
    />
  );
}
```

```TypeScript JSX
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',
      })}
    />
  );
}
```

```Svelte
<script>
  import { ResponsiveImage } from '@responsive-image/svelte';
  import { cloudinary } from '@responsive-image/cdn';
</script>

<ResponsiveImage
  src={cloudinary('path/to/uploaded/image.jpg', {
    co: 'rgb:20a020',
    e: 'colorize:50',
  })}
/>
```

--------------------------------

### Configure Cloudinary Cloud Name

Source: https://responsive-image.dev/intro/what/cdn/cloudinary

Specify your Cloudinary `cloudName` in your application's configuration. This is done by importing `setConfig` from `@responsive-image/core` and providing your organization's cloud name.

```js
import { setConfig } from '@responsive-image/core';

setConfig('cdn', {
  cloudinary: {
    cloudName: 'my-org'
  }
});
```

--------------------------------

### Style Responsive Image Web Component's Internal Image

Source: https://responsive-image.dev/intro/what/frameworks/wc

To apply styles to the <img> element located within the web component's Shadow DOM, use the ::part(img) selector in your CSS.

```css
responsive-image::part(img) {
  box-shadow: 3px 3px 5px gray;
}
```

--------------------------------

### Image Parameter: quality

Source: https://responsive-image.dev/intro/what/usage/local-images

Adjusts image quality (1-100). Higher values mean better quality but larger file size.

```APIDOC
quality: number
  Range: 1 - 100
```

--------------------------------

### Apply Blur Effect to Image

Source: https://responsive-image.dev/intro/what/usage/local-images

Applies a blur effect to the image. Providing no argument performs a fast blur, while a numeric argument specifies a more accurate Gaussian blur.

```js
import image from 'image.jpg?blur&responsive';
import image from 'image.jpg?blur=0.75&responsive';
import image from 'image.jpg?blur=100&responsive';
```

--------------------------------

### Extend Glint Template Registry for Responsive Image Addon

Source: https://responsive-image.dev/intro/what/frameworks/ember

This TypeScript snippet illustrates how to extend the Glint template registry in an Ember application. By importing `ResponsiveImageRegistry` from `@responsive-image/ember/template-registry` and extending the global `Registry`, developers can enable strict type checking for responsive image components and helpers in their templates.

```ts
import '@glint/environment-ember-loose';

import type ResponsiveImageRegistry from '@responsive-image/ember/template-registry';

declare module '@glint/environment-ember-loose/registry' {
  export default interface Registry
    extends ResponsiveImageRegistry /* other addon registries */ {
    // local entries
  }
}
```

--------------------------------

### Image Parameter: rotate

Source: https://responsive-image.dev/intro/what/usage/local-images

Rotates the image by a specified number of degrees. Empty parts can be filled using the 'background' parameter.

```APIDOC
rotate: number
  Unit: Degrees
```

--------------------------------

### Adjust Image Saturation

Source: https://responsive-image.dev/intro/what/usage/local-images

Adjusts the image's saturation using a given saturation multiplier.

```APIDOC
saturation: number
  Description: Adjusts the images saturation with the given saturation multiplier.
```

--------------------------------

### Adjust Image Brightness

Source: https://responsive-image.dev/intro/what/usage/local-images

Adjusts the image's brightness using a given brightness multiplier.

```APIDOC
brightness: number
  Description: Adjusts the images brightness with the given brightness multiplier.
```

--------------------------------

### Normalize Image Luminance

Source: https://responsive-image.dev/intro/what/usage/local-images

Stretches the image's luminance to cover the full dynamic range, thereby enhancing its contrast.

```js
import image from 'image.jpg?normalize&responsive';
```

--------------------------------

### Set Background Color for Image Processing

Source: https://responsive-image.dev/intro/what/usage/local-images

Instructs other image processing parameters (e.g., `rotate`) to use a specified color when filling empty spots in the image. Supports various color formats like hex, HSL, RGB, and named colors.

```js
import image from 'image.jpg?background=#FFFFFFAA&responsive';
import image from 'image.jpg?background=hsl(360,100%,50%)&responsive';
import image from 'image.jpg?background=rgb(200,200,200)&responsive';
import image from 'image.jpg?background=blue&responsive';
```

--------------------------------

### Apply Median Filter to Image

Source: https://responsive-image.dev/intro/what/usage/local-images

Applies a median filter to the image, commonly used for noise reduction. Can be applied with or without a specific filter size.

```js
import image from 'image.jpg?median&responsive';
import image from 'image.jpg?median=3&responsive';
import image from 'image.jpg?median=50&responsive';
```

--------------------------------

### Flatten Image Alpha Channel

Source: https://responsive-image.dev/intro/what/usage/local-images

Removes the alpha channel from the image, merging transparent pixels with the color defined by the `background` parameter.

```APIDOC
flatten: boolean
  Description: Remove the alpha channel of the image, transparent pixels will be merged with the color set by [background](#background-string).
```

--------------------------------

### Invert Image Colors

Source: https://responsive-image.dev/intro/what/usage/local-images

Inverts the colors of the image.

```js
import image from 'image.jpg?invert&responsive';
```

--------------------------------

### Adjust Image Hue Rotation

Source: https://responsive-image.dev/intro/what/usage/local-images

Adjusts the image's hue rotation by a specified number of degrees.

```APIDOC
hue: number
  Description: Adjusts the images hue rotation by the given number of degrees.
```

--------------------------------

### Flop Image Horizontally

Source: https://responsive-image.dev/intro/what/usage/local-images

Flops the image about its horizontal axis. This operation is always performed after any rotation.

```js
import image from 'image.jpg?flop&responsive';
```

--------------------------------

### Flip Image Vertically

Source: https://responsive-image.dev/intro/what/usage/local-images

Flips the image about its vertical axis. This operation is always performed after any rotation.

```js
import image from 'image.jpg?flip&responsive';
```
Tokens:
Raw