feat: rename layout and refactor styles

[ascorbic]

Changes

Renames experimental responsive image layout option from "responsive" to "constrained"

The previous name was causing confusion, because it is also the name of the feature. The responsive layout option is specifically for images that are displayed at the requested size, unless they do not fit the width of their container, at which point they would be scaled down to fit. They do not get scaled beyond the intrinsic size of the source image, or the width prop if provided.

It became clear from user feedback that many people (understandably) thought that they needed to set layout to responsive if they wanted to use responsive images. They then struggled with overriding styles to make the image scale up for full-width hero images, for example, when they should have been using full-width layout. Renaming the layout to constrained should make it clearer that this layout is for when you want to constrain the maximum size of the image, but allow it to scale-down.

This also refactors and simplifies the generated styles.

Testing

Updated tests. Tested manually.

Docs

API docs updated. I will do a separate PR to update the experimental flag docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: d1bc212

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging #13677 will not alter performance

_{Comparing resp-image-styles (d1bc212) with main (42388b2)}

Summary

✅ 6 untouched benchmarks

[sarah11918]

Changesets both look great! One tiny comment below from me! (And, this feels like a good change to me.)

[sarah11918]

Great explanation of what's happening! My only nit is not being super clear on what "it" is referring to. (If it's "generated styles" then should be "they" for plural? If it's "layouts" that's also plural unless you just want to say "your layout used CSS". If it's Astro, then we haven't introduced that antecedent at all yet!)

Not a huge deal, but enough that I went, "wait a minute, what is "it" here?" so might be enough to be a bit distracting to readers.

Also, there's little guidance here as to what to do about this breaking change (if anything?). We could add something after this paragraph as another standalone paragraph so it stands out, like:

This is an implementation change only. However, it may affect any custom styles you have added to your responsive images. Please check your rendered images to determine whether any change to your CSS is needed.

[ascorbic]

How about now

[ematipico]

Looks good! Reminder to update the RFC before shipping this new change

[sarah11918]

looks fantastic to me!