[Image] Fetch different images depending on screen scale

[ide]

Being able to fetch different resolution images depending on the device is good for all the reasons UIKit natively supports @#x, plus saving bandwidth. Something like srcset seems roughly right, and the code could look like:

<Image
  sourceSet={{
    2: {uri: 'http://example.com/image.php?w=200&h=200'}
    3: {uri: 'http://example.com/image.php?w=300&h=300'} 
  }}
/>

cc @vjeux you've probably thought about this

[vjeux]

I'd like for it to be as transparent as possible, you should have an "image" object and send it to the source attribute and should be good to go. I like the idea but imo it should not be a different attribute.

[vjeux]

cc @frantic: what is the current format you implement for handling 1x, 2x and 3x?

[ide]

source={multiSourceObject} is OK too if it supports multiple URLs.

[frantic]

We currently do this for static images, because packager tells us what scales are available. We can do this for server side images as well, but we need information about what images are there on server.

Btw besides 1x, 2x and 3x we are going to support any scale, including 1.5x etc (Android will use that)

[bakso]

Watch

[ide]

@iostalk please use the Subscribe button on the right of the page

[paramaggarwal]

I feel it would be simpler if this resolution based image URL handling was done at a layer above React itself. This probably does not belong in the core. The application can decide what should be the correct image URL for the right resolution and then set source.uri.

[ccheever]

I think this could probably be closed -- at least for now -- because https://github.com/exponentjs/react-native-responsive-image handles this nicely at the application layer (as @paramaggarwal suggested) with an interface like @ide described.

It might make sense to eventually migrate this to core if people are happy with the approach and using it becomes an agreed upon best practice.

[ide]

thanks for the reminder. ResponsiveImage has been working well so far. npm packages ftw!