Find the Missing Pixels

NOTES TO MEMBERS > Image Resolution: A Web Designer’s Perspective.

Photographers are a fussy bunch when it comes to displaying their images. Whether on large wall hangings, magazines, photo books, gift cards or any other form of printed photograph, they want to have the absolute best image quality. The result, these days with large full-frame sensors, is usually a very large image file — possibly in the neighbourhood of 25MB or more, at a pixel resolution of 300ppi or more. They know this will show their work at its very best…and of course, for printing, they are absolutely right.

The Big Question

Can such a large image be reduced to a file size that is acceptable for posting on a website, and still show that image at a quality level it deserves? Let’s fine out…

Here we are comparing 5 versions of the same image taken with a full-frame camera (Isobel Lamarche) . The original image file is 6720×4480 pixels at 300ppi and 26.6MB.

  • First, the image was reduced to fit the 1400×1050 box as required.
  • It was then processed at 5 different jpeg quality settings with Affinity Photo > Export… Quality settings include 60, 70, 80, 90 and 100%
  • Each image was then “Saved for Web…” (Changes resolution to 72ppi)
  • After uploading, images receive a final Glossy Optimization with a highly regarded WordPress plugin called ShortPixel.

Your Challenge

To get the most from this little exercise, be sure you do not look at the second gallery until you have recorded what you think is the correct quality setting for each image in Test 1.

  1. JPEG Quality Test 1: The images are in random order. Do your best to identify which is which: 60, 70, 80, 90, or 100% jpeg quality.
  2. JPEG Quality Test 2: View after Test 1. This second gallery will display the jpeg quality setting and the file size of each image.

— HjD