Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

danaaaaa9387
Level 1
Level 1

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?

1 Accepted Solution
davidjgonzalezzzz
Correct answer by
Level 5
Level 5

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.

 

 

View solution in original post

1 Reply
davidjgonzalezzzz
Correct answer by
Level 5
Level 5

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.

 

 

View solution in original post