Web Developer Class: How to Create Fast Loading JPEG Images for the Web
In this article, were going to look at compression of the JPEG format. In a future article, well 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
Were 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. Well 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 arent 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, its time to explore the JPEG Optimizer. Ive chosen this image of coffee beans because it will show you what will happen if you take compression too far. As a starting point, Ive reduced the image to 600x400 pixels. Halfway down the page in this dialog box, youll see three tabs, covering quality, format and download times. Of these, Im only going to focus on quality and download times. For format, Im going to leave that at the default setting, which is standard. Under the quality tab, youll notice a pop-up for chroma settings. Leave that in the default position. Right above that, youll see that the default compression setting is 20%. And if you look at the data right above the tabs, youll see that the uncompressed file size is 705 KB and the compressed size is 82.17 KB.
Note that Ive 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%, well 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, well take it one step further. Well 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.
ConclusionThis 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 thats 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.