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