I'm often asked how I get my Web images so small, and/or why do my Web pages load so quickly relative to other sites. These two questions are directly related to one another because the answer starts with proper optimization (compression) of images to be used in Web page development.

Certainly clean HTML coding has an impact on the speed at which a Web page loads, but unless you have an endless scroll of paragraphical text, multiple tables-based charts, or JavaScript widgets of some kind, the speed at which your page comes up in a browser truly is dependent on the quality of the images.

A Picture By Any Name
By images, I mean both photographs and the actual graphical components such as rounded corners, logos and "go" buttons that make up the look and feel of your Web page layout. Essentially there are only two formats you should be using unless you have a desire to make your visitors download a custom plug-in (which would be necessary for certain fractal-based compression formats), and these are GIF ("gif" as in graphics, not "jif" as in what choosy mothers put on their sandwiches) and JPG (JPEG). Other formats are around the corner, but these are currently the two you must master to make your content widely compatible.

Rule of Thumbnails
Generally, the first rule in Web imaging is to always use JPEG for anything that looks like a photograph, with wide variations in tones, and use GIF format for anything that contains Web-safe colors, and as few as two shades of color. A GIF image will be much smaller in output size for something like a 256x2-pixel hairline graphic, while a JPEG will be smaller for a photograph that's 250x200 pixels.

The exception to this rule is for thumbnails of photographs used in online galleries or E-commerce catalogs. In certain cases a small image that is 100x25 pixels can be smaller in output size if it's saved as an 8-shade GIF versus a low-quality JPEG (although using a JPEG with a very low quality setting, such as 10/100 may still be smaller depending on some optimization software). With vector illustrations, you will have to eyeball the content since the use of gradients may affect the optimum output format.

Always size your images for use on the Web to the actual size they will be specified in the HTML. I was consulting with a client last month who couldn't determine why their online catalog took so long to download. They had 20 thumbnails on the page, and the Web designer had scanned in images as large as 200x300 pixels and had "resized" them in HTML by specifying a smaller size. What this meant was that each page on the site had twenty or more images, each averaging 40KB in size, so each page was almost a megabyte of data. By optimizing their images down to about 4–7KB each, their page went from 930KB down to 125KB, and the page loaded almost 10 times faster.