Images

Images often account for the bulk of a web page, in terms of file size and number of server requests. In terms of performance, it pays to spend a little extra time optimizing the images that you use, and thinking about the ways that you use them.

• Image Size

  Thought should go into the dimensions of each image file. If an image file is 400 pixels wide and 400 pixels tall, but the largest version of the image shown on the web page is 200 by 200, then bandwidth is being wasted. If the image might potentially show up in different sizes (as is often the case with thumbnails), then it might sometimes make sense to have two different versions of the file.

  For instance, if the initial view of the page shows only thumbnails, and larger versions are shown upon some user interaction (in response to some JavaScript event), then it would be best to have images created at thumbnail size, then lazy-load separate full-sized versions with JavaScript after the initial page load has finished. This allows the page to appear to render more quickly than if full-sized images were loaded at the start and simply scaled down for the thumbnails. Other factors, such as the number of thumbnail/full-size image pairs present, should go into determining whether or not to take this kind of approach.

• Image Formats

  There are four main image formats that should be used, detailed here:

  JPEG

  This will cover all photography-based images, such as shots of people and other real world objects, or anything with a very high color count.

  24-bit PNG

  This high-color count format fully supports graded opacity by pixel. It is a very heavy format in terms of file size, and its use is only recommended when areas of an image must be partially transparent, and more than 256 colors are present in the image.

  Internet Explorer 6 does not support the PNG24 format. Transparent areas of the image will show up as gray in that browser, which is never acceptable. There are a number of "fixes" that use JavaScript, Microsoft proprietary CSS filters, or even Flash to make IE6 play nicely with PNG24 images, but all such fixes are slow, heavy, occasionally tricky to implement, and lack support for some CSS properties such as background-position.

  It is strongly recommended that you use a fallback GIF or PNG8 (see below) for IE6 instead of attempting to force PNG24 support.

  8-bit PNG

  When an image is made up of 256 colors or less, as is often the case with logos and other designed assets, PNG8 is usually the most appropriate format to use. PNG8 is a lot more compressible than GIF (using tools like pngcrush and pngquant). This format also allows graded opacity in nearly all browsers, but in IE6, those semi-opaque pixels are just shown as 100% transparent.

  Photoshop cannot output these semi-opaque files correctly but Fireworks can. More detail is provided in an article on Sitepoint.

  Transparent GIF 89a

  GIF 89a offers the flexibility of transparency and wide browser support, but the constraints of no graded opacity nor a color depth above 256. In our experience, a color depth of 64 still provides very good quality thumbnails, and keeps the file size comparably small.

  All low-color count imagery such as icons or thematic graphics should be done in PNG8, as it's the most size-efficient of these four. PNG8 is our primary recommendation for most site graphics.

  For further optimization all of these formats, Yahoo's Smush.It can output losslessly compressed versions of your uploaded images.

• Leverage CSS Sprites

  Typically, each image on a web page necessitates a request to the server, and each request comes with a certain amount of overhead. One of our primary goals as interactive developers is to reduce the number of these HTTP requests in order to improve page performance.

  Borrowing from a technique used in some of the earliest video games, "sprites" are singular image files that are composed of many smaller image assets. The web page makes a single request for this image from the server, and each part of it is revealed using CSS background-position.

  To read an overview of the general technique of spriting, visit css-tricks.com. One thing to keep in mind is that you should avoid making sprites too large (especially if there is a good deal of whitespace or transparent space between parts of the sprite), as images over 1000 pixels in height or width can be a huge drain on system memory usage.

  Properly using CSS sprites can be difficult and time consuming. If you aren't sure how to create an image sprite for your assets, or are thinking about performing this optimization after your page is already developed, you may want to check out SpriteMe, a bookmarklet that can automatically generate both the sprite and the accompanying CSS. As with any automated tool, careful review of the output is recommended.

  For further details, read Google's documentation on minimizing round trips.