High Performance Images

Chapter 3. Lossless Image Formats

Tim Kadlec

In the previous chapter, you learned about the difference between lossy and lossless image formats. Lossy image formats lose image information during their compression process—typically taking advantage of the way we perceive images to shave away unnecessary bytes. Lossless image formats, however, do not have that benefit. Lossless image formats incur no loss of image information as part of their compression process.

In this chapter, we’ll dig deeper into GIF and PNG, the two primary lossless image formats on the Web. We’ll talk about how they’re constructed and compressed, and what to do to ensure we keep them as lightweight as possible.

GIF (It’s Pronounced “GIF”)

When it comes to image formats on the Web, the Graphic Interchange Format (GIF) may no longer be the king of the castle, but it certainly is its oldest resident. Originally created in 1987 by CompuServe, the GIF image format was one of the first portable, nonproprietary image formats. This gave it a distinct advantage over the many proprietary, platform-specific image formats when it came to gaining support and adoption on first Usenet, then the World Wide Web.

The GIF format was established at a time of very limited networks and computing power, and many of the decisions about how to structure the format reflect this. Unfortunately, as we’ll see, this limits its ability both to portray rich imagery as well as to compress.

Block by Block

The building blocks of the GIF ...