One the most important considerations when designing a web site is when working with images. According to some studies, you have only ten seconds for your web page to load, otherwise you risk losing your audience. And if you use images, it’s really important to know how to use them, so they load quickly. As mentioned in a previous article, there are several main image formats for the Web. These are: JPEG, GIF, PNG and PNG-8. Of these, I recommend JPEG, GIF and PNG-8. I don’t recommend the use of the normal PNG version because it can bloat your file sizes by five to ten times.
In this article, we’re going to look at compression of the JPEG format. In a future article, we’ll look at GIF and PNG-8 compression. Our program of choice is Paintshop Photo Pro X3.
To recap what I wrote earlier, JPEG is the format you would use for color and grayscale images, GIF and PNG-8 are best for line drawings, text, etc. The goal of working with all of these formats is to compress your images so that they load quickly, without sacrificing quality.
JPEG
We’re going to work with compressing this image. First off, there are a few ways to compress the image in this application. One is to use File: Save As, or Export: JPEG Optimizer. Both methods will take to you to the JPEG Optimizer, though the second option is the more direct route.
In the JPEG Optimizer you have access to a number of compression tools. We’ll get into those in a minute. For now, I want to draw your attention to the Wizard button at the bottom of this dialog box.
This is a great option for users who aren’t familiar with image compression. It guides you through a simple 3 step process for compressing images. I recommend leaving the settings at the default, especially on page two, regarding Chroma sub sampling.
If you want more control than what the Wizard offers, it’s time to explore the JPEG Optimizer. I’ve chosen this image of coffee beans because it will show you what will happen if you take compression too far. As a starting point, I’ve reduced the image to 600×400 pixels. Halfway down the page in this dialog box, you’ll see three tabs, covering quality, format and download times. Of these, I’m only going to focus on quality and download times. For format, I’m going to leave that at the default setting, which is standard. Under the quality tab, you’ll notice a pop-up for chroma settings. Leave that in the default position. Right above that, you’ll see that the default compression setting is 20%. And if you look at the data right above the tabs, you’ll see that the uncompressed file size is 705 KB and the compressed size is 82.17 KB.
Note that I’ve also zoomed in to 150 on the image. The reason is so you can get a better visual of what happens to the image at higher levels of compression and what happens when you take compression too far. Note that compression is subjective and will vary from image to image. The more complexity that an image has, such as textures, the less it will compress. In contrast, images with large areas of a similar color, such as a blue sky will compress more.
Since we began with a compression setting of 20%, we’ll double that compression (to 40%) and see what happens to the image. The resulting file size is much smaller, at 34.49 KB, but when you look at the image, you can see that the quality is starting to suffer. The color starting to wash out, the image is starting to fall apart and the edges are beginning to degrade.
Now, we’ll take it one step further. We’ll increase the compression to 70%. Note what happens. The file size is much smaller, only 17.68 KB, but that comes at a price. Note how much the image has degraded. Colors have started to clump together, edge definition has degraded considerably and overall, the image appears blurred.
Conclusion
This article gives you an overview of JPEG compression and what can happen if you go too far. Fortunately, there are other options for compression which will give you a smaller file size, such as reducing the dimensions of the image. This way you can reduce the amount of compression and still achieve a smaller file size without sacrificing quality.
Still, there will be some situations where you need a large image on screen. If that’s the case, the solution is to use image slicing, where you break the image into sections. These load in pieces and let the user know that more is coming. We will explore this in another tutorial. Also, in the next tutorial, we look at GIF and PNG-8 compression.
