@astrojs/image: add a background option/prop to replace the alpha layer

[beeb]

Changes

This PR introduces a new option and prop to the @astrojs/image integration.

• <Image /> and <Picture /> take an optional background prop
• getImage() and getPicture() take an optional background option
• This new parameter accepts strings:
  • An HTML named color
  • A hexadecimal color code
  • An rgb() color code

This addition fixes #4625

Testing

Tests were added to perform background replacement on transparent images and check that the pixel color matches the requested color. The new parameter was added to existing test fixtures as well.

Docs

README has been updated to reflect the changes.

/cc @withastro/maintainers-docs for feedback!

[changeset-bot]

🦋 Changeset detected

Latest commit: aba574b

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

This PR includes changesets to release 1 package

Name	Type
@astrojs/image	Minor

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

[matthewp]

Amazing, cc-ing @tony-sull

[tony-sull]

Very nice!

I've been hesitant to add image transforms that aren't supported by Squoosh (we're in the process of making the sharp dependency optional), but I think the API here is generic enough that the Squoosh loader can just log a console warning that background isn't supported 🎉

[tony-sull]

Excellent test and docs coverage here, @beeb! I'll leave this open for now pending a review from @withastro/maintainers-docs

[beeb]

Excellent test and docs coverage here, @beeb! I'll leave this open for now pending a review from @withastro/maintainers-docs

Thank you! Happy to have made my first meaningful OSS contribution :)