How do I Prepare Images for the Web?

Photoshop provides a multitude of controls and settings and options for preparing images for the web.

Before you start, however, realize that in the world of the CS2 applications, the world is mostly broadband, and bandwidth limitation regarding compression of images is slowly becoming a thing of the past. With that said, there's still a noticeable difference in the time it takes to load a page with “uncompressed” images compared to dramatically compressed images. This is the surefire, always-work method.

Click to enlarge

STEP 1 Open the Image

In Photoshop, open the image you want to use and choose File > Save for Web. The image will appear in the Save for Web dialog box with the compression that was used last in the dialog box, as shown in the Figure above.

STEP 2 Choose the File Format

If necessary, choose JPEG. (There are few benefits to GIF and PING that aren't outweighed by the universal acceptance of JPEG files in web software.)

STEP 3 Adjusting the Size

Note that the size you're seeing the image is the size it will appear on the web page. Sometimes, especially with digital cameras, images can appear quite large in the Save for Web dialog box. If you want to change the size of the image, click the Image Size tab, shown in the Image Above's. If you want to change the image size, enter a different number in the Width or Height fields (the other field will update automatically) and click the Apply button. The image will be displayed at the new size.

Click to enlarge

STEP 4 Comparing the Original to the Compressed Version

To compare the current "compressed" image with the original, click the 2-Up tab at the top of the dialog box. This will allow you to see the original image compared to the compressed image. The compression in the figure above is set to JPEG Low so that you can easily tell the difference between the original and the compressed image. Depending on the image, high levels of compression might not make much of a visible difference.

STEP 5 Save the Image

Once you're happy with the compression settings, click the Save button.

STEP 6 Save Optimized As

In the Save Optimized As dialog box, set the location and the name. Be sure the file ends with .jpg if you've chosen jpeg as the file type.

When you save the original Photoshop file, it remembers the settings, location and name of the Save for Web file you've saved, so if you update the file, you can hop into Save for Web and click Save to quickly update your web-ready image.

Courtesy of Layers magazine.