Images for Multiple Screen Resolution

ionic-v1
1

Just want to ask, if how do you handle images for multiple dpi screen. Are you creating multiple image to support different screen resolution. For example images Samsung Galaxy Note 3, Sony Xperia Z3, iphone 5S. I am building an ecommerce mobile app like amazon that’s why my challenge is on the images.

Thank you in advanced

1 Like
2

What I am doing is, When the image is uploaded on a PHP back end, the image is resizes to 720 480, 320, 200 widths.
These are stored in folders called “xhdpi”, “hdpi”, “mdpi”, “ldpi”.
To get the DPI, you can use

switch (window.devicePixelRatio) {
case '0.75':
	var density = 'ldpi';
	break;
case '1':
	var density = 'mdpi';
	break;
case '1.5':
	var density = 'hdpi';
	break;
default:
	var density = 'xhdpi';
	break;
}

This then returns the folder it wants the image from.

From my experience it wont be needed to use an image bigger than xhdpi. compare a 720p image and a 1080p image and you can’t tell the difference.

2 Likes
3

Thanks EffakT. So the 720 480, 320, 200 is the width of the image when I resized it through backend for example in PHP, how about the height of the image I am worried what if the image will be pixelated.

4

Maintain the aspect ratio and force the image being uploaded to be at least 720 width, that way it will never pixelate or stretch.

5

Thanks, By the way how you display an image hosted over the internet not on the directory, I am displaying an image from this url https://static.imgix.net/treefrog.jpg?w=720&h=400&dpr=2 but the image is not displaying on the device, my smartphone is already connected on the internet.

6

Personally, I am downloading from the server and storing them on the device using $http.
Though, I am assuming you are using the whitelist plugin,
add this to your config.xml

<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

And this to the head of your index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

I haven’t tested but should work.

Why it is not letting it display is because All network requests are blocked by default for security reasons, therefore we have to tell it what we want to allow.