### 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 `` with multiple `` elements for different image formats (AVIF, WebP, JPEG) and an `` tag. This illustrates how the browser selects the optimal image based on context. ```html ``` -------------------------------- ### 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'; ``` ```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``; } } ``` ```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 ; } ``` ```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 ; } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```svelte ``` -------------------------------- ### 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 `` tag with multiple `` 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { imgix } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import heroImage from './hero.jpg?responsive'; export default function MyApp() { return ; } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import heroImage from './hero.jpg?responsive'; export default function MyApp() { return ; } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { imgix } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { imgix } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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 tag with corresponding 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'; ``` ```Ember Handlebars ``` ```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``; } } ``` ```React TSX import { ResponsiveImage } from '@responsive-image/react'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Solid TSX import { ResponsiveImage } from '@responsive-image/solid'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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'; ``` ```Ember Handlebars ``` ```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``; } } ``` ```React TSX import { ResponsiveImage } from '@responsive-image/react'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Solid TSX import { ResponsiveImage } from '@responsive-image/solid'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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'; ``` ```Ember HBS ``` ```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``; } } ``` ```TypeScript (React) import { ResponsiveImage } from '@responsive-image/react'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```TypeScript (Solid) import { ResponsiveImage } from '@responsive-image/solid'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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'; ``` ```Ember HBS ``` ```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``; } } ``` ```TypeScript (React) import { ResponsiveImage } from '@responsive-image/react'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```TypeScript (Solid) import { ResponsiveImage } from '@responsive-image/solid'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { imgix } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { imgix } from '@responsive-image/cdn'; export default function MyApp() { return ; } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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 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 ``` ```ts html``; ``` ```tsx ``` ```svelte ``` -------------------------------- ### 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 {{content-for "head-footer"}} {{content-for "body"}} {{content-for "body-footer"}} ``` -------------------------------- ### 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 `` 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 `` 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 `` elements. ```hbs ``` ```ts html``; ``` ```tsx ``` ```svelte ``` -------------------------------- ### 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'; ``` ```ts import logoImage from './hero.jpg?w=320;640&responsive'; html``; ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import logoImage from './hero.jpg?w=320;640&responsive'; export default function () { return ; } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import logoImage from './hero.jpg?w=320;640&responsive'; export default function () { return ; } ``` ```svelte ``` -------------------------------- ### 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 ``, ``, and `` elements with srcset and density variants for optimal display. ```html ``` -------------------------------- ### 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'; ``` ```Ember Handlebars ``` ```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``; } } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/react'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/solid'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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'; ``` ```Ember Handlebars ``` ```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``; } } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/react'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/solid'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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'; ``` ```Ember Handlebars ``` ```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``; } } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/react'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/solid'; import { fastly } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { imgix } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```hbs ``` ```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``; } } ``` ```tsx import { ResponsiveImage } from '@responsive-image/react'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```tsx import { ResponsiveImage } from '@responsive-image/solid'; import { netlify } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```svelte ``` -------------------------------- ### 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'; ``` ```Ember Handlebars ``` ```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``; } } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/react'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```TypeScript JSX import { ResponsiveImage } from '@responsive-image/solid'; import { cloudinary } from '@responsive-image/cdn'; export default function MyApp() { return ( ); } ``` ```Svelte ``` -------------------------------- ### 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 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'; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.