… 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.
Crop on client side
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.
Pixel density (2x) and resolution (4K)
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
Retina is cute, but not the optimal resolution
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.
Deliver the optimal image for the device at hand
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.
The 1.5x compromise
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.