Part 4: Resizing and Reducing File Size
I think this causes more anxiety and frustration than any other aspect of dealing with digital images and posting them on the web. At issue is the file size, which relates directly to the quantity of numerical information that must be stored on a hard drive, or transmitted when the image is uploaded or downloaded.
When an image comes from the camera, it’s file is likely to be several megabytes, which is a very large file and which is way larger than what’s needed for reproduction on a computer screen. By resizing the image and reducing the quantity of data associated with it, less storage space is required and transmit times are shortened.
(Did you ever stop to think that when you upload an image, it has to go somewhere? It winds up on a hard drive in a place far away, and takes up space on that hard drive.)
Turning forums usually have a limit on the file size they allow.
Two limits I’m aware of are 100 and 200 KB. If you post an image that exceeds this limit, you are likely to get a polite reminder from an administrator, and if you accidentally do it again, the reminder may be less polite.
Photoshop Elements makes resizing easy and lets you see precisely what the resulting file size is. You control the entire process. But before we get into the mechanics of doing it, let’s establish a few details and definitions.
What is a pixel? A pixel is a “picture element.” A digital image is broken down into thousands or millions of “dots,” and the information for each dot, or pixel, is stored in the file for that image.
Pixel dimensions. This is the width and height of the image in terms of pixels. A typical image size for web posting is 800 x 600. That is, the image is 800 pixels wide and 600 pixels high. For posting and viewing on a computer screen, the pixel dimensions are all you need to worry about as far as the size of the image is concerned.
Resolution. This relates to printing an image on paper. The resolution specifies how many pixels will be used to print a line one inch long and one pixel wide. It is given as “dots per inch,” or dpi, and it is generally accepted that either 200 or 300 dpi is required. For posting to the web, you don’t have to worry about the resolution; only the pixel dimensions matter.
Compression. This refers to some digital trickery that reduces the amount of data (and file size) required to store the image. The most common type of compression is JPEG, which stands for something. An image stored in this format is given the .jpg extension.
The basic idea behind JPEG compression is that the pixel information is not stored for each individual pixel. Instead, the pixels are grouped into blocks, 8 pixels on a side. The data for the pixels in the block is then transformed mathematically in a scheme that allows the fine detail to be included, or not included, in varying amounts. By not including fine detail, less data must be stored, and this results in a smaller file size.
The amount of compression relates directly to the amount of fine detail (and space-
For this reason, we should use only the amount of compression required to reduce the file size to a level below the maximum allowed. This ensures that no more detail is lost than is absolutely necessary.
Resizing with Photoshop Elements
Elements does the resizing in two steps. First, you set the pixel dimensions of the final image, the one you get after resizing, such as 800 x 600.
The next step is to Save the resized image. It is during this Save operation that the compression (discarding the fine detail) actually occurs. If you Save the image with a new file name, the original remains unchanged. If you use the same file name, the original is replaced by the new resized and compressed file, and the original is then gone forever.
You determine the amount of compression that will be applied and how much fine detail
will be thrown away. This is done during the Save operation by selecting a certain
level of Quality, represented by whole numbers from 0 to 12. A higher Quality number
gives less compression and minimizes the loss of detail, leading to a higher-
As you change the Quality number, the file size that will result from the impending compression is displayed. Therefore, if you are resizing to get the file size down below a certain level (like 200 KB), all you have to do is select progressively lower Quality numbers until the file size falls below the target level. When that happens, click OK, and the file will be compressed and then saved.
The details, first step. To resize an image, open it in the editing window. Then, at the top of the screen, click on Image. A menu will drop down. Click on Resize. In the flyout menu, click on Image Size.
A dialog box will appear as shown at right. At the top are the pixel dimensions
of the image. In the middle are the dimensions th
at a printed copy would have, but
that is of no concern to us. However, down at the bottom, notice that the boxes
are checked beside “Constrain Proportions” and “Resample Image.”
Checking “Constrain Proportions” ensures that the ratio of width to height will not
be changed during the resizing operation. Checking “Resample Image” gives Elements
permission to re-
If we anticipate posting to the web, which we do, it is customary to specify a new set of pixel dimensions that will fit into a rectangle of pixels 800 wide and 600 tall. So, type in the number 800 for the new width. Note that since the “Constrain Proportions” box is checked, the height is filled in automatically.
After the new pixel dimensions are specified, click OK. The d
ialog box will disappear
and the image on the screen may shrink noticably. The image has now been converted
to the new pixel dimensions, but it has not yet been compressed. That will happen
during the Save operation.
Details, second step. The next thing is to save the resized image under a new name so that the original is preserved. Up at the top left of the screen, click on File, and then “Save As.”
A dialog box will appear that lets you give the image a new name. What I typically do is add the letters Sml to the existing name. For example, if the name of the original file is Rambo24, I will change it to Rambo24Sml to let me know that this image is a version of Rambo24 having a smaller file size.
After you have typed in the new name, click Save.
We’re not done yet. A new dialog box will appear that deals with the amount of compression we want to be applied and the file size that will result. This is the important step; it’s the punch line, so to speak, and it’s where Photoshop Elements really shines.
With your mouse, drag the slider left or right. You will see the quality number change, and to the right, you will see the file size that corresponds to the quality number shown. Remember, a higher number means less compression and more detail preserved in your image.
The dialog box with a Quality number of 10 is shown at right. The corresponding
file size is 162.3 KB, which is just about one-
The file size corresponding to a Quality number of 5 is 62.7 KB.
After you find a quality number that brings the file size down to a level you can accept for your application, click on OK, and you will be done. The compression will be performed and the file saved under the name you specified earlier.
OK, now ... I’ll bet, if you have just read through this for the first time, you cannot remember all the steps and you are under the impression that it’s quite complicated. Rest easy. I promise that once you have done it a time or two, you will be able to do the whole thing in 30 seconds or less and it will seem simple as pie. And who doesn’t like pie?
But the best part is that after you have resized an image, you will know exactly what the file size is, and that means you no longer have to fear the forum administrators. And that’s a good thing.
Now, because you can’t remember the steps, here they are again, without any explanation:
To resize an image:
1. Open the image in the editor. Image > Resize > Image Size A dialog box opens.
2. Make sure “Constrain Proportions” and “Resample Image” are checked.
3. Type in the new pixel dimensions. Click OK The dialog box disappears.
4. File >Save As Type a name for the resized image in the new dialog box. Save
5. In the new dialog box, drag the slider to set the quality number. When the file size is acceptable, click OK.
