Is Your Image Web-Ready?

Our goal, when placing images on a web page, is to make the file as small as possible without compromising image quality. In this article, we will go through the steps to make your image web-ready using the web-savvy features inside Photoshop.

It is tempting to just save the file as a jpg or gif using the File/Save As option inside Photoshop and call the image web-ready. However, if we do it this way, we miss taking advantage of the image-shrinking tools found only inside Photoshop’s “Save for Web” dialog box. These features let us fine-tune the saving of the image, resulting in even a smaller file size without compromising image quality.

Before discussing the steps to saving an image for the web, let’s look at the two most commonly-used formats: JPEG and GIF. JPEG allows for a broader range of colors, whereas GIF is best used for solid color and repetitive color images. I use JPEG for photographs and GIFS for line art, logos, and some illustrations. I may also use the PNG format if I need a high quality image and saving it as a JPEG with the desired quality results in a file that is too large. (ie. takes too long to download)

Let’s go through the steps to make your image web-ready.

Set Resolution and Image Size
Before saving the file, I always set the resolution to 72 (standard resolution for monitors) and I set the size of the image to the size I want the image to be on the web page. Both of these options are set within the Image Size dialog box. Select Image > Image Size.

Image Size Dialog Box

Save For Web and Devices
The Save for Web and Devices feature within the File menu of Photoshop allows us to fine-tune the saving process to give us the best possible file size. This option also lets us visually compare various settings before saving the file.

After selecting File > Save for Web and Devices, the following dialog box comes up:

Save for Web and Devices Dialog Box

In this window, select the 4-up tab at the top of the window. This gives us 3 different visuals of the image (in addition to the original) at different settings. Let’s take a closer look at this dialog box.

At the top left of the screen are the tools. The only tool I may use is the zoom tool. It works the same as the zoom tool in Photoshop. The center panel presents visual representations of the image at various settings. The right panel is where we set various options for one of the images in the center panel. The blue bounding box around one of the images is the selected image.

Before making any changes I look at the file info under each image.

Image Information

This info tells me the file format (JPEG), the size of the file, and how long it will take to download at a specific speed. (Right click the speed info to select a different download speed.) We are most interested in the size of the file.

To the right of this info is the ‘quality’ parameter – the lower the quality, the higher the compression. As the quality decreases, the visual representation also decreases. We may lose detail. Or, the image may begin to look fuzzy. Our goal is to use the lowest quality image without compromising the visual representation of the image.

Setting File Format and Quality

Right Panel Adjustments

The file format (JPEG, GIF, etc.) and the quality can be changed at the top of the right panel. There are other parameters as well, but we will focus on these two. In the center panel, select the image that is closest to the desired file size and is still retains its visual integrity. This makes it the active image. Any changes we do in the right panel, will be applied to this image.

Click on the right arrow in the Quality field to open the quality slider. Bring down the quality till it is the smallest file size possible and the desired quality is still intact. If you want to visually compare various options side by side, make similar adjustments to the other two images.

When the image is at the smallest file size possible with the desired visual integrity, select the image to make it the active image and click on Save. This opens the Save Optimized dialog box. Navigate to where you want to save the file. Verify that the Save As Type option is set to Images Only. Click Save.

Save Images Only

After the file is saved, the image is ready to be used on your web page. You can be assured that you have the smallest file size, without compromising the image quality. Your image is now web-ready.