Feat: Support Picture tag #17

Our site has 2x slightly different layouts on mobile/desktop. On desktop our banner is 100% of the width, but on mobile it's much smaller so we have 2x separate images coming from our CMS: image, imageMobile.

After running lighthouse, we were told to add loading="eager" and fetchpriority="high" on our LCP to improve the score.

Our code looked something along the lines of this:

import { Image } from 'qwik-img';

export default component$((props) => {
  return (
    <Image loading="eager" fetchPriority="high" src={props.image} class="block md:hidden" />
    <Image loading="eager" fetchPriority="high" src={props.imageMobile} class="hidden md:block" />
  );
});

We're adding both image elements and then using Tailwind CSS to hide/show the correct image depending on viewport size. Apparently loading/fetchPriority are considered even if the image elements are hidden via CSS.

Claude tells me that the correct way to approach this, is to use the <picture> tag, because it says the sources are respected.

Since the whole ethos of qwik is fast by default and having great scores, maybe it would make sense for qwik-image to also export a Picture tag for responsive image swapping?