Online Image Resolution Tests

[Geek alert – this is very detailed information that will be of interest to a narrow group of visitors – avid photographers and technically oriented ornithologists – so proceed at your own risk!]

For the Skidaway Island Bird Book, we want to provide very high resolution images but we also want those images to be stored in a small enough file size so that loading times aren’t excessive.

This page is a resolution and size test for various web site images, particularly the Skidaway Island Bird Book. For this test, we’ve used an image of a family of Great Egrets taken at The Rookery in the Midpoint section of the Landings.

The “original” version of this image (for the purposes of this study) has a resolution of 3000 x 1724 pixels or 5.2 Mpels (million pixels), and is compressed as a high quality jpeg image, with a resultant file size of 4.3MB of disk storage. If it were put on the website at that size, a full 4.3MB of data would need to be downloaded and it would lake a very long time to load, especially for those without high speed internet connections, and thus would be of little use to many of our visitors.

So the question is, what techniques can we use to make the file size much much smaller, thus providing acceptable load times, and yet still provide reasonably high quality, high resolution images?

First, what is a reasonable target file size? We have decided to limit our files to about 800KB (0.8MB), knowing that this is a typical good quality image file size with reasonable image load time in most web browsers. Given that decision, the question then becomes: how best to reduce the file to this size while still preserving as much as possible of the high resolution of the original image?

There are a number of ways to reduce the size of a stored image file, but the two most common would be to:

  1. Reduce the resolution or total number of pixels (reduce the number of pixels both horizontally and vertically, by combining (averaging) groups of pixels into a single pixel – fewer pixels = less detail), or
  2. Increase the compression ratio of the original resolution image. In most photo editing software, the “save jpeg” dialog box permits adjusting the “quality” of the image. Some editors provide a range of 1 to 100 for quality, and others provide qualitative levels such as best, high quality, medium, etc. (lower quality = smaller file size, but if the file size is halved, is the “quality” halved as well? Maybe not!)

In the table below are two versions of this image of a family of Great Egrets. Each of these images takes approximately 500-700KB (thousand bytes) of storage, so each will display in your browser in about the same amount of download time.

The image on the left has been made smaller by reducing the total number of pixels from 5.3 million to 574 thousand, a 10 to 1 reduction in total pixels, and saving it as a high quality jpeg. While it’s technically called “resampling”, you could think of this as taking every group of 3 x 3 pixels and averaging them into a single pixel, that is, about a 9 to 1 reduction.

The image on the right has been shrunk by just changing the quality of the jpeg compression, and choosing a quality that results in the desired file size reduction, without eliminating any of the 5.3 Mpels in the original. While file compression algorithms are very complex mathematical transforms, they work by analyzing an image and finding similarities between different tiny parts of the file, and then describing the image in a compact way that allows the image to be reconstructed (uncompressed) into a reasonably accurate version of the original. While some compression algorithms are lossless, JPEG compression is lossy, and the amount of loss can be controlled by changing the “quality” at which the file is saved.

The two images are presented here side by side, in medium size “thumbnails” at about 300 x 174 pixels or 53 Kpels (thousand pixels), about 1 percent of the original image’s pixels. The images both look pretty much the same, but details of the images aren’t observable at that resolution.

Each of these thumbnail images is also linked to an image that will display full screen in your browser, and those images are both 574 Kpels, or about 10 percent of the original image’s resolution. Click on each image to view it full screen.You will note that they still look pretty similar, and most people would not perceive much if any quality difference.

Great Egret

Great Egret – The resolution of this image is 1000 x 574 pixels (0.57 Million pixels, or Mpels). The fewer pixels, the less the resolution of detail when the image is zoomed in. The size of this file, which determines download and display speed in your browser, is 635KB (thousand bytes), a pretty standard size for an image on a web page.

This image is 3005 x 1724 pixels (5.2 Million pixels, or Mpels) The size of the file, which determines download and display speed in your browser is 500 KiloBytes, 500KB)

Great Egret – The resolution of this image is 3005 x 1724 pixels (5.2 Million pixels, or Mpels). The more pixels, the better the resolution of detail when the image is zoomed in. The size of this file, which determines download and display speed in your browser is still only 573KB,  a bit smaller than the much lower resolution image on the left.

 

Now note that, when blown up to full screen, the file on the left is at it’s full resolution, and can’t be made larger without interpolating pixels (making up detail in the image which just is not there).

The file on the right, however, when displayed full screen, is still not being displayed at it’s full resolution, and your cursor should look like a magnifying glass with a “+” symbol. Clicking that anywhere in the image (say the chick’s heads) loads and displays the full size image, which is the full 5.3 Mpels of the original subject image. Since that image is larger than your browser’s window size, you will only see a portion of the image, and can use your browser’s arrow and scroll keys to move around the image and see all aspects of it at this extremely high definition size. [Note that tablets and smart phone browsers don’t always have the capability of zooming to this third level, or they may provide only the first and third level zooms, with pinching and stretching for intermediate, on-the-fly zooming].

Make your own comparisons – compare parts of the two images, at max resolution to each other. For example, the beak of the adult bird in the center of the frame – when zoomed in on the image on the left, the beak has a diagonally striped, stair stepped, pixellated look. Now zoom in to the same spot in the higher resolution image on the right. You will notice some amount of visual “noise” from the high level of compression, but nothing like the pixellation of the image on the left.

Conclusions: Having done these experiments, we have chosen to use the following techniques for the high quality images on the site:

  • First adjust image resolution – scale (resample) image to a max (width or height) of 2000 pixels
  • Then adjust image quality – set jpeg compression to a “quality” level that will produce a file size of less than 800KB

We’ll leave you with a screen shot of zooming in to both images on the same computer in two adjacent browser windows. Even though there are some artifacts (visual noise caused by data loss due to the compression process), the image on the right is far more informative than the image on the left. Both images the same size in terms of bytes, but one has 9 times more pixels (3 times more horizontal and vertical). To make sure you see the image below in full size, click on the image itself to see it in it’s own page. Please feel free to email me any thoughts or comments on this subject at cunningham.rick@gmail.com

Connect with us!