Image Resizing
Images most often need resizing before they are suitable for use on the web. They invariably need compression, but resizing is the first step.
Resolution and Image Size
A source image is usually larger, and most often has more resolution than is needed for web. That is a good thing. You want extra data when you are making corrections, and digital images do not (neccessarily) lose quality when making them smaller.
Web resolution is arguably 72 pixels per inch. The argument comes in in that images are displayed by their pixel size, and therefore do not have resolution. I think this is really splitting hairs. To me it is much easier to say that the images need to be at 72ppi, and that 72 pixels is an inch. That means all your images will be at this resolution. They may not be that way to start with, but that is what they’ll end up at. Consider:
The top image is at 72ppi, with an image size of 2 × 1.5 inches. The lower image is also shows an image size of 2 × 1.5 inches, but with a resolution of 150ppi. Because of the display resolution, the browser displays the lower image at 72ppi, which makes it 4 times as large as the top image. So, yes, you can use images at a higher resolution, but it really doesn’t do any good. The image will be bigger than you had intended, at 72ppi. Your images will all need to be reduced to 72ppi, to keep the size relationships consistent.
Resizing
Whether scanned or imported from a digital camera, the first step is to correct them, taking out dust spots, adjusting colors, etc. This is done in Photoshop, or the image editor of your choice. Do this before you resize it. This will, in most cases, give you more pixels to play with. For some specifics on image correction, you can peruse the Digital Imaging pages.
When resizing, one needs to get used to thinking in pixel dimensions. In Photoshop, first use the Image > Image Size… dialogue, which will look like this:
This dialogue shows us several things:
- The file size in megabytes or kilobytes, at the top: Pixel Dimensions
- The actual width and height in pxels (also Pixel Dimensions)
- The Document Size, with the default unit in inches. This is the size the image will print at.
- The Resolution, in pixels per inch.
The first thing we want to do is change the resolution. Before you enter 72 in the Resolution box, uncheck the Resample box at the bottom of the dialogue, to keep all the pixels (for now):
Now change the resolution to 72 by entering 72 in the Resolution box:
Notice that the Document size will get larger. What we are doing at this point is spreading the same pixels over a larger area. We are not adding or removing anything.
Now, recheck the Resample box, and make sure the Constrain Proportions box is still checked. At the bottom of the dialogue is a pull-down menu which allows you to select the way the image will be resampled. Use one of the Bicubic (experiment to see which works best). With that all done, enter a width or height in the corresponding box:
Here is where getting used to pixels as a measurement unit pays off. The image, as it is now, is 400 × 604 pixels, with a file size of 708K, or kilobytes. The Document, or print size, is 5.5 × 8.3 inches. Here is the image, as it is sized:
It will more than likely not look like it’s 8 inches high. This is because of the pixel density in diplays, which may be 72ppi, may be 96ppi or even higher. This is why it helps to get used to pixel dimensions, and really kind of ignore resolution. Setting the image resoulution to 72 is really just setting a baseline. Site dimensions (most often) use pixels as units, so thinking of image size in terms of pixels helps relate the two.
That’s the first step. Now we need to compress the image. It’s considerably smaller than when we started, but it needs to be much smaller.
