Web Component

The @responsive-image/wc package provides a standard browser-native web component, that you can use with any framework supporting web component, or none at all.

NOTE

This package is implemented using Lit, and while you can use Lit as well to build your app with web components, this is not a requirement at all! You can use it with any framework supporting web components, or none at all.

Installation

In your application's directory:

npm

npm install @responsive-image/wc

yarn

yarn add @responsive-image/wc

pnpm

pnpm add @responsive-image/wc

Image component

The addon provides a <responsive-image> web component for rendering the set of images, taking local images or remote images as the src property. Please refer to the main image component guide for all details and supported arguments!

To make the image component available to the browser by registering as a custom element, you need to add a side-effect import:

import '@responsive-image/wc';

IMPORTANT

As the src input is an ImageData object, you cannot pass this as an HTML attribute. Web components only support string based attributes. So make sure to set it as a property using JavaScript. In case of Lit, you would use the dot prefix notation for property expressions: html`<responsive-image .src=${image} ></responsive-image>\` .

HTML attributes

Attributes used for image loading and rendering like src, width and height will be automatically set by the web component. Some attributes like loading and decoding have defaults applied which can be customized. All other common HTMLImageElement attributes can be set on the web component and will be proxied to the underlying <img /> element.

Styling

To style the <img> element which is within the web component's Shadow DOM, you can use the ::part(img) selector:

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

Local images

To process local images you will need to setup one of the build plugins depending on your app's setup.

Remote images

The @responsibe-image/cdn package provides multiple helper functions to support remote images served from different image CDNs for use with the <responsive-image/> component.

Please refer to the image CDN guide for details on all supported options and examples of the respective image CDN.