Compressing Images for the Web - JPEG Compression


January 28, 2000 - This first article of our weekly series covers a topic important to all of you who either wish to build your web site or give your site a face lift — how to compress images in order to get the best quality to file size ratio.

Now, I know that you are all artists and designers and quality is THE most important element of your electronic work. What it is necessary to realize, however, is the fact that that beautiful, full resolution, 30 MB file will NEVER download before the viewer (potentially an employer) gets fed up and leaves. In fact, no viewer will wait for a 1MB file to download, and if they are really picky and web savvy, even 400K is too large for some things. So, what needs to happen is compression of the file down to a manageable size.

You want to get a final size that will still look great and download fast. This is what will impress potential employers — a consideration for their time.

Let’s look at a few comparisons. I have an original file meant to be printed in color at 300 dpi. The printed dimensions are 6.943 inches square, 2083 x 2083 pixels square screen size. The file size is 13 MB. Yikes! This image has to be optimized.

Make sure that the file is still a Photoshop file, with all layers flattened. The first thing we can do to pare down the file size is to reduce the resolution. Screen resolution is pretty much limited to 72 dpi (dots per inch). Right away, we can change our image from 300 dpi to 72 dpi. This takes our screen dimensions down to 500 x 500 from 2083 x 2083. Quite a jump. The biggest jump, however, is in the file size. The file went from being 13MB to 880K! Major difference there, but still too large to download comfortably. Now we need to start actually compressing the file.

Since we are working with a photographic quality image, we will want to use JPEG compression. This is a compression scheme created specifically for photographs, so we should get the best quality to size ratio.

Let’s compress this file. First of all, we want to be sure that we always start from our original Photoshop file. Resaving a JPEG at a different size or compression will tear it apart and make the quality extremely poor. We will want to save the file as a JPEG (Photoshop FILE> Save as…). Let’s enter a value of 10 in the level of compression dialog box. We end up with a file size of about 204K. Pretty good for regular use, but that’s still over a minute in download time on a mid-range modem. Let’s take that level down to 6, medium compression. We take down the size to 108K. Now we’re looking at a download of about half a minute. Definitely getting close! Nice quality and decent file size. Click each clip to see the file at full size.

Level 10 - 204K	Level 6 - 108K

Not much difference in quality. Both images look pretty good.

Let’s look at even lower compression levels. A level 3 compression will take the size down to 80K and a 19 second download, and level 1 will take it down even further, to 60K and a 13 second download.

Level 3 - 80K	Level 1 - 60K

Looking at the size savings, you might be tempted to go for the lowest setting possible. And you can, to a certain extent. However, you can really see the difference in quality now between the level 3 and level 1 and a huge difference between a level 6 and a level 1. The level 1 is simply a poor image with "Artifact" problems (Artifacts are the "Cruddies" that start to appear in images as they are compressed). It will be up to you to decide on the best quality. Level 3 and level 1 compressions are probably not going to produce artist’s quality images for online portfolios, although, if you are limited in web space and you have many images, you may have to sacrifice a little quality.

Here are a few parting tips regarding compressed files.

1. Never resize an image that is already a jpeg or gif. Always resize or recompress the original Photoshop document. You will get far better quality images and better compression by starting with a clean copy every time.

2. Try to keep the screen size at a decent size. You don’t want potential employers having to scroll to see your entire image. Not only is this annoying, the image will loose impact by not being viewable on a single screen.

These few tips should help you on the road to getting your images ready for the Web.

Next week: When to Use the GIF file format and why.

Jennifer Nieland is the lab coordinator for the College of the Design student computer labs.