Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

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

Avatar

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

Avatar

Correct answer by
Employee

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

Avatar

Correct answer by
Employee

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.