Picture Component

[mynameisadamf]

Motivation

Right now we are pulling in 1 media asset for a product or collection across small/medium/large screens. This 1 asset with no focal point can lead to bad cropping.

See decapitated snowboarder

Opportunity

1. Allow merchants and developers to manually select or dynamically detect a focal point at a media level (product or collection)
2. Allow hydrogen to detect an image component selected focal point

Brainstorm features & functionality:

• Work found that is being done on this in online store
• https://vault.shopify.io/gsd/projects/25732
• Previous work for dynamically detecting
• https://vault.shopify.io/gsd/projects/3552

[benjaminsehl]

 <Picture
  width="100%"
  {...props}>
  <Source 
      src={data.src} 
      aspectRatio="4/5" 
      sizes="100vw" 
      media="(min-width: 30em)" />        
  <Image 
      src={data.src} 
      aspectRatio="2/3" 
      sizes="100vw" 
      media="(min-width: 45em)" />
  <Image 
      src={data.src} 
      aspectRatio="1/1" 
      sizes="100vw" />
</Picture>

A DX similar to this would be ideal. We should also have crop="focal_point" support (via MediaPresentation object); have connected with @richardmonette previously on this with some thoughts.

[benjaminsehl]

I'd also be curious to take the opportunity to look at a CSS-only blurhash; which @frehner proposed previously. This looked pretty interesting to me: https://joebell.co.uk/blog/loading-images-with-the-blur-down-technique.

Or at very least, provide an example for it.

[blittle]

Draft implementation of focal point: #2139

[benjaminsehl]

Reviving this image — 

We ideally need:

• Thumbhash support (land this on stable: https://shopify.dev/docs/api/storefront/unstable/objects/Image#field-thumbhash)
• MediaImage as the only SF API type for images, so presentation can be supported for product images too: https://shopify.dev/docs/api/storefront/unstable/objects/MediaImage#field-presentation
• Use CropRegion: https://shopify.dev/docs/api/storefront/unstable/enums/CropRegion

This also needs to all work within a single component and be automatic for you. We would support <Image crop="focal-point" aspectRatio="3/2" /> and we'd also have <Picture> … as described above.

We'd also make it possible for above the fold images to be automatically preloaded, so we can render faster, as is in #2061 — in a dream world you'd just do <Image eager /> or something, since our default images should still be lazy loaded … and then a <Link /> component that Hydrogen exports would auto figure stuff out for you. Everything described in the preloading PR should be a no-op.