Image Compression
With the availability of broadband connections, the issue of image compression is getting some pooh-poohing. “Why bother?” Well, because not everyone has a broadband connection, and even a big pipe can get full, and slow down. Secondly, there is a thing called server load, which costs people money. Hey, bandwidth costs money. These considerations aside, with tools that make it pretty simple to compare and adjust different means and levels of compression, it is simply part of what you do when designing for the web.
General
The game is not to get the smallest image, but to get the smallest image with the amount of image quality that you need. The tendency is to use the best (highest quality) images, but it is important to keep in mind that by and large the web is a fairly low-resolution medium. There are so many variations in displays, added on to variations in graphics capabilities (ever changed from an ATI to an nVidia graphics card?), platform differences and personal adjustments that it is nearly impossible to predict just what your images will look like on a viewer’s machine.
This does not absolve you from taking time to get images right.
A lot of images simply need to cover a certain area. There is no getting around this. But for many, the area can be adjusted. It doesn’t make sense to present images of artwork, say, at 800 pixels wide by 1000 pixels high. This means the viewer has to scroll to see the entire image, making for a somewhat disjointed experience. 400-500 pixels on the longest side will do, and the file size will be reduced by a factor of 5 or so (250 vs. 55K). So think about how big things need to be.
The first decision is the type of image: is it more flat color or continuous tone? As said elsewhere, generally one uses JPEG for continuous and PNG or gif for flat color.
Next, is how much (or little) image quality you need. This is where applications like Adobe’s ImageReady and Macromedia’s Fireworks come into play. Both are designed specifically to do imaging for the web. One of the best features of both is the ability to view an original image and it’s compressed version side-by-side. Both apps will do a two-up, with the original and one compression scheme, and a four-up, with the original and three different compressions. This really helps to fine-tune compression.
Particular
There is no magic bullet here. Image compression simply takes a bit of time. There are, however, some general guides and things to look for. The descriptions following make use of Adobe’s Photoshop and ImageReady, but the ideas are adaptable to whatever.
Correct & Resize
I do my resizing in Photoshop. It just seems to handle larger files better. It may just be my imagination, or that ‘jump to’ button at the bottom of the toolbar, but I generally do all my resizing in Photoshop.
A better reason is that I also do all the image correction in Photoshop. Photoshop has better tools for doing this, whether it be cleaning up dust and scratches or subtle color correction. Working at a higher-than-web resolution and/or scale allows you to make more subtle changes. You simply have more pixels to play with. Consider the two images below:
The image on the left is at its original resolution, 300 ppi, and on the right, the image is at 72 ppi. The pixel size is the same in each image. The one on the left has more detail, giving you the ability to make more subtle corrections. Once you’ve made the corrections, go ahead and set the resolution to 72 ppi first (with resampling checked), and set the pixel size.
Compress
Now it’s time to do the compression. Photoshop has a button(?) at the bottom of the toolbar which ‘jumps to’ ImageReady, or opens the image in ImageReady. Hit it. Once there, there are several things to notice. The image window has some additions:
At the top of the window are four tabs: Original, Optimized, 2-Up and 4-Up. These are the different ways of viewing the image. Use the optimized view to see it compressed using the current method in the Optimize palette. 2-Up allows you to view the original alongside the optimized, or two different optimizations. 4-Up is similar, allowing the original and three optimizations, or four different optimizations. All of the optimization methods can be set in the Optimize palette.
At the bottom of an optimization window is the image information, including image format (file type), file size, approximate download time (at a selected transfer rate), and then particulars about the optimization on the right: dithering (mixing solid colors to make a third), type of reduction algorithm, and number of colors used.
All of the above affect file size and image quality, with the exception of download time. And, again with the exception of download time, all can be adjusted in the Optimize palette. Here is a brief description of each.
- Format
- Discussed before, this is the file format: GIF, JPEG, PNG. One amy give you better image quality/file size than another. There are two PNG settings: an 8-bit and a 24-bit. 24-bit PNG is used when you need continuous tone and transparency. It will produce much larger files than JPEG.
- File Size
- This is given is K, or Kilobytes. Along with the approximate download time, gives you an idea of just how large the file is. This is the number to watch as you optimize. A small difference in image area (length, height) or image quality can make a large difference in file size.
- Download Time
- A loose approximation, the download time is still good indication of compression.
- Dither
- Dither is how a limited palette of color is made to look less limited. Kind of digital pointillism, dithering uses solid pixels to make up continuous tone areas. Below, the first image is dithered, and the second is not. They are at 600% viewing enlargement, so you can see the pixels.
Different dithering–diffusion, pattern, and noise–produce different results, and differences in file size. Diffusion and noise are more random than pattern. There is also a no dither setting. If you are using GIF or PNG-8, try the different settings. - Algorithm
- This is the math used to do the compression, reducing the color palette while (attempting to) maintain image quality. There are several choices with GIF and PNG: perceptual (favoring colors the human eye is more sensitive to), selective (usually the best, using more web-safe color and favoring large color areas), adaptive (uses most common colors in an image, usually will compress most), and restrictive, or web-safe, limiting you to 216 ‘web-safe’ colors.
- Colors Used
- Literally the amount of colors used in a customized palette for the image. The more colors, the bigger the file, although color amount has less affect than image area. Some images simply require use of more colors as a GIF or PNG, while some can get away with surprisingly few.
- (Image) Quality
- Particular to JPEG, this is the setting for amount of compression. It will directly affect image quality. Try it and see, but most images look just fine at a setting of about 40 (out of 100), the low end of medium quality, with a dramatically smaller file size (20%?). Fine-tuning the image quality is where the 4-Up view comes in handy.
Save
The final step, after all this, is to save the image. There are two ways to save in ImageReady. The first is the standard Save As… This will give you a .psd, or Photoshop document. Not what you want for your web pages. Instead, choose Save Optimized As…, and save the optimized version to the directory on your site. This automatically adds the correct file extension (.jpg, .gif, or .png). If you see a file ending with .psd in a web directory, it was saved wrong and/or needs to be removed.
Furthermore…
As is becoming usual, this is not all to image compression. A few other considerations (trimming, fringe) will be looked at along with a rather special case: that of text as image (image as text?).
