Images for Multiple Screen Resolution

ionic-v1
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