Image Option
import "@taprootio/espalier/image";
<esp-image-option>
A single responsive source for esp-image. Each option
contributes one srcset candidate (url + a width descriptor); the parent
esp-image reads its options and builds a native <picture> so the browser
can pick the best variant for the viewport and device pixel ratio.
This is the editor / fallback authoring form. Published markup should
project a real light-DOM <picture> through esp-image instead (it is
crawlable and preload-discoverable); esp-image-option is the convenient
shape for editor previews and stored content before a <picture> exists.
Set the optional type attribute to enable format negotiation. Give every
option for a format the same type (e.g. image/avif), list the most
preferred format first, and the browser will use the first format it
supports — falling back to the low-res <img> on the parent.
Attributes
<esp-image-option> has the following attributes:
width
width has a default value of 0.
The intrinsic pixel width of this version of the image. Emitted as the
srcset width descriptor (e.g. width="800" → … 800w), which lets the
browser account for both viewport width and device pixel ratio.
url
url has a default value of "".
The URL to retrieve this version of the image from.
type
type has a default value of "".
An optional MIME type for format negotiation (e.g. image/avif,
image/webp). When set, esp-image emits a dedicated
<source type="…"> per format. Leave empty for plain resolution
switching. Do not mix typed and untyped options on the same esp-image.