Core concepts

This project consists of a number of different packages, that cover the frontend part responsible for rendering the image markup supporting different JavaScript frameworks on the one hand. On the other hand, there are build plugins that integrate with your app's build tool to process local images.

Image component

The image component will take some image data as its source, and render that using optimal HTML markup for responsive images, using a compination of <picture>, <source> and <img> elements. That will make the browser be able to pick the optimal image size and format. If the image data has that available, the component will also be able to display an immediately visible Low Quality Image Placeholder while the high resolution image is loading.

More about the image component

Image source

The image data used as the source for the image component can come from different sources. Essentially, it is a data structure that conforms to the ImageData interface as defined here. While you could provide that data structure manually, usually you will not need to get in touch with that yourself. Instead, it will be provided to you by either

• an import of a local image, processed by a build plugin for one of the supported build tools, that will take the original high resolution image and generate all required combinations of image sizes and image formats (as configured) as part of your app's build
• the return value of a function for one of the supported Image CDNs, that will take a reference to a remote image hosted or proxied by such a CDN