Tips for optimizing your web images

There are several image editing and manipulation tools, programs, and applications available for web and graphic designers, and you probably already have your favorite “prepare for publication” imaging tool in place. This will not be a discussion on the various editing tools themselves, but will concentrate on the best practices and techniques for optimizing your images and graphics on the web.
For a quick example before I get into the whys and hows for optimizing images on the web, take a look at the two images below, and without taking a peek at their properties, notice similarities and differences when comparing them to one another (click on images for full-size).

Figure A

Figure B

Figure A is saved as a .jpg image with a baseline standard format at maximum quality, and is 514KB in file size at 800px wide. At a dial-up 56.6Kbps Internet access speed it would take approximately 90 seconds for this image to be rendered fully on the browser screen. My apologies for those of you who are using dial-up for your Internet access.
Figure B is the same image saved as a .jpg, however, with the format set to progressive with 5 scans, and the quality set to low, and it comes in at just 59KB in file size at 800px wide. At dial-up 56.6Kbps speed this image, would take just about 8 seconds to render fully.

What differences do you notice with the two images? Colors, load times, quality, these are all factors to consider when optimizing your web images. I kept the image pixel sizes consistent for this comparison; however, to fully optimize this image, I could have reduced the pixel width and that would have reduced its web page load impact in addition to the other optimizing factors.

Why optimize web images?

What are the motivating factors that direct our attention to obtain the most favorable web images? Several reasons for optimizing your web images include: Bandwidth and throughput: We all know that bandwidth has been a buzzword for many years now, and getting your web documents to render as fast as possible in users’ browsers means keeping your graphic and image file size to a minimum. The challenge becomes maintaining a high quality graphic while keeping a lean file size; the balance of these two elements is key to optimizing your web images.
Data storage and space: While data storage space and servers become less expensive every year, it is still prudent to limit your image size. As sites grow they typically show a steady growth in the number of images. For example, a particular image directory for a sub-section of a Federal agency Intranet site that I maintain includes 18 sub-directories with 360 images, combining for a total 24MB of storage space, and for an average of 69KB per image, that is actually considered to be slightly on the heavy side for a typical optimized web image.
Reduced costs: Optimized images add up to less server and storage space requirements, less bandwidth and throughput requirements, and therefore reduced hosting costs, especially when using a third-party ISP or Internet network solution provider.
User experience: The visitor enjoys a better experience when page load times are minimal; nothing irritates the guest more than having to wait for image-heavy web documents to load in the browser. Optimized images help keep the load times to within seconds.

Tips for optimizing your web images

Image file formats: The rules about file formats vary between organizations, each web development house typically has a specific guideline. Here are three file types that are suited for the web.

• GIF: The .gif file format is really a bitmap consisting of a grid made of pixel squares, including transparency pixels with up to 256 colors, and data about every pixel is saved. It is a great file type for saving graphics, charts, bullet points, icons, buttons, and textual details.
• JPEG: Although, the general rule that many follow is to reserve the .jpg file type for images, and .gif file type for graphics, charts, etc., I would apply the .jpg file type as a rule of thumb if your web site leans toward high end photography galleries, or other high quality graphic designs. This file type is good for saving images with millions of colors, including graphics with a variety of shades and gradients. Just note that typically the .jpg file type images are much larger and take longer to load. However, most image editing tools allow you to select the file compression for .jpg. For example, you can choose Maximum, Very High, High, Medium, and Low, so you do have some control over the ultimate file size. To test the image, be sure to save it under several compression settings and then test them for quality rendering and load times. Balancing quality, compression, and load times can be a judgment call depending on the particular image and the web document it is called within.
• PNG: The .png image file type was developed in answer to the .gif patented file type, and while it can display a larger range of colors than the .gif, it does typically result in a larger file size. Many use the .png file format very effectively for buttons and icons, which are usually small pixel dimensions anyway, so they are not so large when utilized in that fashion. A typical 16×16 pixel .png icon will weigh in between 1KB and 4KB, or a 48×48 button at between 3KB and 7KB, so when utilized in this fashion they are optimal. For any .png image over a dimension of 200 pixels you start to see much higher file sizes.

Saving images for the web: Here are several rules of thumb for saving your optimized images for the web.

• Make sure you have saved a copy of the image as a lossless version, meaning that you can come back and edit it again later if needed. For example, .raw, .tiff, .png, .psd file formats to name a few. Especially if several layers have been added to the image or graphic file, you never know when the customer will want to change a word here or a graphic element there, even after it has been up on your site for some time.
• If it is a photograph, then select .jpg file format to save the final image. Remember to test several quality and compression settings until you get the perfect balance between quality and load times. If your image editing tool allows the “progressive” setting use that as it will allow the image to “blur” or display gradually as it is rendered on the web instead of line by line. The load time is not improved with the progressive setting, however it does give the image a softer look and feel when rendering on screen.
• If your .jpg image is to be used as a background on the web document then use the Medium or Low compression setting. Otherwise for displayed images keep the compression at High.
• If you have the option to adjust the image “quality” then use the settings to make the appropriate change; again, remember to strike a balance between acceptable quality and suitable file size.

File sizes: Depending on the use of the image follow these guidelines for optimal file size:

• For background images try to keep the file size around or below10KB.
• For banners or header images a file size up to 60KB is acceptable.
• For high end photographs try to keep them to within 100KB at an absolute maximum.