 |
 |
 |
 |
|
|
|
|
 |
||||||||||||
|
home > design tips > web site design > GIF vs. JPEG Using GIFs and JPEGs in web site designBefore 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 color (or a palette no greater than 256 colors). It may also handle dithering poorly, which is the result of pixels in a graphic that try to mix themselves up to emulate different colors. 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 color 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 the artist the perfect balance between quality and file size. The disadvantages of JPEG files are that they cannot be saved in index-color 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 color 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 your graphic consists primarily of line art or flat colors without gradients. JPEG-converted graphics are best for photographs or images with fine tonal variations in colors, such as images with gradients or metallic images. Choosing the right file format is not only important for the quality, but for keeping your image's file size to a minimum. Compare the image quality below when the same text image is saved as both a GIF and JPEG. You will notice that the JPEG file does not handle flat-color images well.   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-color 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 colors? For example, say you want to show a web banner with bold flat colors 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 colors 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-color 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.
If you have any specific questions about our web site design tips, or if you would like permission to republish this design tip on your web site or newsletter, please use our contact form or email us at info@grantasticdesigns.com.
design services | gallery
| design tips | faqs  |
|
 Related web site design tips: |
|
||||||||
 |
