edit_images.gif (2026 bytes)  
Party On (...sorry, wrong page  ...I mean Part One)

Basic Image Information:  (gifs, jpegs, and pngs)

What is the difference between JPEG, GIF and PNG?

JPEG (Joint Photographic Experts Group)

       JPEG is a standard format for compressing either full-color (24 bit) or grey-scale digital images of "natural" (real-world) scenes.  In other words, it works best with things like photographs, high-grade artwork, real-life scans, etc.; not so well on lettering, simple cartoons, or black-and-white line drawings.  JPEG handles only still images, but there is a related standard called MPEG for motion pictures.

       JPEG is "lossy", meaning that the image you get out of decompression isn't identical to what you originally put in. The compression algorithm uses the known limitation of the human eye, especially the fact that the eye sees small details of light-and-dark better than it sees small color details.   So, JPEG compresses images that will be looked at by humans.  It just happens to do it well enough that we usually can't tell that information in the image has been lost .....usually.

Quality vs. Compression qvc

       A useful property of JPEG is that you can adjust the degree of lossinesswhen you save images.  This means you can trade off filesize against image quality.  The larger the filesize, the better the quality; the smaller the filesize, the worse the quality.  For good, full-color source images, a quality setting of 6 to 7 (out of 10)in Photoshop is usually the best choice if quality is a concern.  Except for experimental purposes, never go above a setting of about 9; using a setting of 10 will produce a file two or three times as large as a 9, but of hardly any better quality.  If you want a very small file (say for preview or indexing purposes) and are prepared to tolerate large defects, a quality setting in the range of 1 to 2 is about right.

       Back to the top of the page

GIF (Graphics Interchange Format)

       GIF stands for Graphics Interchange Format.   It is either pronounced like the peanut butter (Jif) or like the sportscaster (Giff Nielsen) ....no one seems to know for sure, but this page claims to have definitive proof that it's like the peanut butter.  At any rate, it was first developed in 1987 for Compuserve.  They needed an image format that could be sent over slow network connections.  It is a lossless format, which means it retains the quality of its image information when it compresses.  The maximum number of colors a .gif can contain is 256.

       There are two GIF standards, 87a and 89a (developed in 1987 and 1989 respectively). The 89a standard added better interlacing, the ability to make part of an image transparent, and the ability to stack several images together to create animations.

       Back to the top of the page

PNG (Portable Network Graphics format)

       In January 1995 Unisys, the company Compuserve contracted to create the GIF format, announced that they would be enforcing the patent on the LZW compression technique the GIF format uses. This means that commercial developers that include the GIF encoding or decoding algorithms have to pay a license fee to Compuserve. This does not concern users of GIFs or non-commercial developers.

       However, a number of people banded together and created a completely patent-free graphics format called PNG (pronounced "ping"), the Portable Network Graphics format.  PNG is superior to GIF in that it has better compression and supports millions of colors.  PNG files end in a .png suffix.    It stands a good chance of becoming widely supported as a standard Web graphic, along with its animated sibling, MNG (pronounced "ming").

       PNG is supported in Netscape 4.03 and above.   For more information, try the PNG home page.

       Back to the top of the page

When is JPEG best, and when is GIF the best choice?

       JPEG is not going to displace GIF entirely.   For some types of images, GIF is superior in image quality, file size, or both.   One of the first things to learn about JPEG is which kinds of images to apply it to.

       Generally speaking, JPEG is superior to GIF for storing full-color or grey-scale images of "realistic" scenes; that means scanned photographs and similar material.  Any continuous variation in color, such as occurs in highlighted or shaded areas, will be represented more faithfully and in less space by JPEG than by GIF.

       GIF does significantly better on images with only a few distinct colors, such as line drawings and simple cartoons.  Not only is GIF lossless for such images, but it often compresses them more than JPEG can.  For example, large areas of pixels that are all exactly the same color are compressed very efficiently by GIF.  JPEG can't squeeze such data as much as GIF does without introducing visible defects.  (One implication of this is that large single-color borders are quite small in GIF files, while they are best avoided in JPEG files.)

       Computer-drawn images (ray-traced scenes, for instance) usually fall between photographs and cartoons in terms of complexity.  The more complex and subtly rendered the image, the more likely that JPEG will do well on it.   The same goes for semi-realistic artwork (fantasy drawings and such).

       JPEG has a hard time with very sharp edges: a row of pure-black pixels adjacent to a row of pure-white pixels, for example.  Sharp edges tend to come out blurred unless you use a very high quality setting.  Edges this sharp are rare in scanned photographs, but are fairly common in GIF files: borders, overlaid text, etc.  The blurriness is particularly objectionable with text that's only a few pixels high.  If you have a GIF with a lot of small-size overlaid text, don't JPEG it.

       Plain black-and-white (two level) images should never be converted to JPEG; they violate all of the conditions given above.  You need at least about 16 grey levels before JPEG is useful for grey-scale images.  It should also be noted that GIF is lossless for grey-scale images of up to 256 levels, while JPEG is not.

       Back to the top of the page


Click here to go Back to Tuesday's schedule.

This page was last edited on June 17, 2000.

URL = http://teachertech.rice.edu/Materials/GT2000/Mac/day02/edit_images1.html

These pages were developed through GirlTECH, a teacher-training program sponsored by the Center for Excellence in Education (CEEE) and made possible by support from the National Science Foundation through EOT-PACI.
Copyright   Michael Sirois, GirlTECH, June 2000.


last edited, ms 6-17-2k, 12:50.