What specs should we use for product images for a mobile centric e-commerce site?

[Cleop]

I am working on a mobile-first project that is using image uploads for product images. In this instance the products are drinks (bottles). The client has asked what specs they should follow for providing the images for these products. We want to ensure images are of a good enough quality but that they also load quickly. So I want to know what specs I should request?

[nelsonic]

@Cleop great question (as usual)! This is a tractable problem disguised as a complex one.
(I understand that it can feel overwhelming at first, but there's a straightforward approach)

My suggestion for how to approach this quest is to Google for the following:

"most popular mobile screen sizes 2018"

https://www.google.com/search?q=most+popular+mobile+screen+sizes+2018

Thankfully this data is easily/publicly available:

• https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions (General)
• https://deviceatlas.com/blog/most-popular-android-smartphones#uk (Android)
• https://mediag.com/blog/popular-screen-resolutions-designing-for-all (Good post on designing for popular screen resolutions)

.then, consulting with http://screensiz.es list the 3 most common devices and their corresponding resolutions on which the images will be viewed. e.g:

• iPhone SE (small screen) ... thankfully you have this device in your pocket so, start-here^TM
• iPhone X ("High End") use the XCode simulator for viewing images on this device. Or if someone in the F&C Cohort or "Space4" has one, ask to borrow it for a few minutes to run "real device" tests.
• Samsung Galaxy S6/7/8 (Whichever one you have access to, thanks to @Danwhy ...)

I would always re-size images into 3 sizes:

• Thumbnail
• Mobile
• Full Resolution

And then use the appropriate image in the UI depending on the Device User Agent.

Please let me know if this is enough detail to go on, so you can proceed with this Quest.
Thanks! ✨

[Cleop]

Thanks for your help @nelsonic, these are the sizes of the devices you mentioned:

iPhone SE: 640px (w), 1136px (h), 16:9 aspect ratio
iPhone X: 1125px (w), 2436px (h), 19.5:9 aspect ratio
Samsung Galaxy S6: 1440px (w), 2560px (h), 16:9 aspect ratio

• Given their variance and that you proposed just one mobile image size, should we use the largest (Samsung Galaxy S6) as our mobile dimensions?

• Our client has asked us specifically for what the spec should be, would you suggest I ask for the full resolution option and then I do the thumbnail/mobile resizing? I think it would be useful if I at least ask for images in the correct aspect ratio which is 16:9 for the iPhone SE and Samsung Galaxy 6.

• As for the thumbnail size, I'm not sure exactly what kind of thumbnail you're referring to. It makes me think of either a YouTube video thumbnail (a bit like the green Rover's Return image below) or of a tile that save to your home screen for websites on mobile. Perhaps you meant a thumbnail in the relevant context to my app. In this instance I have portrait or landscape images on mobile (the bottle example or the green rectangle). However on mobile they're only ever presented at this size in both orientations because anything smaller wouldn't be very easy to see. But my assumption was that the 2 examples below would currently be displaying at what you described as the 'mobile' size. So perhaps you could clarify what size or circumstances a thumbnail might be used in?

I came across this useful article for switching between which image is served using srcset and sizes: https://blog.imagekit.io/how-to-deliver-responsive-images-to-browsers-across-multiple-devices-30cfae17390e

[nelsonic]

@Cleop images on eCommerce websites are surprisingly one of the most challenging things.
My thoughts on this are (unsurprisingly): "Test it"!
Go with the smaller image width e.g: 950px
and see what users say. If people complain that the image is "grainy" on their High-end device, then we can invest the time to do UA-detection and serve a bigger image to people who have bigger phones.

When in doubt always fire up your browser and navigate to Amazon!
(Nobody has spent more time/money/effort optimising their site for mobile commerce than Amazon...)

If Amazon is serving an image that is 880px wide for a mobile device
(in simulator on Chrome Dev tools)
.then 900px is a good starting point to base your hypothesis for testing.

As for the thumbnails (which is what you/we should be focussing on for the CS project),

300px wide is a good starting point for the "carousel".

Remember that iPhoneX and Galaxy S6/7/8/9 will always "upscale" the image on the device,
meaning that serving a smaller size (lower quality) image will be shown with more pixels but will take up roughly the same screen space.

Again, if in doubt, test it on as many devices as you can get your hands on.
When I've built image uploading functionality before, that's exactly what we did.
We went out and bought the devices for the project!
If you need a particular device for testing, just open an issue in "HQ" and we can order one today.

[Cleop]

Thanks @nelsonic I will start with 900px and test. I don't think it will be necessary to toggle between multiple image sizes for different mobile devices at this stage.

Regarding thumbnails, at the moment we're stacking our carousel on mobile so that the images are exactly the same size as they display in other places on the site in mobile, so perhaps for now this isn't needed?

[nelsonic]

@Cleop it all depends on how the images are being loaded on Mobile.
If we are fetching all the images in the carousel on initial page load, then it could make the page feel "slow". Again, let's test it and see. 👍