Optimizing images for e-mail or the web

Have you ever sent or received an attachment that took a long time to download? Has anyone sent you an image that must measure twenty feet across, because an eyeball fills the entire screen? Everyone has experienced what it takes to attach an image to an e-mail and send it to someone. It may seem like an eternity watching the slowly moving progress bar creep from left to right—especially if you subscribe to a measured Internet service and you have a Stone Age modem. Upload/download times can also be affected by the amount of traffic on the phone line. For those of us with cable or DSL, speed is almost not an issue; however, when sending images we must consider our less fortunate friends on dial-ups for whom file size definitely matters! In the words of architect Ludwig Mies Van Der Rohe, "Less is More."

The January issue discussed monitor resolution to educate readers on how and why a monitor screen looks the way it does. This article will recap some of that information in the attempt to demonstrate the best way to optimize an image before attaching it to an e-mail or uploading it to a website. First, some terms. "Jpeg" is short for Joint Photographic Experts Group and refers to a lossy compression technique that can reduce an image up to 96%. Jpeg compression is used for images with fine gradations of color, such as photographs and airbrush art. Depending on how much compression is applied, an image can begin to deteriorate, acquiring "artifacts" and fuzzy outlines. The more compression, the smaller the file size and the poorer the image quality. A good web designer will pay special attention to finding that fine line between optimum file size and image quality. A lot of care should go into making images look as good as possible, yet keeping them small enough to download quickly. If you use AOL, you should deselect the preference that further compresses images for faster downloading. Compressing already-compressed images can really trash the quality that the web designer so carefully attained. You don't want that. In AOL, do this:

1. Go to MY AOL
2. PREFERENCES
3. WWW
4. Uncheck the box that says "Use compressed images."
5. Click OK.

"GIF" stands for Graphics Interchange Format and is a lossless type of compression, used mainly for graphics with areas of flat color and for photographs when printing CMYK; however, the CMYK color space uses only 256 colors and you may lose certain gradations of tone, resulting in a "stepped" effect. Used properly, GIF's can be stunning and their file sizes tiny. Figures 1 and 2 below are GIF's and weigh only 7k each. But because most people who read this article are not web designers and will be primarily interested in optimizing photographs for e-mail transit, we will deal only with jpegs (files are indicated by the extension ".jpg").

The first thing you must realize is that most monitors display at 72 dpi (dots per inch). A 600 dpi image will do you no good unless you need that resolution quality for printing, and even then it may be overkill (a topic for a future article). Take, for example, a 216 dpi image that measures 6" x 6" (I just chose that resolution because it's an even multiple, 3x72=216). 216 dpi means that there are 216 dots in every inch of that image and, for a 72 dpi monitor to display it, it would take an area 1296 pixels wide and tall to display that image (6 inches x 216=1296). That's 18 inches!

To take advantage of the tips in this article you must have Photoshop. Load the application, go to FILE>OPEN, and navigate to the image you want to work on. If it is already 72 dpi and measures not much more than 6-8 inches, then the next step would be to optimize it. [Note: you should not enlarge a 72 dpi image—it will pixellate. You can always shrink a 72 dpi image to whatever size you need and it will maintain its sharpness and clarity, to a point. Higher resolution images can be enlarged, depending on the original resolution.]

If the image needs resizing (either for linear dimension or for resolution) go to IMAGE>IMAGE SIZE (see fig.1). If the resolution needs changing, make it 72 dpi now. Be sure the CONSTRAIN PROPORTIONS box is selected, meaning that if you change the height measurement, the width will automatically adjust accordingly, and vice versa.


(Figure 1)

Next, type a size in either the Pixel Dimensions area or the Print Size area. For example, if you put a number in the Print Size Width box, the height will automatically adjust, as will both Pixel Dimensions. For websites and e-mail attachments, the size should be something that is easily accommodated by the average monitor. A maximum size of 6-8 inches was suggested earlier, but use your own judgment. Once you have your desired size, click OK. [Note: If, upon closing the Image Size window after making changes, your image does not look like the size you just told it to be, go to VIEW>PRINT SIZE and the image will adjust to its actual visual size. For example, when changing a 6-inch-wide 600 dpi image to 72 dpi, it will visually shrink to the size of a postage stamp until you make the view-it-at-print-size adjustment.]

To illustrate I will use an image of the new Academy Awards complex in Hollywood which I took recently with a Nikon Coolpix 990 digital camera, using the "fine" setting. Click on the thumbnail to see the original 72 dpi image, which measures 14.2" wide x 10.7" tall (or 1024 x 768 pixels), and originally weighed 296 kilobytes—until I optimized it to 150k with a little jpeg compression (but high quality). It should take a 56k modem about 28 seconds to download. TheScreamOnline is optimized for 1024 x 768 screen resolution, and if your monitor is set to that resolution, the image will fill the entire screen. The window is sized to open at 500x400 pixels to begin with, but a resize handle in the lower right corner will allow you to open it as large as you want, and you will need the scroll bars.

I then took that original image and changed the width to 6 inches (or 432 pixels—see fig.2). You can see the new dimensions below, with the new file size (411 kilobytes). The "was 2.25M" indication in parentheses is the size that the 14-inch version of this image would have been had it been saved as an actual Photoshop file, not a jpeg, and the same goes for the new size of 411k. This can be confusing, especially since the smaller 6-inch Photoshop file size is greater than the original large jpeg. But we're not finished yet. [Note: Encoded in a Photoshop file is its potential for resizing, adding layers, using filters and different color spaces, etc. That's why it's so big—you're paying for overhead!]


(Figure 2)


(Figure 3)

The above image now measures 6 inches (432 pixels) wide.

Photoshop version 5.5 and onward has a SAVE FOR WEB feature (FILE>SAVE FOR WEB—see fig.4). This is very useful to fine-tune your images. Once you have this window open you will see the original image in the upper left corner and 3 more versions, all at different resolutions (if not, check the 4-up option). On the right is where you choose JPEG or GIF. There is also PNG, or Portable Network Graphics, which is a lossless file format, but it's not a web standard yet. Remember: choose JPEG for photos and GIF for graphics. When choosing JPEG, you will see that you can select *low, medium, high, and maximum—close to what you do when you SAVE AS and choose JPEG as the format; however, here you can set up 3 different settings and compare which will best suit your needs. There is also a sliding bar to pinpoint the quality even further (it appears when you click on QUALITY). Again, the upper left window is the original, and it will say how big the file is. The upper right window and the lower two are your 3 jpeg choices. Clicking on any one of them will activate that window, and the resultant selections in the upper right controls will affect the chosen window. This process is very important to find that perfect file size/quality combination. You'll be amazed at how good an image can look and how small it can be compared to the original, if you do it right.

*These selections refer to quality, not the amount of jpeg compression. It's important to remember that "low" quality calls for a lot of compression, and "high" quality uses little.


(Figure 4)

The above image is a screen shot of the SAVE FOR WEB window. It measures 8 inches wide (576 pixels) and weighs 29k at a medium jpeg compression. Notice some jpeg artifacts around the buttons and in the photos—perfectly acceptable for our purposes. The upper right image with its settings was the eventual choice for optimizing fig.3 above. Notice in fig.4 that the original was 410k and our choice to the right is now 29.51k at a 60 quality (high) jpeg compression (one-tenth the original size of 296k). A file this size will take a 56k modem 6 seconds to upload or download. The lower left window shows the same image at a medium resolution (18.25k at 4 seconds), and the lower right uses a lot of compression for a low quality (12.96k at 3 seconds). Notice in each window the increased artifact distortion—somewhat hard to see at this size, but do it for yourself to see the real differences. Keep in mind that fig. 4 is not a true visual representation of the varying qualities, as it has been compressed at medium quality so it would not take too long to download on this page. In actuality, the original image and the fine setting would show no artifacts at all.

To recap:

With an image open in Photoshop,
1. Go to IMAGE, IMAGE SIZE.
2. Change dpi to 72.
3. Select CONSTRAIN PROPORTIONS.
4. Select desired width and height, click OK.
5. Go to FILE, SAVE FOR WEB.
6. Select JPEG and either MAXIMUM, HIGH, MEDIUM, or LOW.
7. Fine tune with sliding bar under QUALITY, click OK.
8. Name the file and choose where it is to be saved.

Every time you access a web page, your computer has to download the entire contents of that page—text, images (including rollover images), hidden layers, frames, and all behavior actions encoded in the page. You have to hope that the web designer did a good job optimizing the images so that you don't have to wait interminably to see all the contents of that page. All images and the text on this page add up to about ninety-four (94) kilobytes and should not take very long for a 56k modem to download (not counting the very large image of the Academy, which downloads separately—and only if you click the thumbnail).

Please take the time to learn how to implement these tips. With a little practice you can speed through the entire process quickly. Be inventive. If you have a lot of images to process, write a Quickey™ or macro to combine steps and automate the entire process with one key stroke.

One last item: Roland Gustafsson has written a wonderful plugin called GammaToggle FKEY for Mac users which allows one to toggle the monitor between Mac and PC settings. PC's have uncorrected gamma, which makes for a darker image on the monitor. Macs are brighter, so it's always a challenge for web designers to create a site that will look great on both platforms. Enter GammaToggle FKEY. In Roland's words:

I wrote GammaToggle to allow a Mac user to very easily toggle back and forth between the two standard gamma settings, allowing a simple way to see how graphics will look on both PC's & Macs. You can toggle the gamma from within any application (for example, Photoshop when you are editing pictures; Netscape or Internet Explorer when you are previewing and editing the HTML document). Toggling between the two settings allows you to make changes to strike a compromise.

If you have used color calibration software to adjust your monitor, or if you have set your monitor to anything other than standard gamma, the GammaToggle FKEY will toggle through all three settings (PC, Mac, custom). Please visit Roland's site to learn more about it at http://www.acts.org/roland/thanks.

©2002 Stuart Vail

Special thanks to John Kilgore for suggesting the topic.

TOP

Back to the main Tech Page