What is an optimal image dimension/rendition to use for mobile?

Avatar

Avatar

danaaaaa9387

Avatar

danaaaaa9387

danaaaaa9387

02-03-2021

I have been struggling with image pixilation and cropping when using mobile renditions. Currently the component I am using is selecting the 750x750 rendition for mobile but obviously mobile screens are not perfect squares. Is there a commonly used dimension I should be uploading to renditions and having my component default to for mobile?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

davidjgonzalezzzz

Avatar

davidjgonzalezzzz

davidjgonzalezzzz

02-03-2021

TL;DR - there really isnt a magic number.

 

I assume Android has something similar (Im sure google can help you), but I expect it's close to what Apple recommends:

 

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-re...

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layou...

 

I'd take a look at what mobile device families your targeting and then look up the recommendations from iOS/Android and do what they suggest. 

 

Generally, i'd try to size your images relative (like 100% of vw/vh, or whatever % makes sense), and ensure the served image can accommodate the largest target device view width/view height - and then let other smaller views scale the image down. You could set up multiple breakpoints as needed if you're concerned about serving unnecessarily large files to smaller devices. 

 

Based on your 750x750 example - this would be able to expand to the full view of iphone 4,5,6,7 and 8 (non-plus version) at 2x in a vertical orientation. Any newer iphone (when expanding to full width, on a vertical orientation) is going to upscale the images - the more they upscale, the blurrier they will appear.

 

Remember, upscaling always results in a decrease in image fidelity.

 

 

Answers (0)