feat: Add CSS variables in getImage for experimental.responsiveImages

[p0lyw0lf]

Changes

• Currently, experimental.responsiveImages only adds CSS variables to images included via the <Image /> or <Picture /> components.
• In my other PR feat: Pass remote Markdown images through image service #13254, we can only use getImage to transform images.
• I would like to have getImage participate more fully in the responsive images experiment.
• Moving the CSS variable logic inside getImage removes a lot of redundant/confusing logic anyways.

Testing

I tested this change by running my personal blog with it on. It provides a better outcome than when getImage is used on its own with this experiment turned on:

Before	After

Note: the before pic has width: 100% applied to it in page styles. Without that, it looks even worse (no scaling applied based on page size)

Docs

We may need to update the doc page on this (https://docs.astro.build/en/reference/experimental-flags/responsive-images/), as well as the RFC (https://github.com/withastro/roadmap/blob/eff726cec3bf214b42ab13b819ed7b200753509e/proposals/0053-responsive-images.md). Currently, neither make mention of getImage being affected by this experiment.

/cc @withastro/maintainers-docs for feedback!

[changeset-bot]

🦋 Changeset detected

Latest commit: b82448a

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 #13256 will not alter performance

_{Comparing p0lyw0lf:getimage-experiment-use-css-vars (b82448a) with main (adb58f9)}

Summary

✅ 6 untouched benchmarks