@lightspeed-js/picture

A Lightspeed component for responsive images that measures the space it's shown in and asks for exactly that width, stepping up (never down) as the space grows. The static HTML reserves the right shape and shows the image's dominant colour until it loads.

Early release (0.x).

Install

npm install @lightspeed-js/picture @lightspeed-js/core

The package ships .lsp source, compiled by your project's Lightspeed Vite plugin. Add its components to the plugin's component directories:

lightspeedPlugin({ componentDirs: ['node_modules/@lightspeed-js/picture/src'] })

Use

<Picture $image="state.hero" />

image is an object:

{
  "src": "https://media.example/a65me3",
  "sizes": "https://media.example/{width}-/a65me3",
  "alt": "…",
  "width": 1080,
  "height": 720,
  "palette": { "dominant": { "hex": "#5f95a9", "name": "blue-grey" } }
}

sizes is a URL template: {width} is replaced with the width to fetch.

Licence

MIT