CODEWITHSUNDEEP
react-native
Wonka
Wonka

Reputation: 8674

React Native - Image size for pixel density?

When a user uploads an avatar, I resize it to 100px x 100px on the server.

I want to display that exact size and for the image to be sharp regardless of device accessing it, never blurred, but I know apple has 2x and 3x sizes as well for pixel density, which I am not sure if it will blur my image or not.

So since I don't have different devices to test this with at the moment, would I need to resize the image to 3 sizes to avoid any bluriness and serve the appropriate one based on pixel density? Like:

100px x 100px
200px x 200px
300px x 300px

If so that would be a pain, as there may be additional densities in the future unaccounted for. Or would the 100px x 100px alone suffice and look sharp regardless of device pixel density?

Upvotes: 3

Views: 3779

Answers (2)

hasseio
hasseio

Reputation: 609

There are two sets of units in react-native. Logical dimensions, and physical dimensions. Logical dimensions is used for layouts ie inside your styles. Physical dimensions is used for image sizing.

If you use the two API's Dimensions and PixelRatio you can get the physical width of the device your app is currently running on. Something like;

var { logicalWidth } = Dimensions.get('window');
var physicalWidth = logicalWidth * PixelRatio.get();

Obviously a 100px wide image is not going to look good on a modern phone if you are expecting the image to be stretched across the entire width of the display (the width of a Nexus 6 is 1440px). Given the range of dpi on todays phones, I would generate multiple versions of the same image on the server according to various pixelratio's that you choose upfront, and then only load the image needed for each device ie pass back the pixelratio of the device in the image url and interpret on the server backend.

Upvotes: 4

Thomas Simonsen Strømmen
Thomas Simonsen Strømmen

Reputation: 3

I do not think your images will be blurry on a device with high pixel density. However, if someone uploads an avatar that is 20x20 pixels large and you stretch it to 100x100, it will be very blurry.

Upvotes: 0

Related Questions