Expert Optimization: Five Tips for Optimizing JPEGs in Photoshop CS2
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Optimizing images for the Web is an art and a science. As a Web designer, it's your job to create the best-looking images with the smallest file size. Over the next five articles, I'll show you my favorite tips for optimizing images for the Web.
There are only a few graphic file formats you can use on the Web. The two most popular are JPEG and GIF. In this article, we'll focus on the basics of JPEG optimization. In the next article, we'll get into the details of GIF optimization.
When you optimize images as JPEGs in Photoshop CS2, it's important to understand what you can do to make the smallest possible files. Here's an overview:
- Start with the right type of image. JPEG stands for Joint
Photographic Experts Group. The JPEG compression algorithm is designed for
optimizing and compressing continuous-tone images, such as photographs or images
with gradients or glows. The JPEG file format looks for areas with low contrast,
subtle variations in color, and slight tonal shifts. It doesn't compress
areas of solid color effectively and, as a result, doesn't work well for
flat, graphic-style artwork.
Figure 1 and Figure 2 show two images that are best suited to JPEG optimization because they contain photographic content. Although Figure 1 appears to have some areas of the same color, there are slight variations in the tonal range, which makes it better suited to the JPEG file format, rather than the GIF file format.
- Increase JPEG compression. The more you compress a JPEG,
the smaller the file size. Unfortunately, adding too much JPEG compression can
cause unwanted compression artifacts. The trick is to find the balance between
making the file small and making it look good. Here's how:
- Add blur. The softer the edges, the smaller the file. Because the JPEG compression algorithm has an easier time when compressing areas with subtle transitions in colors and tonal range, adding a small amount of blur to your images can help reduce file size.
- Decrease the saturation. The less color saturation, the smaller the file size. Again, because compression is easiest with subtle changes in colors and tonal range, decreasing the saturation in images can help reduce file size.
- Decrease the contrast. The lower the contrast, the smaller the file size. The JPEG compression algorithm favors low-contrast images. Decreasing the contrast in an image can help reduce file size.
)
)
Now that you have an idea of what helps make small JPEGs, it's time to put theory to practice and learn how to optimize a JPEG in Photoshop CS2.
- Open a photograph or continuous-tone image in Photoshop CS2. Figure 3 shows a photograph with a close-up of a salad and a candle. This photograph will pose a few issues because of the stark contrasts in color and tonal range between the candle and the salad.
- Choose File > Save For Web to open the Save For Web dialog box.
- Choose JPEG from the Optimized File Format pop-up menu. Click the 4-Up tab
so you can see a preview of the original image and three optimized
previews.
Starting with the 4-Up tab is useful because it lets you compare three optimized previews, each with different JPEG compression settings, to determine the best starting point for the JPEG compression setting.
- Take a look at the previews and quality setting for each of the three
optimized previews (see Figure 4). The quality setting, which is controlled by
the Quality slider in the Save For Web dialog box, reflects the amount of JPEG
compression. The higher the quality, the lower the JPEG compression. The lower
the value, the higher the JPEG compression.
Select the Zoom tool from the Save For Web Toolbox and click one of the previews to zoom in on the candle. If necessary, select the Hand tool and click-and-drag to reposition the preview.
- Take a look at the size and quality of each preview. Notice that the preview with the quality setting of 60 looks almost identical to the original but the file size is 47.65KB (see Figure 5). The preview with the quality setting of 15 has a small file size of only 16.15KB, but there are nasty JPEG compression artifacts around the candle. The preview with the quality setting of 30 has a few artifacts, but also has a reasonable file size of 23.02KB. Based on this information, the preview with the quality setting of 30 is the best starting point for optimizing this image.
- Click the preview with the quality setting of 30 to select it and then click the 2-Up tab.
Now that you have a good starting point, you can focus on the optimization settings for that one preview. Switching to the 2-Up view gives you a larger preview of the image you're optimizing while still having a preview of the original for comparison.
- Experiment with the Quality slider in the Save For Web dialog box. Although you know 30 is a good starting point, you may be able to increase or decrease the Quality setting slightly to produce an even better result. In Figure 6, increasing the Quality setting to 28 shaved 1KB from the file size (for a total of 22.12KB) but didn't negatively affect the quality of the image.
- Experiment with the Blur slider in the Save For Web dialog box. As you learned earlier in this tutorial, the JPEG compression algorithm prefers soft edges. Adding a little bit of blur can help decrease the file size slightly without compromising the image quality. As Figure 7 shows, increasing the Blur setting to .23 didn't affect the crisp edges in the image but decreased the file size by 1KB (for a total of 21.61KB). Although it may not seem like a huge savings, every little bit helps when you're optimizing Web graphics.
Although we've significantly decreased the file size from the original 70KB to 21.61KB, there are two other things you can do to make this file slightly smaller. As you learned earlier in this tutorial, decreasing the saturation and decreasing the contrast helps create smaller JPEGs. In the next few steps, you'll do just that.
- Click Done in the Save For Web dialog box. Clicking Done (instead of Cancel) causes Photoshop CS2 to remember the settings you specified in the Save For Web dialog box, so you don't have to start from scratch the next time you open the dialog box.
- In Photoshop CS2, choose Image > Adjustments > Hue/Saturation to open the Hue/Saturation dialog box. Decrease the Saturation setting slightly. The goal is to decrease the amount of saturation without negatively compromising the photograph. In Figure 8, decreasing the saturation to [ms]15 only slightly reduces the saturation but, as you will see, it will have a savings on file size when you optimize the image. Click OK to close the Hue/Saturation dialog box.
- Choose File > Save For Web. With the same optimization settings, you've reduced the file size by another 1KB (for a total of 20.8KB) without negatively affecting the quality of the image, as shown in Figure 9. Next you'll reduce the contrast.
- Click Done in the Save For Web dialog box.
- Choose Image > Adjustments > Brightness/Contrast. Decrease the Contrast setting slightly. As with decreasing saturation, the goal is to decrease the amount of contrast without negatively compromising the photograph. In Figure 10, decreasing the saturation to [ms]8 only slightly reduces the contrast but, as you will see, it will have a savings on file size when you optimize the image. Click OK to close the Brightness/Contrast dialog box.
- Choose File > Save For Web. With the same optimization settings, you've reduced the file size by another 1KB (for a total of 19.78KB) without negatively affecting the quality of the image. In fact, this optimized version is almost as small as the optimized preview image with the quality setting of 15. As Figure 11 shows, this image looks a lot better than that preview did because there are hardly any JPEG compression artifacts.
- Click Save to open the Save Optimized As dialog box. Specify a filename, choose a location where you want to save the optimized file, and click Save. When you save optimized images in Photoshop CS2, it saves a copy so you never have to worry about losing or altering the original image.
You're done! As you can see, there is more to creating small, high-quality, optimized JPEGs for the Web than just increasing the JPEG compression. By adjusting the blur, saturation, and contrast, you created a small file with minimal JPEG artifacts. Use these principles as you work with your own photographs. Next month you'll learn the basics of optimizing GIFs.
Page 1 of 1
)
)
)
)
)
)
)
)
)