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: https://github.com/Shopify/hydrogen/pull/2139