Support for <Picture> in Image component

[bitforcesrl]

Hi, @frehner It would be great to have a tag support in the Image component.

At the moment if we need to do art direction (different images per viewport) we've to add two Image components like this

<Image ...{props} className="md:hidden"></Image>
<Image ...{props} className="hidden md:block"></Image>

Iin case the image is a LCP we can't set load="eager" because browser will load both images (even tough one is invisible) which is not something that we want.
If we add load="lazy" (like we are doing now) it works, the browser just the visible image, but it delays the loading the image.

With lazy the browser does't add the src in the preloader fetch stack and is not able to figure out if it has to load the image until intersectionOberver is available (the browser has to swtich from parse HTML and CSS to run JS)

Another big issue without the Picture support is that in mobile the aspect ratio of the image changes from horizontal (desktop/tablet) to vertical.
If we specify eg: loaderOptions={{crop: 'center', width: 160, height: 90}} the image will be cropped horizontally and in mobile where the image will be printed vertically we'll have a huge stretch if we use object-fit:cover and tailwind aspect-ratio[9/16] for example