Make @astrojs/image compatible with front end libraries (React, vue...)

[Oudwins]

Body

Summary

Make @astrojs/image compatible with front end libraries (React, vue...). I think this is in the spirit of being able to use astro with what ever framework you want.

Background & Motivation

Currently, if you have any images inside your React/vue... components they will be unoptimized, even if those components are static. Solutions I have found around this problem which are all hacky:

1. Pass @astrojs/image component as child as per docs. The moment you have multiple images or anything slightly complex this becomes a nightmare

2. Use an external image hosting solution or use a custom serverless function to provide optimized images. This comes with its own downsides obviously.

3. Build your own image optimizer & image component. This is ultimately what I have done it works but was unnecessarily complex. I ended up using @11ty/eleventy-img because there is no good way to do this in astro. (my solution can be found here for any curious)

Goals

• Improve the DX
• Continue the spirit of compatibility with different frameworks
• Provide a clear standard for optimizing images in astro beyond astro components

Example

Api could be something like this:

js import { Image } from '@astrojs/image/components/react';

[Code-Victor]

This is a valid concern