Graphics for the web: JPG and PNG Files

JPEG (Joint Photographic Experts Group) is a very efficient, true-color, compressed image format. It uses lossy compression, which means that bits are removed from the image in order to save space. JPEG files support millions of colors (compared with the 256 for GIF).
The JPG format is best for images with gradients, blends, and inconsistent color variations such as photographs or paintings. Images which have well separated tones should be saved in the GIF or PNG format. For example, if you include text in your image, you will notice a definite fuzzing of the characters when you view it.

You have several options when optimizing JPG images. JPG is a lossy format (which means it throws away bits), so with each generation of the image you save you will loose information, and that will degrade the quality of the image.

Any good image editor (Photoshop, Paint Shop Pro and others) will allow you to specify a compression percentage when you save the file. Before you purchase a graphics editor make sure it has a preview pane on the save so you can see what the compressed image looks like when you save it. This is a lot easier than saving a copy, examining it, resaving it and so on.

JPEG supports a concept similar to interlacing in GIF which is called progressive JPEG. This simply means that a rough image is displayed initially, followed by more and more detail as additional bits of the image are received. This is good for displaying large images. Unfortunately, progressive JPEG is a relatively new standard and is not supported by all browsers.

PNG
There is a new format which is threatening the supremacy of GIF and JPEG. That format is called PNG (Portable Network Graphics).
PNG, like GIF, supports lossless compression. This means that unlike JPEG, bits of the image are not lost or thrown away when the image is decompressed. This compression scheme is public domain and improved over the algorithm used by GIF.

Images in the PNG format may be made partially transparent. This is necessary for displaying good looking graphics on a web page.

Finally, PNG supports color depth of 24 bits or greater. This makes it a much better format than GIF for images which must have lots of colors.

An important thing to remember about the PNG format is that the color pallet is contained within the image. Thus, its important that the pallet be made as small as possible, containing only the colors that are necessary to display the image. Most graphics programs should handle this detail for you when the file is saved.

Note that JPG is still superior for large images because its compression scheme is better suited for that purpose.

In addition, the PNG design does not include support for animation. Thus, GIFs must still be used for that purpose.

Most of the modern graphics editors support output in the PNG format. These editors include Paint Shop Pro, which is my personal favorite.

Personally, I think its a little early to go and replace all of your graphics with PNG graphics. Support within the different browsers is still very new, and you would be depriving many of your visitors of your graphics by including PNG images. However, in a few years I expect to see this format more and more.

About the Author

Richard Lowe Jr. is the webmaster of Internet Tips And Secrets. This website includes over 1,000 free articles to improve your internet profits, enjoyment and knowledge.
Web Site Address: http://www.internet-tips.net
Weekly newsletter: http://www.internet-tips.net/joinlist.htm
Daily Tips: internet-tips@GetResponse.com

Claudia Arevalo-Lowe is the webmistress of Internet Tips And Secrets and Surviving Asthma. Visit her site at http://survivingasthma.com

List of articles available for reprint: article-list@internet-tips.net

email - articles@internet-tips.net
url - http://www.internet-tips.net

articles@internet-tips.net
http://www.internet-tips.net