Tips and Tricks for Creating Website Graphics - Which Image File Format is Right for You? Part 1 of 2

Tips and Tricks for Creating Website Graphics - Which Image File Format is Right for You? Part 1 of 2
Page content

Major Image Formats for the Internet

A decade ago, people had two file formats to choose from when placing images on a Web page: GIF (which could only utilize 256 colors) and JPG (which could display millions of colors). Generally, people used the JPG format if the image happened to be a photo, and they used the GIF format if not. There were other considerations, but these were primary. Because of their smaller file size, GIFs loaded much faster than JPGs, which was important when most everyone still used dial-up connections. Recently the World Wide Web Consortium (W3C) accepted a new image format for websites: PNG. This format also displays millions of colors.

As I write this, a few other file formats are gaining acceptance, but most webmasters stick to these three formats for their website images:
* GIF (Graphics Interchange Format)
* JPEG or JPG (Joint Photographic Experts Group)
* PNG (Portable Network Graphics)  
 As explained below, each of these file formats has its strengths and weaknesses.

GIF (Graphics Interchange Format)

Some applications still refer to the GIF format as CompuServe Graphics Interchange because CompuServe developed the GIF file format in the late 1980s. GIF images are suitable for line art and logos and the small repeating files used as Web page backgrounds. It is easy to create animated graphics with GIF files; they also work well for creating image maps. GIF images are small in file size because they only support 256 colors, which display in a paint application as a palette. To match colors in different GIF images, the palette of one image can be saved and then loaded onto another image. I sometimes do that when creating a website. Desktop publishers and webmasters like to use GIF images because GIFs support transparent backgrounds. However, you would rarely save a photo as a GIF because you would lose photo detail along with a wide range of values. When creating a GIF image, be sure to develop the image in the size you want because GIFs don’t take well to being resized.

In case you’ve heard the debate about the correct pronunciation of GIF, I add this bit of trivia: The developers at CompuServe pronounced GIF like Jif, the peanut butter, which is the way I generally hear it pronounced. Still, you may hear others pronounce it Gif  (like “gift”). Just smile. 

JPEG or JPG (Joint Photographic Experts Group)

The JPG (pronounced “Jay-Peg”) graphic format was created by the Joint Photographic Experts Group, hence the acronym JPEG (which is often shortened to JPG).  JPG is a lossy compression method that was standardized in 1990.

JPG images are widely used on the Internet because they support millions of colors and yet have a relatively small file size (not as small as a GIF but much smaller than a BMP or a PNG). Developers can adjust the graphic compression of a JPG in order to achieve the desired trade-off between file size and visual quality. JPG graphics support layers, which is an important feature for graphic artists. For posting truecolor images on the Internet, JPG is generally the graphic format of choice.
For my websites, I often use JPGs because of their manageable file size, but they are not my favorite file format for photos. Because JPGs don’t resize as elegantly as PNGs, I prefer to save my original digital photos as PNG files. Often a resized JPG has developed “noise” that blurs the image - sometimes a little noise, sometimes a lot. Since I take digital photos that are destined for multiple uses (not just for the Internet), I like to save them as PNG files and then resize them and save them as JPGs for use on the Web. If you resize images very much, you too may decide that you would much rather resize a PNG.  

PNG (Portable Network Graphic)

The PNG (pronounced “ping”) file format was created specifically for use on the Internet. It was designed to replace the older and simpler GIF format and, to some extent, the more complex TIFF format. Since PNG supports up to 48-bit truecolor or 16-bit grayscale, restoring and re-saving an image does not degrade its quality, neither does resizing. PNG files offer true 8-bit transparency, which allows for 256 different levels of transparency. (GIFs offer just 1-bit transparency; meaning transparency is either “on” or “off” with nothing in between). PNG is a lossless, portable, well-compressed storage of bitmap images.

On the downside, the PNG format does not support layers. Secondly, PNG file sizes are larger than JPEG, which can be an important consideration for a webmaster. And finally, some older browsers do not support PNG files without a plug-in; however, all modern browsers support PNG files just fine.

It is generally agreed that Adobe Fireworks is the best program for working with PNG files. In fact, when you create a new document in Fireworks, it will be a PNG.  

Further Reading

For information about adding graphics to a Web page, please see part 2 of this series called Tips for Creating Website Graphics - Using Attributes when Adding Images to a Web Page

To read more about these graphic file formats, particularly their history, check out these websites:
 * A PNG home site
 * A GIF history and use site
 * A JPEG history and scanning tips site