If you’re starting out in web design you may be familiar with the different types of file formats used for images on the web, but it can be confusing trying to figure out which file type you should use. This short guide outlines the differences between the file types and also uses a couple of examples to show you how the file size varies depending on which file type you use.
Let’s start with GIF. Graphics Interchange Format (GIF) is one of the file formats used to display indexed-color graphics and images in HTML documents on the web. Indexed color means that it will only display a maximum of 256 colors. For this reason, GIF is NOT a good format for saving photographic type images with many colors. GIF is good for saving images with flat blocks of color such as logos or simple illustrations. Another very important feature of GIF images is that is allows you to preserve transparency. It uses an LZW-compressed format designed to minimize file size.
JPG or JPEG
Joint Photographic Experts Group (JPEG) format is used to display photographs and other continuous-tone images on the web. JPEG format supports CMYK, RGB (millions of colors), and Grayscale color modes. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. This is known as lossy compression, and can result in a loss of quality if a high level of compression is applied. In most image editing programs you can specify how much compression/loss of quality you want. Generally, if you choose the maximum quality option, your image will be indistinguishable from your original photograph. However, you can also save your files with lower quality settings that still produces a reasonably good image (or at least good enough for the web) image. Another important difference between GIF and JPG, is that JPG does not preserve transparency.
Portable Network Graphics (PNG) is a little bit like the best of both worlds. It was developed based on GIF, for lossless compression and for display of images on the web. Unlike GIF, PNG supports 24?bit images and produces background transparency without jagged edges; however, some older web browsers do not support PNG images. PNG format supports RGB, Indexed Color, Grayscale, and Bitmap mode images. PNG also preserves transparency in grayscale and RGB images.
So let’s take at how each of the file formats fare using two different images. I’ve saved a logo and a photograph using Photoshop’s “Save For Web and Devices” command. We’ll start with the logo which is made up of only a few colors.
- Logo Saved As Transparent Gif
File size 10.17 K
- Logo saved as JPG.
File size 63.05K
- Logo saved as PNG-8
File size 9.16K
4. Logo saved as PNG-24
File size 17.74K
The GIF and the PNG-8 are fairly good quality, but a little bit jagged around the edges when saved with transparency. This can be avoided to a certain extent by setting a matte the same color as your background when saving. The PNG-24 is excellent quality with very smooth lines even when saved with transparency. As you can see the JPG file size is very large when compared with the other file types.
Now let’s take a look at how a photographic image with millions of colors behaves when saved in each format. The image is 500 pixels wide, has a resolution of 72ppi and in its “raw” or unsaved state has a file size of 559K.
1. Photo saved as GIF
File size 119K
2. Photo saved as JPEG with quality setting of 8
File size 39K
3. Photo saved as PNG-8
File size 106K
4. Photo saved as PNG-24
File size 153.8K
So to finish up, here are a few rules of thumb when saving for the web. You’re looking for a compromise between the quality of the image and the file size.
~ For photographic type images, JPG is best
~ For logos or images with blocks of flat colour and no gradients, GIF or PNG8
~ For images using effects such as drop shadows or glows, which also require transparency, choose PNG24.
And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Foundations of Photoshop.
Comments on this article are closed. Have a question about Photoshop? Why not ask it on our forums?