To avoid relying on a browser to size an image, it should be done for a specific use. Taking an image that has 4000 pixels in width to having just 600 or less is a drastic reduction and there are several things to consider.

How big do you want it

The first thing to know is the final size for the image. Let’s use 600 pixels wide for our examples. This is not a tiny image, but it is not large either.

Adobe Photoshop is the tool of choice for most photographers, although Adobe Lightroom has the features people use most and very little of the complexity and has been welcomed by professionals. In Lightroom you can crop an image to specific dimensions or export an image and size the image during the export, but you do not have the level of control that Photoshop allows. For this example I’ll use Photoshop CS3.

Image Size in Photoshop

Photoshop CS3 Image Size Dialog (click to see larger)

The above dialog is available in Photoshop by going to the Image menu and selecting Image Size. Make sure there is a check in the Constrain Proportions box to ensure that the image doesn’t get out of proportion. Enter the Width or Height into the appropriate box and the other will automatically be updated.

The Resample Image dropdown at the bottom has several choices. The most often used choice is Bicubic Sharper. This will retain some of the sharpness in the image and do a great job reducing the size of the image. The second choice would be Bicubic if you happen to have an image with subtle tonal variations across a broad part of the image, like in a picture of a sunset. Using Bicubic will retain as much of the smooth tonal variations as possible.

Now that you have the right size, make sure and bring back some of the lost detail by sharpening your image.

Results

The first image below started out over 4300 pixels wide. For comparison the monitor I use to edit my photos is set for 1280×1024 resolution. So for me to view the entire image on my computer screen I have to reduce the image to 25% of its original size. For displaying on the web, even 1280 pixels wide is pretty big. From what I have seen recently 1280×1024 is becoming the default monitor resolution, but you don’t want to actually try displaying images at that size as they are too large to fit in a browser window with anything else.

The image was reduced in Photoshop to 2000 pixels wide and then sharpened appropriately for that size. To display it in the browser I used an <IMG> tag and told it to display the image at 600 pixels wide. This forces the browser to resize the image for display in this page.

2000 pixels forced to 600 pixels by the browser

The image below started from the same original file and was resized in Photoshop to be exactly 600 pixels wide and then sharpened. The image is displayed in this page using an <IMG> tag again, with the width set to 600 pixels. In this case the browser doesn’t have to resize the image, it just displays it exactly as it was saved.

600 pixels displayed full size

The differences for this image show up in the roof tile patterns, with the upper image showing some moire patterns from the browser resizng the image.

Processing Images For The Web (Part 1) - Introduction
Processing Images For The Web (Part 2) - The IMG Is Everything
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web

I’ve always like the way that the open source lightbox code displays images. There are a lot of sites out there using the code, and others that use variants. I had some things I didn’t like about the original, but came across the floatbox implementation a little while ago. It improves upon the original and made changes which addressed all my needs.

Click on one of the thumbnails above to see what floatbox does. I have integrated the functionality into my website, so you can check it out in all my portfolio galleries.

News update, website