[Image] Get images sized according to screen DPI about emission

[alloy]

https://facebook.github.io/relay/docs/api-reference-relay-container.html#preparevariables

[alloy]

The problem we’re facing with this is that we won’t know the view dimensions until after a layout pass has been performed. This means that we’d have to:

1. Fetch initial metadata such as aspect ratio and all other Relay data for the current view.
2. Do a layout pass and start rendering views.
3. Trigger additional Relay data fetches now that we know the size at which to display the view.

In a situation where there can be many image views, these additional fetches can add up, so this isn’t really an option. We also don’t want to hardcode all sizes for all devices, it needs to be dynamic.

As such, I think that we would need to generate the image variant URL on the client after all, which means that:

• we need metaphysics to return the template URL, we can do that during the initial fetch
• we need code to generate the template URL, which metaphysics already has, so maybe that can be extracted?

/cc @dzucconi

[alloy]

Ok, after reading the source for this it actually seems to be really simple. What I understand is:

• We use CloudFront CDN to host our images.
• CloudFront Gemini provides an image resizing API that sits behind a CloudFront cache.

Thus, what we should do is:

1. During the Relay query we ask for:
   • the URL of the large version
   • the aspect ration of the image
2. Based on the aspect ratio we let our image view calculate the dimensions during the React shadow dom layout phase.
3. Once the image view has performed its layout, we take those measurements and generate a URL for it by using the Gemini API.

[alloy]

#54 makes this work for images that are displayed according to their aspect ratio, but not yet for those that are cropped.

[alloy]

For cropped images, what needs to be done is, always get the regular ‘large’ URL of the image, then in the imageview component, if given width/height as style props (i.e. the user of the component wants a fixed size / crop), generate a URL like this, except one that crops.

Here’s an example where you can see that cropped URL basically just uses the large version in its request for a cropped version:

          "image": {
            "url": "https://d32dm0rphc51dk.cloudfront.net/rHV84MOF6XApp7tAMwTT2A/large.jpg",
            "cropped": {
              "url": "https://d7hftxdivxxvm.cloudfront.net/?resize_to=fill&width=100&height=100&quality=95&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FrHV84MOF6XApp7tAMwTT2A%2Flarge.jpg"
            }
          }

[alloy]

Oh, and then multiply the explicit styled width and height by the pixel ratio of the screen: https://github.com/artsy/emission/pull/54/files#diff-da61f6f33156049db872499f194f6f79R33