imageProps

The attributes of an <img> for an image. Without sizes (or with a fixed one), the candidates are the offered widths that cover the display width and twice it, so a 2x screen gets a sharp image and a small one does not download a big file. A sizes with vw offers every width from the smallest device width times its viewport share. The src is the offered width that covers the display width (the largest when none does). Every width written is one the optimizer serves: a width the app does not offer is snapped up to the next one that it does.

Import#

import { imageProps } from "@shadow-js/dusk";

Signature#

function imageProps(options: ImagePropsOptions): ImageProps

Parameters#

Name	Description
`options`	The source, its displayed size, and the loading and quality choices.

Returns#

The attributes (spread them on <img>).

Throws#

TypeError for a source that is not a path or an http(s) URL, or an alt that is not a string.
RangeError for a width, height or quality that is out of range.

Examples#

<img {...imageProps({ src: "/hero.jpg", width: 1200, height: 630, alt: "", priority: true, sizes: "100vw" })} />