User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am designing an editor where the user will upload their own images. I have to give requirements to them. In sketch where I am designing the image size is 400x800 should I tell them to upload 800x1600 instead?
If someone is using a 4k monitor or retina laptop don't the images have to be 2x?
I'm assuming the editor UI in question is designed for general consumer audience who would be accessing it though desktop browser. In this case it is safe to assume they are going to be viewing it though an HD screen (1920x1080)[1].
To bring the best experience possible you want to encourage users to upload images of the appropriate size, so that they look good on large screens, however you need to find a balance with page upload speed and cost of data storage.
Work with your devs to find the optimal recommended size, but start with the best image quality (ie 800x1600).
[1] https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
… tell them to upload 800x1600 instead?
Since we’re on a UX community, I feel a need to react to this.
Asking users to provide an image file in specific dimensions is asking them to get into photo editing. Cropping and resizing are necessary.
Is your target audience able to manipulate photos in the necessary way?
If not, a usable system will do the resizing for them, and accept photos in the format they have. That might come from their phone and be pretty big.
Users’ experiences might suffer if very heavy files need to be transferred to the backend first, so it’s a possibility and best practice to provide a client-side UI to crop the image.
It seems that generally there is some confusion about what 2x actually means.
4K or FullHD only tells you how many pixels there are on the screen, but not how dense they are. You probably can imagine that a 4K phone screen will have a sharper image than a 60" TV.
Then again, it depends on the distance to the screen, whether users can perceive a difference. The Retina screens were the optimum for reading at an arm’s length.
The multiplication factor you refer to, the 2x, allowed to work around the fact that most existing apps and websites defined UI sizes in pixels. On a very dense screen, let’s say a 2x device, objects like images would otherwise have half the size. This is also known as UI Scaling, which is important also on newer laptops that have quite dense screens.
See Pixel density on Wikipedia
2x is nice, but simply a convenient Apple convention. Apple devices are not the majority of generally used devices, and even the iPhone Plus series has a factor of 2.46, the XS Max even one of 3. High-class Android devices often have a factor between 3 and 4.
Of course you could go and measure your users’ pixel densities in your analytics tool, but it’s better to deliver the right size depending on device capacities.
In Responsive Design, were we deal with a vast amount of different screen sizes, resolutions, and input devices, images are typically provided in different formats, so that the device can pick the optimal one.
Have a chat with the developers which image delivery technique they use, agree on a maximum size, and have the infrastructure generate the correct sizes.
Part of optimal is also the image format, jpg being quite outdated nowadays. AVIF and WebP are the current ones which allow to save on bytes.
Another factor is the compression quality, which can be tweaked as well.
If the infrastructure does not allow generation of optimised image versions, you could fall back to a compromise and use 1.5x as the default factor.
I remember reading some research a while ago which stated that on high density displays, artefacts in compressed images wouldn’t be as visible, hence you could use lower quality settings @>1x.
