Feature Proposal: Picture Component

[benjaminsehl]

Following our <Image /> component, create a <Picture /> component that can have different art direction props at different media sizes (aspect ratios, and crop regions).

The DX would be something like this…

<Picture data={data}>
  <Source crop="center" aspectRatio="3/1" media="min-width: 80em" />
  <Source crop="left" aspectRatio="2/1" media="min-width: 60em" />
  <Image crop="focal-point" aspectRatio="1/1" />
</Picture>

Current Reality
I'm not sure how to do this today outside of making your own component. A raw HTML version would look like this.

<picture>
  <source srcset="https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=2000&amp;height=2524&amp;crop=center 2000w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=2200&amp;height=2776&amp;crop=center 2200w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=2400&amp;height=3029&amp;crop=center 2400w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=2600&amp;height=3281&amp;crop=center 2600w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=2800&amp;height=3534&amp;crop=center 2800w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=3000&amp;height=3786&amp;crop=center 3000w" media="min-width: 60em">
  <source srcset="https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=1000&amp;height=1262&amp;crop=center 1000w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=1200&amp;height=1514&amp;crop=center 1200w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=1400&amp;height=1767&amp;crop=center 1400w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=1600&amp;height=2019&amp;crop=center 1600w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=1800&amp;height=2272&amp;crop=center 1800w" media="min-width: 80em">
  <img alt="Tracks in the snow leading to a person on a mountain top with a red jacket contrasting to an epic blue horizon with a mountain range in the distance." decoding="async" height="126.2" loading="eager"  src="https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=100&amp;height=126&amp;crop=center" srcset="https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=200&amp;height=252&amp;crop=center 200w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=400&amp;height=505&amp;crop=center 400w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=600&amp;height=757&amp;crop=center 600w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=800&amp;height=1010&amp;crop=center 800w, https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Hydrogen_Hero_Feature_1.jpg?v=1654902468&amp;width=1000&amp;height=1262&amp;crop=center 1000w," width="100" class="block object-cover w-full h-full" style="width:100%;aspect-ratio:2500/3155">
</picture>

The non-obvious problems

1. Creating your component forces you only to be able to use top/left/right/bottom/center crop regions — focal_point is not possible
2. If you have a hero image that is aspect ratio 16/9 on desktop, but 1/1 on mobile, and you use object-fit: cover to get it to look right, you're loading in a lot of excess pixels on the screen,
3. In addition to point 2, you don't have the ability to art direct the cropping

[bitforcesrl]

We need this component, we've generators to instruct img srcset to use proper scrset range with the proper width per every viewport, but we can't change the AR based on viewport.
we've to add a responsive hidden class to load the proper image based on viewport. the problem is that we've to add loading lazy otherwise both mobile and desk images will be loaded. the problem is to improve LCP we have to not use the lazy on above the fold image

<Image
          data={collection.image!}
          alt={collection.title}
          srcSetOptions={getSrcSetOptions({
            imageId: 'heroIMG',
          })}
          sizes={getSrcSetSizes([100, 100, 100, 100, 100, 100])}
          className="inset-0 h-full w-full object-cover"
          crop="center"
          loading="eager"
          aspectRatio="9/16"
          fetchpriority="high"
        ></Image>