I’m often asked “if I’m putting a graphic on the web, it should be JPEG, right?”. Or I see a client has uploaded a TIFF file to their site. Or “I hear PNG is the new Web standard, so I should use that, right?”. So let’s look at Web formats and when you should use them.
There are three basic formats you should use when saving an image for the Web:
- JPEG
- GIF
- PNG
The JPEG (Joint Photographics Expert Group) format is meant for photographs. Photos need millions of colors to provide smooth images, and JPEG supports millions of colors. JPEG is a “lossy” format, meaning it compresses the image to make it download faster, but it does so by throwing out data and degrading the quality. With care, you can get JPEGs which are quick to download and are not visibly degraded.
The GIF (Graphics Interchange Format) format is meant for graphical images with large areas of solid colors. This would include logos, cartoons, and such. It is limited to 256 colors, which makes it a bad choice for photographic images. You can also create short animations using this format.
The PNG (Portable Network Graphics) format has been designed to replace GIF. For Web use, you should use PNG-8 files, which are limited to 256 colors. You use it for the same sort of graphics you’d use a GIF for. Unlike GIF, PNG cannot be used for animations. There is a 24-bit version of PNG, capable of millions of colors, but it creates much larger files and some browsers don’t handle PNG-24 files well.
Okay, What Does All That Mean?
Let’s look at some examples of images saved in all three formats. Below you’ll see thumbnails of the same photo saved in each format: from left to right they are PNG, GIF, and JPEG. Click on the thumbnails to see larger versions.
Looking at the GIF and PNG versions, you can see what happens when you reduce photo to 256 colors. There are noticeable bands of color on the wall behind (and on my bald head) and the whole thing takes on a more cartoon-shaded look. Also, the GIF is 102k, more than 3 times the size of the JPEG. And the PNG is 86k, which isn’t much better. The JPEG is 33k, and also looks the best of the three.
Obviously, JPEG is the right choice for a photo. And if you are only ever posting photos on the Web, then JPEG is the only format you’ll need to worry about. Also, if you’re using the free software Picasa as I described in the Resizing Photos for the Web tutorial, you’re limited to JPEGs.
So when would you want to use PNG or GIF? Let’s look at a non-photo graphic. Below you see thumbnails of a graphic: from right to left, they are in JPEG, PNG, and GIF formats. Click on the thumbnails to see larger versions.
This image has areas of flat color and type. Notice how lousy the JPEG looks. You could turn up the quality on the JPEG, but at 29k, it’s already the largest of the three. Look at the blurring around the edges, where two solid colors meet. Ugh. The GIF is 25k, the PNG is 20k.
When you have a choice between PNG and GIF, PNG almost always produces smaller files.
So my recommendations:
- If it’s a photo, use JPEG
- If it’s a graphic, use PNG