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

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

Avatar

Avatar
Level 1
danaaaaa9387
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
danaaaaa9387
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
danaaaaa9387
Level 1

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?

View Entire Topic

Avatar

Avatar
Ignite 1
Level 4
davidjgonzalezzzz
Level 4

Likes

54 likes

Total Posts

60 posts

Correct Reply

20 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
Level 4
davidjgonzalezzzz
Level 4

Likes

54 likes

Total Posts

60 posts

Correct Reply

20 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
davidjgonzalezzzz
Level 4

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.