Graphics Formats: GIF versus JPG (and a little PNG!)
- Which should you use?
- GIF - Graphics Interchange Format
- JPG / JPEG - Joint Photographic Experts Group
- Some comparisons...
- PNG - Portable Network Graphics
- A Quick Note on Bitmaps
Which should you use?
I come across this question a lot. Even in the workplace, time and time again, I see people using one format when they should be using the other. And these people should know better.
I will go into the formats in more detail later, but in a nutshell: complex images using many colours (such as photographs and images using gradient fills) should be saved as a JPG; simple images (such as cartoons, charts and graphs) or images with few colours should be saved as GIF. In addition, simple animations and images which require transparent colours should be GIF.
I will now discuss the various merits of each format...
GIF - Graphics Interchange Format
GIF stands for Graphics Interchange Format. It is a lossless compression algorithm which uses 8 bits per pixel. Now, if you understand binary, you will know that 8 bpp limits such an image to a maximum of 256 colours.
Photographic quality images, and images using gradient fills, tend to use many more colours than this, so GIFs are not really appropriate. However, simple images, like diagrams, cartoons and icons usually use fewer colours.
Note that this does not mean that all GIF images use the same 256 colour palette. It only means that a given image can't be composed of more than 256 colours. Thus, if you were to modify a photographic image in a package like Paint Shop Pro, and then decided - for one reason or another - that you wanted to save the image as a GIF (perhaps so that one colour would be transparent), then the package would optimise the palette so that the 256 colours used would be well matched to the image you were saving.
Of course, GIFs can be made up of fewer than 256 colours, and as such will be smaller on disk.
Another great advantage of GIFs (which has already been referred to) is the ability of setting one colour to transparent. Thus, if you were to display such an image, say, on a webpage, then this one colour would be transparent and you would see the webpage background through the image. For example, compare these two images:
These images are, in fact, identical. The only difference is that in the image on the right, the blue colour has been set to transparent before saving. This effect can be quite handy on webpages, and is unavailable in JPG format. This is why graphics designers may often try to 'force' photographic images into GIF format. Of course, the alternative is to simply set the background colour (in this case, blue) to be the same colour as the background it will be placed upon. In the case of this site, that would be tricky, since the background is lightly patterned. However, using a transparent background allows the images to be transferred to a completely different background without requiring any modifications. Thus GIF images with a transparent background are said to be portable.
Lastly, simple animations can be made from GIFs. An animated GIF is just
an image composed of multiple frames, where each frame is in itself a GIF.
For example, this animation is just composed of two GIF frames:
JPG / JPEG - Joint Photographic Experts Group
This format is usually known as JPG or JPEG. Either is acceptable and both mean the same thing.
JPG images are not limited to a 256 colour palette and can easily display as many colours as the human eye can distinguish. This makes the format ideal for photographic images.
However, uncompressed photographic images saved in this format will be very large. Thus a degree of compression can be applied to the image. JPG supports a sliding scale of compression, from 0 to 100% compression. However, this is lossy compression, meaning that once an image has been compressed, it can not be restored to its original state. (This is unlike lossless compression that occurs, say, when you compress your files with WinZip. In this case, you need to be 100% certain that when you decompress your zip files, that you get back an exact reproduction of the original data.)
Simple images should not be saved as JPG, since the file size will be higher than a corresponding GIF, and the application of lossy compression will cause hard edges to blur slightly. While the blurring may not be noticeable, it will not be well-defined as in the GIF (assuming we're dealing with simple low-colour images).
Some Comparisons...
The images below illustrate that this sort of image should be represented as a JPG. This JPG has compression set to 30%. The 256 colour GIF image is nearly indistinguishable from the GIF in this case (although for larger images the difference in quality would be more noticeable), yet is over four times the size on disk (i.e. in bytes).
The 64 colour version has a smaller filesize, but is still twice as large as the JPG. Here the quality difference is more apparent, especially when looking at the space 'dithering' behind the Falcon.
 |
 |
 |
| JPG Filesize: 4.5KB |
GIF (256 colours) Filesize: 19KB |
GIF (64 colours) Filesize: 10.5KB |
The image below shows how simple images should be saved as GIF. In this case, the 8 colour GIF is less than a third of the filesize of the JPG. Furthermore, the colours of the JPG, especially around the text, are much more fuzzy, due to lossy compression (set at 30%). Lastly, this image was designed to be transparent - black borders have been added to make this more apparent - and so the GIF is the only viable option.
 |
 |
| JPG Filesize: 7KB |
GIF (16 colours) Filesize: 2KB |
PNG - Portable Network Graphics
Just for completeness, it is worth mentioning the PNG format which is becoming more and more popular on the web. Designed as a replacement for GIF, PNG offers much larger palettes: up to 24 bpp, thus providing 16.8 million colour palettes and rivalling JPG for quality. However, PNG still uses lossless compression, so filesizes would be much larger than JPG equivalents when using a large number of colours. However, PNGs have smaller filesizes than equivalent GIFs.
But most beneficial is the ability to specify how much transparency is applied to any given transparent colour. To put it another way, one can specify how opaque the colour should be.
I expect we'll be seeing more of PNGs in the near future...
A Quick Note on Bitmaps
By popular demand, I'm adding this short section. People have asked me what the difference is between a bitmap, a JPG and a GIF file. Why can't you just use bitmaps all the time? In simple terms, a bitmap represents a space where each pixel in the space has a defined colour.
For a black and white image, only one bit is required to define the colour, since a single bit is sufficient to define either black or white. For a 256 colour image, each pixel will require an 8 bit code to represent the colour it holds, since 28 is 256. Thus we have an 8bpp (bits per pixel) image. Similarly, a 16bpp (often just referred to as a 16-bit) image has a colour depth of 65536 colours, a 24bpp image has 16.8 million colours, and so on.
However, raw bitmaps are uncompressed. So, if you have an image that is say, 100 pixels high and 100 pixels across, and a palette of 256 colours, your image will have a filesize of approximately 10KB. Why? Because the image is composed of 10000 pixels (i.e. 100 x 100), and each pixel requires 8 bits; one byte is eight bits (normally). Thus 10000 bytes, or approximately 10KB. (In fact, the actual figure will be slightly higher due to additional information such as the BMP header, but you needn't worry about that.)
GIF and JPG images are also bitmaps, but in compressed formats, as we've already seen. The reason we don't use raw bitmaps all the time, especially on the Internet, is because they're so BIG!
| Just Too Good Last updated: June, 2006 (DJL)
|
Drop me a line