Professional Website Performance: Optimizing the Front-End and Back-End

Chapter 5

Optimizing Web Graphics and CSS

WHAT’S IN THIS CHAPTER?

• Getting to know the three primary image formats
• Achieving high levels of compression
• Cutting down on HTTP requests by using CSS sprites
• Making your CSS leaner

The images used on a website are often created by a web designer or graphic designer, for whom quality is the primary concern (because this is the standard by which they are usually judged). So, it’s not surprising that optimization is often ignored. You can frequently cut 10 KB or 20 KB off an image without any visible loss in quality.

If graphic designers are guilty of tunnel vision in this respect, you should be careful not to fall into the same trap. Although size is your primary concern, and some loss of quality is probably acceptable, you should resist the temptation to over-optimize — tacky looking graphics are just as likely to put off visitors as slow loading times.

UNDERSTANDING IMAGE FORMATS

For a long time, two main image formats were used on the web: JPEG and GIF. JPEG (which is an acronym for Joint Photographic Experts Group) were used for photographs, and GIF (which stands for Graphics Interchange Format) was used for computer-generated images such as icons.

In the mid-1990s, it came to light that the Lempel-Ziv Welch (LZW) compression method used by GIF was patented, and the search was on for an alternative. In 1996, the first specification for a new format, PNG (which stands for Portable Network Graphics), was released. Later that year, it ...