autoscale:list image transform property

[jcayzac]

Motivation

Astro's built-in image pipeline lets you specify densities or widths, for generating image source sets.

• densities generates a source set that browsers will use on displays with different pixel densities —it's not meant to be used for responsive images.
• widths requires the caller to already know the physical size of the image, something that's only pulled from the image later in the pipeline. Additionally, it requires the caller passes a corresponding sizes attribute separately, which might be bothersome depending on the scenario.

Proposal

We'll add a new property that lets the caller pass a list of scale factors, from 0% to 100%. These factors will be used by the image service to generate both the source set and the corresponding sizes attribute. This will let browsers pick the image with the right size for its container.

Note

For each generated size ${WIDTH}x${HEIGHT}, a corresponding (width <= ${WIDTH}px): ${WIDTH}px entry will be added to sizes.

API

Properties for the built-in image service follow conventions set by the HTML standard, using plurals for densities and widths, while elsewhere in Astro the :list convention is also used (e.g. class:list). We find the latter less ambiguous, so this is the convention used here.

The new property is called autoscale:list, since it is a list of values used to automatically scale the image.

/**
 * Array of values, in percents, controlling the automatic generation of the
 * `sizes` and `srcset` attributes for the image.
 *
 * Each value is a percentage of the image's intrinsic size. `0` is not
 * allowed and, if present, will be ignored. Negative values and values
 * greater than `100` are ignored.
 *
 * @example `[12.5, 25, 37.7, 50, 62.5, 75, 87.5]`
 * @default undefined (no automatic sizes)
 */
'autoscale:list'?: number[] | undefined

Configuration

autoscale:list will also be added to the defaults property of the image service configuration, providing a way for the user to set a default value for all transformations where it would not conflict with other parameters or attributes (such as densities, widths or sizes).

[jcayzac]

sizes="auto" looks more desirable.