Display Resolution Revisited

Who's Screen?

I have two computers that I use for web page development. My Mac Mini has a Dell display with 1920x1080 resolution at roughly 92 dpi. My iMac has a 27" display that's 5120x288 at 218 dpi. Is it worth resizing images? If so, what resolution should I use?

Process

I reduce the dpi of the images on my web pages to make them load faster. The image below, taken with my iPhone, started at 3.7MB. Resizing to 72dpi resulted in a 125KB file, quite a saving in size which means it will load roughly 30x faster. I usually upload the full size image that the user can see by clicking on the page image. That makes the page a sort of 'thumbnail' to the actual image. To see if full size, you'll need to have your browser display it in actual size by clicking on the image again.

Here's a handy tool for determining screen resolution: dpi love

Output

You can see this yourself by looking at the three images below. The first one is downsampled to 72 dpi. It looks fine on the Dell monitor. It looks fuzzy and out of focus on the iMac.

The second photo is downsampled to 218dpi. It looks much better on the iMac. The edges are sharper, the image has more contrast and it just looks better.

The last sample is the full size image, scaled using the image width and height attributes. It looks best on a high dpi screen but it loads much slower.

This is all a tradeoff between load time and image quality. I could just use the full resolution and scale it using the image size attributes, as I did in the last sample. But that makes the pages load slowly. Up until now I used 72ppi but I can see an appreciable drop in quality.

Speed vs Quality

MPCC 11th Fairway
Downsampled to 72dpi, 648x486, 125KB - fast but low quality

MPCC 11th Fairway May 23 2017
Downsampled to 218dpi, 1962x1472, 939KB - better quality but larger file/slower load time.

MPCC 11th Fairway May 23 2017
Full resolution, 4032x3024, 458dpi, 3.7MB - Big image scaled to fit my standard image size. You may notice the page display delay while the large file was loaded into a relatively small window. To get a sense of how much time the browser spends loading this image, click on it to see the file load into a new window.