MacInfo Home

Choosing:  for WWW


We start from the original picture out of the high-quality digital camera, which shot the scene at 2560x1920 pixels.  That is 4'915'200 pixels, more than ten times what the 800x600 image has!  If we take just a 800x600 bite out of it, say at the top left corner, it looks like this:

Clearly we don't want to put the entire image on the web!  (You can download it (1.3MB) to work with it in PhotoShop)

It would not only be too big to view, it would also take a long time to appear since it is over a megabyte big.  So we want to reduce it to an acceptable size.  In PhotoShop the Image Size panel shows:

Changing the resolution will not help:  we will still have the same number of pixels, and the browser will still show an enormous picture.  We need to throw away information by reducing the number of pixels.  That means PhotoShop has to do some work, and the check box Resample Image has to be ticked.  Now we can change the pixel numbers:

Note that we only need to change the width, the height follows in proportion because the check box Constrain Proportions is also ticked.  When we click the OK button, PhotoShop does some work and we get our reduced image.  The definition has changed to 800x600 but note that the resolution is still the same.  Had we printed the original at that resolution it would have been 45.16 cm wide, but the reduced image is only 14.11 cm wide because we don't have as many pixels.  We have lost a lot of information:  compare an enlargement of a part of the panel above the door, taken from the camera original with the same from the reduced picture:

detail from the 2560x1920 scene detail from the 800x600 scene

The file size is also drastically reduced:  the camera original took 1300kB, the reduced version only 454kB.  A lot of detail is gone.

But we can do even better by using the JPEG compression.  This compression level can be influenced in the Save for Web... dialog of the PhotoShop File menu, here is the top-right part of that dialog box:

In the image below the compression is set to very high by setting the desired quality to Low.  The resulting image is now only 44kB big instead of 454kB:

Valid XHTML 1.0 Strict Valid CSS

next planned revision: 2009-01