Optimizing Images for the Web

With the proliferation of content management systems that allow users to build or edit their own websites, it has become important to understand how to optimize images for display in web pages. Have you ever browsed to a web page with pictures on it and then sat waiting while the pictures s-l-o-w-l-y fill in, even though you have a high-speed connection? Or did you ever see an image that loads quickly, but is very fuzzy and lacking in detail, maybe showing large patches of the same color rather than a smooth transition from one color to the next? Another thing I see all too often on the web are photographs that are clearly distorted–the subjects are either too tall and narrow or too short and wide. All of these are examples of images that have not been optimized for the web.

Target Audience

This article is intended for anyone who occasionally needs to update web content, as well as anyone who is interested in the subject. I’ve tried to keep the technical jargon to a minimum, but the subject requires some basic concepts that you will just have to suffer through. It does not assume any knowledge of HTML or programming; however, any of these, plus knowledge of basic arithmetic is helpful. Familiarity with digital photography and the use of an image processing program such as Photoshop, Photoshop Elements or ACDSee would be very helpful. You might also want to check out Picasa.

If you suffer through this entire thing, it is my hope that this will help you get a good start optimizing images so that your pages display optimally for your viewers.

Why is this even a problem?

Like the rest of the electronics field, digital cameras have come a long way. I bought my first digital camera in 1998. It cost me about $300 and produced an image size of 640×480 pixels–about 1/3 of a megabyte. Not very good for producing prints, but actually quite adequate for web images. Now it’s common to find a consumer-grade digital camera that produces 10 megapixel images for about $150. These cameras can now produce decent-sized prints up to 8×10 or so, but they are overkill for web images. So we’re seeing more and more images being uploaded to the web that are more appropriate for printing.

Definitions

First, some definitions. Digital images are made up of pixels. A pixel is a single dot of color, and an image is made up of thousands or even millions of them, arranged in a rectangular grid. For example, an image might be 2400 pixels wide by 3000 pixels tall, or 2400×3000. Multiplying these dimensions together gives us a total image size of 7.2 megapixels.

Aspect ratio is the ratio of the width of an image to the height. A 4×5 image has an aspect ratio of 4:5. An 8×10 image has an aspect ratio of 8:10.

What is this, a math class?

If you remember your middle school math (bear with me for just a bit), these ratios are just another way of expressing a fraction, so the equivalent fractions are 4/5 or 8/10 respectively. Again remembering math class, we know that we can always reduce a fraction by dividing the top and bottom numbers of a fraction by the greatest common divisor (GCD), which is the greatest number that evenly divides both numbers. In the case of 4/5, the GCD is 1 which gives us the same value again. In the case of 8/10, the GCD is 2. Dividing both the top and bottom of 8/10 by 2 results in 4/5. All of this is to say that a 4×5 image and an 8×10 image have the same aspect ratio.

Aspect ratio is important because by not preserving the aspect ratio, an image gets distorted. We’ve all been to an amusement park and seen those fun house mirrors that make you look like either tall and thin or short and chubby. You get pretty much the same effect when you change the aspect ratio of an image. Have you ever seen an image gallery that shows images like that? Some badly designed websites allow users to upload their own images, but do not pay attention to the aspect ratio and just force the picture to fill a rectangle of a given size.

The next term I’m going to define is resolution. This is a concept that causes a lot of confusion, because it means different things to different people. A capture device such as a digital camera might have a spec defined as resolution, such as 3 megapixels or 2048×1536 resolution. Strictly speaking, this is not resolution; it is image size. True resolution is a measure of the number of pixels per unit of length, such as pixels per inch or pixels per centimeter. By this definition, a capture device does not specify resolution (actually it can, but that’s really a measure of the minimum feature size that can be captured by the device, which is outside of the scope of this article). Normally, a display device has resolution. For example, most computer flat screen displays have a fixed resolution of about 100 pixels per inch. Older CRT monitors actually have variable resolution. A typical professionally produced photographic print has a resolution of about 300 pixels per inch. A laser printer might have a resolution of 300-1200 pixels per inch.

Here’s where the math comes in. Suppose you want to display your portrait on your web page. The computer screen has a resolution of 100 pixels per inch, and you want that image to show up on the screen at 4×5 inches. You require an image that is 4×5 inches times 100 pixels per inch, or 400×500 pixels. Suppose your professional photographer provided you with an 8×10 image file intended for printing. As I said above, printing requires 300 pixels for inch, so 8×10 times 300 pixels comes to 2400×3000 pixels. At the native resolution of 100 pixels/inch, though, the image would try to display at 24×30 inches. You can certainly use that file on your site–HTML lets you specify the size at which the image is displayed on the page, but the page will load very slowly and will consume much more bandwidth than you need.

I previously defined image size. Again, image size is the size of the image in pixels, either as a pair of numbers (400×500) or their product (200000). To further confuse matters, let us introduce the concepts of file size and image compression. File size is the number of bytes (or kilobytes or megabytes) that a file takes up either on your computer’s hard drive or on the web server’s hard drive. In the absence of compression, image files get very big very quickly. It takes 3 bytes to define each pixel in an image (8 bits each of red, green and blue), so a (relatively small) 200000 pixel image takes up 600 kB (kilobytes). Our 8×10 print image would be 2400 x 3000 x 3 = 21,600,000 bytes—almost 22 megabytes. Even on a 12 megabit per second broadband connection, that file would take at least 15 seconds to download on a good day. Not something you’d want to put on your web page!

Image compression is a way to reduce the file size of an image (in bytes) without reducing the image size (in pixels). Without getting into detail, this is done by performing certain mathematical operations (algorithms) on the image. There are two basic types of compression: lossless and lossy. Lossless compression, as its name implies, is a means to reduce an image file size without losing any information. The algorithms involved are completely reversible, so you never lose anything from the original image. An example of lossless compression is a zip file. Ever put a Word document into a zip file? What you get out of it is exactly what you put in.

Lossy compression is a type of compression that is not completely reversible. As the name implies, some amount of detail in the image gets lost and can’t be retrieved. The algorithms involved are much more complex. They actually examine areas of the image and decide where it can take things out that the viewer won’t miss. Lossy compression is obviously something you can’t do with text files. It wouldn’t be much help if when you unzipped the Word file containing your resume, random words were missing from it. So why would anyone want to use it? Because the resulting file size is much smaller, depending on the degree of compression. As an example, the hypothetical 400×500 pixel image I mentioned earlier has an uncompressed size of 600 kB. Typical lossless compression might give us 300 kB, or a 50% reduction in file size. JPEG compression, as demonstrated in some real-world samples below, can get us anywhere from 75% to 98% reduction in file size, depending on how much quality we’re willing to sacrifice.

Image Size

You will need some kind of image processing program in order to optimize your images. I mentioned a number of them above. Each has its own set of features, some more than others, but they all should perform the same basic tasks: cropping and resizing images and saving them with variable amounts of compression. They should all work with the JPEG image file format, which is the common format produced by all nearly digital cameras, and is also used by the web for photographic quality images.

Image File formats

Images come in many different file formats. Some are proprietary, supported only by the program that uses them, and others are standards, supported by many programs. Web browsers support only a few image file formats. The most common format used for photographic-quality images is JPEG. The JPEG format is useful for photographic images because it allows for the simultaneous display of millions of colors, and because it also provides a high degree of image compression. JPEG also gives us the ability to choose how much image compression to use, in exchange for image quality. For example, Photoshop’s Save For Web tool allows you to save a file on a scale from 0 to 100, with 100 being the highest quality, and 0 being the smallest file size.

There are other file formats supported by the Web as well. GIF and PNG are two other formats supported by all Web browsers, but as this article is primarily concerned with photographic images, we won’t discuss them here.

Save For Web (Photoshop)

Here is a detail of the Save For Web dialog box. You can either use the pulldown on the left to select quality (Maximum-Low), or fine-tune it by selecting the Quality pulldown on the right.

ACDSee JPEG Options dialog

Here is the equivalent function, as seen in the image organizer program ACDSee Pro from ACD Systems. Just move the slider control between Best compression and Best quality.

Look at the images below. They are from the same original file, all processed by Photoshop Save For Web, at different quality levels. The first image has been saved at the highest setting of 100. The file size is 135 kilobytes. The second image has been saved at 60 quality and has a file size of 40 kB. Still pretty good image quality with no blatant JPEG artifacts. The third image is at 30 quality, file size 19 kB and is starting to show some degradation. By the time we get to the fourth image, 10 quality and file size 12 kB, we see some very obvious JPEG artifacts all around. As a practical matter, I’ve saved more than two-thirds of the file size going from 100 to 60, with no appreciable loss of quality, but only another one-sixth of the file size going to 30, with a big drop in quality. As a professional photographer advertising my work, I might be inclined to go with one of the first two, but I would not use either of the last two images. The thing to remember is that the degree of compression as well as the perceived loss of quality is highly dependent on the image content, so your mileage may vary. The point is to experiment and see what you get.

Maximum quality (100), 135 kB

High quality, (60), 40 kB

Medium quality (30), 19 kB

Low quality (10), 12 kB

What did we learn today?

I hope that this article has helped you gain an understanding of the basics of image optimization for the web, particularly the tradeoffs involved. For image compression, there’s no right answer that fits all applications. I’ve shown you how you can reduce the size and therefore bandwidth requirements of your image files while still displaying a high quality image. If you expect your website to receive a huge amount of of traffic, then it behooves you to squeeze every bit of performance out of those pages, and image optimization plays a major part of that, in addition to good web design practices overall. You may want to err more towards the high compression end of the scale and sacrifice a small amount of quality. If, on the other hand, you are in the visual arts field or otherwise need to display the sharpest, highest quality image possible, then you need to bite the bullet and scale your compression more towards the higher quality end. Regardless of where you are on the compression scale, there is no excuse whatsoever for displaying distorted, “funhouse” images. That can be handled by appropriately cropping the picture.