If you're working on a web application, chances are good that you have had to, or will have to, compress images at some point, even if you're not a designer. Assuming you want a high-performance application, choosing how to compress your images for web use is not something to be taken lightly; if you choose the wrong compression type or amount, you'll wind up with either horrible looking images or ungainly files which increase your page load time. Nevertheless, choosing proper image formats and compression techniques is not a difficult skill to master, so let's look at the three most widely supported image formats for the web and see what our options are.
Let's start with the JPEG format.
JPEG: Joint Photographic Experts Group
The JPEG compression algorithm dates back to the early ‘90s and is used in a wide variety of formats, but here we only care about the commonly used JPEG format. The JPEG algorithms are the most sophisticated compression technique of the three formats we'll be looking at, and are a type of "lossy" compression. This means that some information is lost each time you save and compress a JPEG image. This is important to remember: if you have a JPEG image which you open and re-save, you're losing additional information each time you re-save it. If you re-save a JPEG file too many times, it will begin exhibiting visual artifacts from the re-compression process, even if you're saving it at a high quality setting.
On the left is the original image, in the middle it’s been saved once at 80% quality, and on the right it’s been saved ten times at 80% quality. Even using a high quality setting such as 80%, you can see that resaving further worsens the visual quality.
JPEG compression uses mathematical algorithms to imitate human vision, prioritizing overall color tonal changes over precise detail reproduction. It subsamples your image into small squares, usually either 8x8 pixels or 16x16 pixels (more common), which means you'll get the most efficient compression if your image dimensions are multiples of 16. (Another benefit of sticking to multiples of 16 is that it allows editing applications to rotate your image 90 or 180 degrees without re-compressing it and throwing away more information.)
Because of the way JPEG algorithms work, the JPEG format is really only suited to photographs. JPEGs most commonly use a 24-bit RGB color space (the best for photographs), but don't support transparency, and should not be used for graphics or most non-photographic images. If you want to compress graphics for your application interface, use either the GIF or PNG formats.
On the left is a photo saved with JPEG compression, and on the right is a graphic saved the same way. Even when blown up significantly, the photo doesn’t have many visible compression artifacts, whereas the graphic is noticeably degraded.
Note: when saving JPEG files for web use (and thus trying to minimize the file size), including a color profile makes the file unnecessarily larger. When you compress and save JPEGs for web use, convert your photos to use the sRGB color profile and then be sure you don't include the color profile when you save.
GIF: Graphics Interchange Format
First let's get the pronunciation out of the way. There is a debate as to whether it's pronounced with a "hard g" or "soft g," but according to the format's creator, Steve Wilhite, "GIF" is pronounced just like the peanut butter, Jif. "Choosy developers choose GIF" was a common catchphrase among early GIF developers.
The GIF format is the oldest format here, dating back to 1987, and has enjoyed a resurgence in popularity recently due to the current animated GIF craze (for example, see http://www.gif.tv). But the GIF format is really the workhorse of the group, still popular after a quarter century of use. GIF images are great for compressing graphics and other high contrast, non-photographic imagery because they use lossless LZW compression. "Lossless" compression means you can re-save the image multiple times without losing information. However, this doesn't mean that information isn't discarded when the GIF is initially compressed and saved.
Although the GIF format supports the 24-bit RGB color space, you cannot use all possible colors in a single GIF—you're restricted to a palette of 256 colors (8-bit color). But this is not a downside, it's an upside. . .it's what makes a GIF so tiny when used properly! For the first few years of GIF's existence, we were limited to only the 256 pre-selected "web safe" colors which could be simultaneously rendered by the limited graphics technology of the day, and thus were guaranteed to be accurate on most people's monitors. Now, you can choose any 256 colors from the entire 24-bit color space. If you're compressing an image with lots of colors, you may need all 256 colors, but if your color range is limited then you can make your image even smaller by using a smaller palette (sometimes as small as 4 or 8 colors). If a limited palette forces you to reduce the number of colors used when you export your image, you can usually apply dithering to make the colors appear to blend and look more like the original image. Use dithering sparingly, though, because it makes your GIFs larger depending on the particular technique used.
GIF's limited color palette is important to remember when you're making image sprites, too. When you make your sprites (by combining several small images into a single larger image), take careful consideration of the colors used in the images. Because you're working with a limited palette, it's best to group images that use the same colors, that way they're not competing for space in the limited color palette.
When these blue, red, and green graphics were compressed in the same image, their gradients were dithered due to being forced to share a single color palette.
When the blue, red, and green graphics are compressed in separate images (denoted by the dotted lines), their gradients are smoother due to the increased color palette space.
GIF does support transparency, but only 1 bit per pixel. This means a pixel can be either opaque or transparent, but not partially transparent. Because of this, GIFs are usually only suitable for transparency if the edges of objects are straight horizontal, vertical, or 45 degree angled lines. Objects with curved edges or angles other than 45 degrees will appear jagged, and may have a “halo” of color around them. Also, if you choose to use transparency in GIFs, note that it takes up a location in your color palette so you'll be limited to a maximum of 255 colors.
PNG: Portable Network Graphics
The third and last format we'll look at is the PNG format. If you need images with partial transparency, this is the format for you. The PNG format was designed in the mid-90s to be a royalty-free alternative to the GIF format, and it uses lossless ZIP DEFLATE compression, making it a great option for graphics and non-photographic imagery.
PNG images are a good all-around choice for graphics due to their flexibility. A PNG can be either a full 32-bit RGB image (24-bit color with an 8-bit alpha channel supporting partial transparency), or it can be a paletted 8-bit image just like a GIF. (Note: Internet Explorer started supporting 8-bit transparency in PNGs with IE7, so as long as you don't need to support IE6, you can use 8-bit transparency with no concerns.)
When planning on using an 8-bit paletted image, it's good to compare the difference in file size between PNG and GIF versions. Although an 8-bit image will look the same in either format, one format will result in a smaller file than the other because they use different compression schemes (LZW vs. ZIP). A general rule is that a GIF will be smaller when working with small images and a PNG will be smaller when working with medium and large images. But you'll have to do a comparison in each case to see how the formats perform.
It's very enticing to be able to lay out an image sprite with full 32-bit color and transparency, but be careful. When working with full 32-bit PNGs, you don't have the advantages of JPEG compression or an 8-bit palette to help save space, so 32-bit PNGs can get quite large. Use them sparingly. (Since PNGs don't use JPEG compression, don't use full 32-bit PNGs for photographs if you can help it; photographs should always be saved in the JPEG format.)
JPEG vs. GIF vs. PNG
JPEG, GIF, or PNG… if you’re not knowledgeable about their differences, it can be tricky figuring out which format to use in a given situation. All three image formats are useful in different circumstances; you just have to know their strengths and weaknesses. Here's a reference table to help remember the differences:
| TYPE | COMPRESSION | COLOR DEPTH | TRANSPARENCY | USES |
|---|---|---|---|---|
| JPEG | lossy (JPEG) | 24 bit | none | photographs |
| GIF | lossless (LZW) | 8 bit | 1 bit | small graphics |
| PNG | lossless (ZIP) | 24 or 8 bit | 8 or 1 bit | medium to large graphics, partial transparency |
Resources
For further information about the JPEG, GIF, and PNG formats (including more technical details about how their compression schemes work), wikipedia has some great articles: Wikipedia: JPEG, Wikipedia: GIF, & Wikipedia: PNG
Although most designers use Adobe software such as Photoshop or Fireworks for compressing web images, those tools may not be practical options for all budgets. If you’re without access to either of those, GIMP is a nice alternative for manipulating and preparing images. And for those who prefer command line interfaces, ImageMagick can be a great tool.
