Placeholders

An ImageAsset's placeholder is painted behind the image until it loads; Picture.derive gives it as a CSS background value (picture.placeholder):

• Placeholder.cases.Color.make({ value }) paints one CSS color.
• ThumbHash paints a blurred likeness decoded to a PNG data URL, a few kilobytes of HTML per image, so the page paints it with no request; or the same hash's average color, a few bytes. Picture.derive paints the likeness for the priority image and the color for the rest, so a grid of thumbnails stays small; placeholder: 'detail' | 'average' overrides it.
• LowRes paints the provider's smallest width of the image: no stored data, one small request.

An image with alpha: true gets no placeholder, since it would show through the transparent pixels once the image loads.

Focal point#

An asset's focus ({ x, y }, 0 to 1 from the top left) is where a crop keeps the subject; picture.focus writes it as object-position does ("25% 80%"). It is the one fact an editor sets rather than one derived from the original, and a stored asset without it reads as none.

Loading#

priority: true marks the page's largest image: loading="eager" and fetchpriority="high". Every other image is loading="lazy" and decoding="async", and its sizes begins with auto, , which lets a browser that supports it use the laid-out width.

The variant space#

A server makes only what its Variant.space({ widths?, formats?, qualities? }) allows: the width ladder, a set of formats (AVIF and WebP by default) and a set of qualities (none by default: no URL names one, and the encoder uses its own). A request outside it is refused before any work, so an original has at most space.size variants, whoever asks: 16 for Variant.standard. Give Provider.hosted and the server the same space; the provider refuses, when defined, a format or quality its server would refuse.