What is the proper image resolution and size for Iphone and Android


#1

Hi Ionic community, wish everyone has a good day.
I have a question, our server stores all images of our products, all of our images are 1:1 ratio which could display as 100% width on the device’s screens, our product focus on iPhone(no iPad) and Android, so the image should be compatible across the devices. So I’m wondering what is the most proper image resolutions and size in general to match my requirement? Does iPhone Retina require higher resolution images?

Many Thanks


#2

Highly depends on what you want todo. Do you just want to show a picture where you CAN or CAN’T zoom in ?

If you don’t want to zoom in you are good with 414 × 736 (iPhone 6+).
If you want to zoom in you should go for 1242 × 2208 (iPhone 6+).

The higher resolution the better the image quality for zooming in!

As example if you have a nice quality picture with 414 × 736 pixels over your phone it will still look great it will only get pixels if you zoom in.

What I do for my Application: I store 1x, 2x and 3x Images like if I have a button i store it 3 times with different resolutions so i can adjust it automaticly in CSS if the screensize is over the amount of pixels it takes the bigger resolution images.


These links might help you also out.

Resolutions for iPhones: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Android:
Most popular screen sizes
https://developer.android.com/guide/practices/screens_support

Hope this helps :blush::four_leaf_clover:


#3

Hi Cherry, Thank you for the reply. It’s very helpful