hamiltro website design

How To Resize Images For Your Website in Photoshop

The two images below have been resized down to 267 x 200 pixels from the same original 2272 x 1704 pixel image. The one on the left is blurry and is 92KB. The one on the right has more detail and is only 20KB. This tutorial is to show you how to get the better results for your website.

Generally the images that you'll get from your digital camera, unless you are using the lowest resolution setting (which isn't a good resolution for anything except the web and sending images by email), will be of such a high resolution that their file size will be wasted on the web.

So the first thing to do if you want to put your images on the web is (after making a back-up copy of your original image) to open the image in Photoshop and, under the Image Menu, select "Image Size" and change the resolution to 72 pixels/inch (with "Resample Image" left unchecked at this point).

This will tell you how large your image is in terms of screen real estate. Probably way too large. If you have your website layout set already and know what size you are going to be resizing to, you can now start reducing the size. If you are creating a gallery of images, it's best to have all your images resized to the same height if possible so that you can keep the layout the same from page to page.

The most important things in resizing your images are:
(i) to reduce the size by no more than 50% at a time
(ii) to sharpen the image slightly at each step down. With CS4 and higher versions of Photoshop, it is possible to use the "Bicubic Sharper (best for reduction)" selection available in the image size window -- which rouhgly does this for you. In earlier versions of Photoshop (or for finer control over your sharpening proceess, as this sometimes doesn't do the absolute best job) use the "Filter > Unsharp Mask" every time you reduce the size, as follows:

If you are creating more than one sized image for your website, start by resizing towards the largest size. If this were, say 800 pixels high, you need to multiply this number up (1600, 3200...) until you reach the height of the image you are about to resize. 400-450 pixels is a safer height to use for a page if you have any other elements taking up space, but you may want larger images for pop-ups.

Say your original image is 1704 pixels high and you want to go down to 200 pixels (200..400.. 800.. 1600..). First reduce the size to 1600 pixels high (keeping "Constrain Proportions" and "Resample Image" checked so that you reduce the size proportionately.

Then go to the "Filter" menu and select "Sharpen > Unsharp Mask". This mask will sharpen up the edges between major color changes in your image as you progressively reduce the image in size. A radius of 0.3 and 100% can work well when you're at the early stages of resizing, but as the image size gets smaller you'll want to adjust the % and/or the radius down. The threshold is a fine-tuning tool that you can experiment with but you can usually dispense with it and still get a good result. Toggling preview will allow you to see the effect of the sharpening process. Once you're happy (don't over-do it), click OK.

Repeat this process until you have your image to the size you want. NB If you have Photoshop CS and have the Bicubic Sharpener option (selectable in the image size window) you can use this instead of the Unsharp Mask in many situations — especially when resizing down from very large sized images. It doesn't allow for any fine-tuning of the sharpening process (and it can over-sharpen) but it's better than not sharpening at all in most cases.

Then, to save your image with the smallest optimal file size for the web, rather than merely saving the image as a jpeg, use the "File > Save For Web" method of saving the image. This allows you to not only reduce the file size using quality sliders (for jpegs) or limitations on the number of colors (gifs and pngs). Take the quality down to just before you notice a drop in image quality that you mind. And save.

This process not only allows you to carefully reduce the file size by reducing the image quality (without it being noticeable) but the image file is saved without all the meta data that Photoshop usually includes in the image-saving process (a thumbnail, etc) — and the resulting image will be significantly smaller than one saved by other methods.

There are two exceptions to the above process. One is if you have images that don't actually have any detail (soft watercolor washes, eg). In these instances, it can be better not to sharpen your images.

The other is if your images absolutely depend on a certain saturation of color — especially in the red range. The save-for-web process slightly dilutes colors and seems to have a particularly hard time with reds. In such instances, try first adjusting the saturation, color balance and contrast before beginning the saving process then saving the images both ways and compare the results — both in terms of the color saturation and the file size.

Many reasonably-sized images can be saved at 50KB or less and still look good on the web. If you don't have too many images on a page, it's fine to go a bit over 100KB for a large image but be careful about going much higher.

Compare the four small images below. All were resized down to a 200 px high image from one that was originally 1704 pixels high.

		This image has been resized in one step without any sharpening on the way down and has been simply "saved" as a jpeg. The image is badly lacking in detail and is 92KB.
		This image was resized in four steps (1600 > 800 > 400 > 200 px) and sharpened at each step then also simply "saved" as a jpeg. This image has great detail and is still highly saturated but it is 100KB (the more detail in your image, the bigger the file size).
		This image was resized in four steps and sharpened at each step as above — then saved using the save-for-web process. Although it's lost a little color quality, it has the greater detail and it's only 20KB. And it's quick and easy and images can be batch-processed to save time.
		This image had its saturation, darkness and contrast adjusted before going through the resizing/sharpening/save-for-web process of the one above. This way you get the detail, you repair some of the loss of color quality AND you get the image coming out at only 20KB. It's a little more time-consuming but you can get great results.

So how you deal with image quality is up to you (though you should remember that your viewers don't see your original for comparison) — but be sure to resize and save your images very carefully. Remember, too, that every time you re-save an image as a jpeg, compression occurs, so it loes image quality. Keep your image in an uncompressed format for all work and leave saving any image as a jpeg until the last step.