Image aspect ratio support

[boisgera]

Body

Summary

Make it easy to set the aspect ratio with <Image> from astro:assets.

Background & Motivation

AFAICT, Image and getImage do not support the aspect-ratio attribute and do not respect the height when the user specifies both width and height attributes (it "fails" silently). This situation may lead to some convoluted approaches to get the desired result (bypassing astro image optimization entirely or at least changing manually the aspect ratio of the original image, etc.). Additionally, unless I am mistaken, controlling the aspect-ratio afterwards in HTML is not always possible (when e.g. the srcset and sizes attributes are used ... and that would be more complex anyway, right?).

Goals

• Integrate the image aspect-ratio transformations into the astro:assets pipeline,

• Support the "classic" resizing options in this process ("cover", "contain", etc.)

• Propose a familiar API that extends the current one.

Note that sharp already supports the required features.

Example

We could obviously copy the HTML syntax (width width, height, aspect-ratio, object-fit, etc. attributes).

<Image src={..} width="640" height="480" object-fit="cover">
<Image src={..} width="640" aspect-ratio="4/3" object-fit="cover">`

const sizes = [200, 400, 600];
const aspectRatio = 4/3;
const heroImages = {};
for (const size of sizes) {
  const image = await getImage({
    src: heroImage, 
    "aspect-ratio": aspectRatio, 
    height: 200,
    loading: "eager",
    format:"avif"
  });
  heroImages[size] = image;
}

const srcset = sizes.map(size => `${heroImages[size].src} ${size}w`).join(", ");

[delucis]

Thanks for the feature suggestion. I’ve also heard this sometimes referred to as “cropping support”, i.e. the ability to remove parts of an image or letterbox it if the width/height aspect ratio does not match the source image.

Linking this other discussion which seems related: #808

[bre7]

Seems to be exactly what Gatsby's Image API has using sharp https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#all-options

aspectRatio
Force a specific ratio between the image’s width and height.

transformOptions also seems great:

These values are passed in as an object to transformOptions, either as a prop to StaticImage, or to the resolver for dynamic images. They are advanced settings that most people will not need to change. Any provided object is merged with the defaults below.

cropFocus
"attention"/ATTENTION
Controls crop behavior. See the sharp documentation for strategy, position and gravity.

fit
"cover"/COVER
Controls behavior when resizing an image and proving both width and height. See the sharp documentation.