2

I'm wondering if there are any studies - or even anecdotal evidence - on what the acceptable resolution of images is on high-resolution screens (e.g. phones and tablets).

Obviously, an image that's only 50% of a display's native resolution will look noticeably upscaled and blurry, and one that's 100% or above will look as crisp as possible.

But between those two cases, there are diminishing returns when increasing the image's resolution. An image that's 98% of native resolution will still look pretty darn crisp, despite the minor upscaling.

(Granted, the image's motif matters: Line art will likely show signs of scaling much more readily than a nature photograph or portrait.)

In my case, I'm dealing with an iOS/Android app that needs to show a lot of thumbnails and full-size images (all photographs; no line art), which are downloaded from a server. Obviously, the less there is to download the better, and the fewer separate resolutions the server has to prepare the better.

The server can of course just prepare, say, 4 different resolutions of an image, and just serve whichever resolution is exactly as large or larger than the native resolution of the client (the apps report their native resolution to the server when fetching content, so the server decides what resolution to send back).

But intentionally serving too-large images to mobile clients seems pretty inelegant and increases load times. What I'd like to be able to do is have the server send images that are at least X% of native resolution, where X% is whatever's "acceptable".

So I'm wondering if there's a rule of any sort for what is considered "near-enough" to native resolution. For instance, if an image is only 80% of native resolution, will it be noticeable enough to hurt the user experience? Can it be smaller? Should it be larger?

I'm well aware that it may be dependent on way too many factors to have a hard and fast rule, but I'm curious if anyone's tested it.

Improve this question
2
  • What type of app is this? Specifically, what are users going to be doing with the images? Are they going to be simply viewing them, or will they be downloading them for some other use (wallpaper, sending, etc.) For what it's worth, Imgix (imgix.com) essentially solves this problem... for a price, of course.
    – Brian
    Commented May 18, 2015 at 16:32
  • @Brian It's an informational app for a large public aquarium. The images are mainly illustrations of the different species (in the typical very detailed style of textbooks) with transparent backgrounds. Users will only be viewing them, nothing more. Thanks for the link; that's noted for future reference, since swapping out the entire image-serving part of the CMS is no-go right now.
    – Flambino
    Commented May 18, 2015 at 17:13

1 Answer 1

Reset to default
3

When I worked for a newspaper I know we had rules around how far you could push an image beyond it's native resolution, 20% larger was the threshold if I recall correctly.

However it depended on the size of the image and subject matter to an extent. I was told that the smaller the image the more a person has to concentrate on the image and more likely they will notice imperfections.

Also if the image was of a compelling news event, the rule book went out the window completely, such as mobile phone photos being used as full page images on the front page after the 7/7 bombings in London.

Whilst working on websites at different stages, I've found people's opinions on image JPEG quality very subjective, where some users didn't notice the difference between a 30% and 80% quality image, whilst others picked up on the slight artefacts in 90%+ images.

Recently I've used Cloudinary to serve images dynamically dependent on resolution on websites, whilst this is JS based, I'm it could be ported to a native environment.

If your app needs to be available offline, perhaps it could detect the resolution of the device after installing, then download the appropriately sized image media for that device and save locally. That way you don't need to include every image size for every device or maintain different app versions.

Improve this answer
3
  • Interesting. That sort of "rule of thumb" from your newspaper career is the kind of thing I'm curious about. By the way, the app already downloads only the right resolution for the device's native res, and it's stored locally. It's not meant to be fully offline-capable, but it does try to be a little clever about things. Still, if no perfect match for its resolution is available on the server, it has to pick the next best thing, and that's where the "acceptable upscaling" could be relevant. Currently it errs on the side of downloading too-large images.
    – Flambino
    Commented May 19, 2015 at 13:16
  • Thanks. If you were using something like Cloudinary (or Imgix probably), you can load the exact dimensions you need and set the weighting for the crop as needed. These would be dynamically generate images on the fly, meaning you wouldn't need the rule of thumb approach.
    – Stephen Keable
    Commented May 19, 2015 at 14:37
  • 1
    I know, but at this point replacing all image handling isn't really an option, unfortunately. Besides, everything is working quite well as-is - it just struck me as an area where a very minor change could potentially save a lot of bandwidth over time, and make the app load things faster, use less space on the device, etc. etc., all at the cost of some minor upscaling. Maybe.
    – Flambino
    Commented May 19, 2015 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.