Optimize your images to get the best web results

When an image is optimized for display on the web, the smallest file size to display an image with the highest quality possible is used. Pixels and colors are compressed to form an image that looks as good as the original, but at a fraction of the file size. This may involve many techniques, such as file type selection, color mapping, selective compression, ditheringthe options are vast in the world of Photoshop and can be confusing. Knowing how to approach optimization when preparing images for the web, therefore, is the key to getting images that look great and download quickly.

Get the most from your images

You've been handed two filesa JPEG image taken with a digital camera and a logo graphic saved as a TIFFand have been told to get these images on the web, pronto. However, both of these files are too large to be efficiently displayed in a web browser and, in the case of the TIFF, probably won't display at all. In this article, we'll show you how to approach this scenario using Photoshop's optimization tools.

Adjusting the JPEG file

Our JPEG file was taken using a 3.34 megapixel digital camera, which produced a great shot with plenty of image information. If we were printing this file, it would make a good 5 x 7 and a decent 8 x 10. However, the image information needed to print a high-quality image is mostly overkill when displaying an image on a computer monitor.

Resize the image dimensions

By default, monitors display images at 72 dpi, meaning our 8 MB JPEG file displays at about 27 inches by 20 inches. Few things are more annoying than having to use scroll bars to reveal an entire image or wait for a bloated file to download, so we need to resize this image to better fit on a web page.

1.	Open a JPEG file in Photoshop and select Image Image Size to open the Image Size dialog box, shown in Figure A.
2.	Change the Resolution setting from 360 pixels/inch to 72 pixels/inch, if necessary. If you look at the Pixel Dimensions value at the top of this dialog box, our file has dropped from 8.05 MB to 330 K. Now we're getting somewhere! Now that we've changed the resolution, we can check the width and height of the image.
3.	Use the dropdown lists next to the Width and Height settings in the Document Size panel to change the unit of measurement from inches to points, which are essentially the same as pixels. Keep in mind that 640 x 480 pixels is the largest you should make your image to be web-friendlyin inches, this translates to about 8 x 6 inches. Our example image fits within those parameters, but for our needs, the image doesn't have to be that big.
4.	Switch back to inches and change the width to 5 inches, a decent size for web viewing. Now our file is down to 280 K, and we haven't even compressed it yet.
5.	Click OK.

Note

After you resize your image, it will probably shrink down to a miniscule size on your screen. Don't worry because that isn't the size it's going to be on the web. While you change the image size, Photoshop keeps the same magnification level as the original image. To see the actual size of the image, select View Compress the image

With our image dimensions and resolution under control, we can make our compression selections.

1.	Select File Save For Web to open the expansive Save For Web dialog box, which is shown in Figure B.
2.	Click on the Preset dropdown list in the upper-right corner. Here, you can select the type of optimized file format you'd like to use. For a continuous tone image, sticking with JPEG is really the only way to go, so select JPEG High from the menu.

As shown in Figure C, there are a number of options to choose from when optimizing a JPEG. By selecting JPEG High, the options are filled with preset values. While these settings are a good start, it's best to fine-tune them to get the best possible quality. However, we're just going to concentrate on setting the Quality.

Figure C.

JPEGs can be compressed at variable levels, with 100% being the least compressed and 0% being the most compressed. As you decrease the Quality setting, you sacrifice image detail but create a smaller file. The trick is to find a good balance between file size and image quality. The best way to do so is to trust your eyes.

1.	Click on the Optimized tab in the Preview window of the Save For Web dialog box.
2.	Double-click on the Zoom tool found on the left in the dialog box to set the magnification level to 100%.

Note

When evaluating compression levels, always work at actual size to get the most accurate representation of your image.

Set the compression level

There are many techniques for testing compression levels, but here's one to start with.

1.	Change the Quality setting to 100 using the slider or the text field.
2.	Reduce the Quality value in 10% increments until you start to see the image quality degrade.
3.	Increase the value in 5% increments (or less) until you find a setting that looks good to you. For our image, we found 50% to be a good compression setting.

The Save For Web dialog box also includes a feature for viewing compression options side-by-side. Switch from the Optimized tab to the 4-up tab, as shown in Figure D. Now your image displays with four different compression options, making it even easier to pick a winner. If you find a compression setting you like, simply click on the image and the setting is applied.

Figure D.

Save the JPEG file

The last thing to do is save the file.

1.	Click Save in the Save For Web dialog box.
2.	Give your file a new name by entering it into the File Name text box (Save As text box on the Mac). Be careful not to overwrite your higher resolution file with this lower resolution version.
3.	Click Save and your image is ready for the web.

Working with the logo

Optimizing the logo file is going be a bit different, as we need to convert it to a better file format for the web. The best choice for illustrations, line art, or logos, such as ours with large areas of flat color and detailed lines, is the GIF format. GIFs compress images by limiting the number of colors that make up the image. The key to getting a good-looking GIF is to reduce the colors in the image without losing important image information.

As shown in Figure E, our logo file uses only a few colors and some text. Since the text characters are big and bold, converting to the GIF format will work fine. If you had smaller characters of more complex visual elements like shadows and gradients, you may need to use a JPEG to conserve the finer details.

Figure E.

Size it up

As with the JPEG file, the first step is to resize the image. Be careful when resizing artwork similar to our logo file, as the details can start to look "soft" when you resample the image.

1.	Select your new image size in the Image Size dialog box. For our example, we resized the image to 4 inches wide at 72 pixels/inch.
2.	Click OK.
3.	Select Filter Sharpen Sharpen if the edges of your logo are starting to look a little soft. This makes them look crisp again.
4.	Open the Save For Web dialog box, and select GIF 64 Dithered in the Preset dropdown list. Again, this dialog box has many complex options, as shown in Figure F. We only need to use a few of them for this example, but you can use these options to really squeeze an image down in a very technical manner. Figure F.
5.	Click on the Color Reduction Algorithm dropdown list and select Perceptual. You'll notice a whole bunch of other options here, including one labeled Web or Restrictive (Web). We didn't use that option because the web color palette is too limited and our logo colors would change. Since our logo contains organization colors that need to be accurate, the Perceptual option gives us true colors at only a slightly higher file size. It's a small price to pay!
6.	Set the Dither option to 0% in the Dither text box. This option tells Photoshop to mix colors from the available color palette to simulate unavailable colors. In our case, we only have three colors (black and two shades of blue), so dithering won't be necessary.
7.	Check the Colors setting, which should be set for 16. This is the number of colors in the palette, which are shown in the Color Table below the options. As you can see, there are colors in there we just don't need.
8.	Click on the Colors dropdown list and reduce the number of colors further. With fewer colors in our image, the file size drops down and the file can load more quickly. Check out the Preview window and you probably won't be able to tell the difference. However, if you drop the value to four colors you'll see the colors start to shift, as shown in Figure G. It isn't a terrible change, but on other images you can have a dramatic shift as you reduce colors. Figure G1. Figure G2.
9.	Click Save, give your GIF file a name in the Save Optimized As dialog box, and then click Save once more to finish the job.

Note

So, what if you've optimized an image for the web, but you need to use that image to make a print. Check out the Problem : Solution "Improve resampled images for print" at the end of this chapter.

Be wise, optimize

By evaluating the type of file you're working with and selecting an appropriate file format, optimizing your image files for the web can be easy. In this article, we compressed an 8.05 MB JPEG to 17 KB and a 7.56 MB TIFF to a 6 KB GIF, both huge savings in file space. This file reduction didn't degrade our image quality, as we used compression and image dimensions wisely to optimize the files to display the best on the web. The result is fast-loading images that look great and complement your web design, instead of detracting from it.