Before discussing the differences between the two graphic standards for the web, GIFs and JPEGs, we will elaborate on what each does:
GIF is short for Graphics Interchange Format. GIF's advantages is that it is supported by practically all web browsers, can include transparent backgrounds, supports interlacing (providing a low-resolution preview of the graphic to the viewer while it downloads), and can be used as an image map (allowing the viewer to click on the graphic as they would a regular link to another site.) GIF's disadvantages are that it can only support 8-bit colour (or a palette no greater than 256 colours). It may also handle dithering poorly, which is the result of pixels in a graphic that try to mix themselves up to emulate different colours. Photographs saved as GIFs can also lose their detail and a wide range of values.
The following photograph was saved as a GIF instead of a JPEG. Notice how the fine gradients do not display well:
JPEG is short for Joint Photographers Experts Group. JPEG is superior in rendering colour and detail found in photographs or graphics using blends, gradients, and other tonal variations. It also provides for greater compression options (Low, Medium, High, and Maximum) allowing the artist the perfect balance between quality and file size. The disadvantages of JPEG files are that they cannot be saved in index-colour mode, meaning that many people who view the images with 8-color monitors may experience unusual dithering patterns. JPEG files also do not allow for transparent backgrounds, so you are stuck with either leaving the background of the image the same colour as the background of your page, or having to settle for a border around your image.
What many people do not realize is that metallic images (gold, silver, copper, steel, bronze) are created using different types of gradients. Some of the gradients can be quite complex. For this reason, most metallic images should be exported or saved as JPEGs rather than GIFs. A JPEG is much better at displaying a wide range of tones, which is what a gradient is. For example, the two graphic images below are steel and copper buttons saved as JPEGs.
When selecting GIF or JPEG for your graphics conversion, it is important to consider the type of image you will be working with. Use a GIF format if you’re graphic consists primarily of line art or flat colours without gradients. JPEG-converted graphics are best for photographs or images with fine tonal variations in colours, such as images with gradients or metallic images. Choosing the right file format is not only important for the quality, but for keeping your images file size to a minimum.
Sometimes it is obvious that a graphic on someone's web page was saved in the wrong file format. Photos may look too grainy, or flat-colour images may look too fuzzy. If you already have design experience and have the original graphic files to work with (or at least know how to recreate the graphic), making the necessary changes can be simple enough. But what if you're faced with the dilemma of what file format to save a graphic that has both tonal variations AND flat colours? For example, say you want to show a web banner with bold flat colours and text that will jump out at the reader. If you save the image as a GIF, the gradient or photo part of the image may become dithered. Yet if you save it as a JPEG, you may sacrifice the sharpness of the colours and the readability of the text. If you're looking for a way to maintain the best image quality for everything, have the tonal image all on one side and the flat-colour image on the other side. Then you can save part of it as a JPEG and the other part as a GIF. As long as the images touching each other are completely straight, they can look like one single graphic and you preserve maximum resolution.
Whatever your or your client chooses to work with, try to avoid making your revisions on a GIF or JPEG file that has already been sized down and converted to the web; use the original files (or photographs) they were made from, if available. GIFs are generally safer for recompressing, since they utilize "lossless" compression - meaning that when the image is compressed, no information is lost from its contents. JPEGs, however, utilize "lossy" compression (meaning that information is lost from its contents) so, the image will look worse if it is retouched and saved as a JPEG again.
All of these articles may be freely reprinted in any e-zine, newsletter, newspaper, magazine, website, etc. as long as my name and bio remain intact. |
