Comments (5)
@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-hereTM
- 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! ✨
from imgup.
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
from imgup.
@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.
from imgup.
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?
from imgup.
@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. 👍
from imgup.
Related Issues (20)
- Chore: Remove Image Expiry (Don't delete images from S3) HOT 4
- `imgup` Fly.io App deployment overwriting AWS env vars leading to failure HOT 4
- chore: Have bucket names imported env variables
- BUG: Couldn't upload files to S3. Open an issue on Github and contact the repo owner. HOT 2
- Feat: Logging + Metrics
- `Who` can/should use our image uploading + resizing service?
- EPIC: Clarifying Goals/Roadmap for Image Uploads Project HOT 3
- Chore: Replace `AWS S3` with `Backblaze B2`
- Feat: Dynamic Image Resizing HOT 16
- chore: CORS issue when calling the API from `Flutter` web devices
- Discuss: Dedicated Domain for Image Uploading + Hosting? HOT 1
- chore: Build is failing HOT 4
- Chore: Re-do Landing Page - Remove All Non-essential HOT 1
- Feat: Add Button + `JS` To Copy Image URL HOT 2
- add passing an URL and query string params to resize an image? HOT 3
- Ex_AWS update 2.5.0. No more xml parsing needed HOT 1
- Testing Image-To-Text HOT 84
- First tests - Upload to R2 HOT 6
- First tests - upload to B2 from the server seems ok with ExAws.S3
- Chore: @dependabot Builds Fail 😢 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imgup.