This is part 2 in an ongoing series. You can read the other parts here:
This second installment of the image optimization series talks about file formats and how to chose the right one for the job. We’ll briefly discuss the popular GIF and JPEG formats and then move on to highlighting the rock star, PNG, hopefully helping correct some misconceptions about it.
GIF is a palette (also called “indexed”) type of image. It contains a palette of indexed colors, up to 256, and for every pixel of the image there is a corresponding color index. The format is no longer subject to patent issues, so you can create GIFs without the risk of going to jail. (For more on the history of the GIF format, click here.)
GIF is a non-lossy format, which means that when you modify the image and save it, you don’t lose quality.
GIF also support animations, which, in the dark Web 1.0 ages, resulted in a plethora of blinking “new” images, rotating @ signs, birds dropping … an email, and other annoyances. In the much more civilized Web 2.0 era, we still have “loading…” animations while we wait for the results of the next Ajax request to update the page, but there are also things like the good old shiny sparkles that people like to put in their social network profiles. Nevertheless, animation support is here if you need it.
GIF also supports transparency, which is a sort of boolean type of transparency. A pixel in a GIF image is either fully transparent or it’s fully opaque.
JPEG doesn’t have the 256 colors restriction associated with GIFs; it can contain millions of colors and it has great compression. This makes it suitable for photos and, in fact, most cameras store photos in JPEG format. It’s a lossy format, meaning you lose quality with every edit, so it’s best to store the intermediate results in a different format if you plan to have many edits. There are, however, some operations that can be performed losslessly, such as cropping a part of the image, rotating it or modifying meta information, such as comments stored in the image file.
JPEG doesn’t support transparency.
PNGs is a non-lossy format that comes in several kinds, but for practical purposes, we can think of PNGs as being of two kinds:
PNG8 is a palette image format, just like GIF, and 8 stands for 8 bits, or 28, or 256, the number of palette entries. The terms “PNG8″, “palette PNG” and “indexed PNG” are used interchangeably.
How does PNG8 compare to GIF?
The second type of PNGs, truecolor PNGs, can have millions of colors, like JPEG. You can also sometimes come across the names PNG24 or PNG32.
And how does truecolor PNG compare to JPEG? On the pros side, it’s non-lossy and supports alpha transparency, but on the cons side, the file size is bigger. This makes truecolor PNG an ideal format as an intermediate between several edits of a JPEG and also in cases where every pixel matters and the file size doesn’t matter much, such as taking screeenshots for a help manual or some printed material.
We said that both PNG types support alpha transparency, but there are some browser eccentricities that affect both types and about which you should be aware.
With PNG8, whenever you have semi-transparent pixels they appear as fully transparent in IE (version 6 and lower). This is not ideal but it’s still useful and is the same behavior that you get from a GIF. So by using a PNG8, in the worst case (IE < 7) you get the same user experience as with a GIF, while for other browsers (Firefox, Safari, Opera) you get a better experience. Below is an example that illustrates this, note how in IE6 the semi-transparent light around the bulb is missing (source: SitePoint):
For truecolor PNGs, the situation is a much less attractive compromise. All the semi transparent pixels appear grey in IE prior to version 7 (source: W3C).
IE7 introduces proper native support for alpha transparency in both PNG8 and truecolor PNGs. For earlier IE versions you need to fix the truecolor PNG transparency issue using CSS and an AlphaImageLoader filter, which we’ll discuss in more details in a follow-up article. (Spoiler alert: avoid AlphaImageLoader.)
Although PNG8 should be the preferred of the PNGs, because it’s smaller in filesize and degrades well in early IEs without special CSS filters, there are still some use cases for truecolor PNGs:
At the end, let’s summarize what was discussed in this article highlighting that: