Top 3 Products & Services
| 1. 2. 3. |
Dated: Aug. 13, 2004
Related Categories
Computer Beginners GuidesPhotoshop Graphics Suite
By Najmi
Before starting this article I want readers to know what a pixel is. Pixel is short for Picture Element. A pixel is a single point in a graphic image. Graphics monitors display pictures by dividing the display screen into thousands (or millions) of pixels, arranged in rows and columns. The pixels are so close together that they appear connected. The number of bits used to represent each pixel determines how many colors or shades of gray can be displayed. For example, in 8-bit color mode, the color monitor uses 8 bits for each pixel, making it possible to display 2 to the 8th power (256) different colors or shades of gray.
On color monitors, each pixel is actually composed of three dots a red, a blue, and a green one. Ideally, the three dots should all converge at the same point, but all monitors have some convergence error that can make color pixels appear fuzzy.
The quality of a display system largely depends on its resolution, how many pixels it can display, and how many bits are used to represent each pixel. VGA systems display 640 by 480, or about 300,000 pixels. In contrast, SVGA systems display 800 by 600, or 480,000 pixels. True Color systems use 24 bits per pixel, allowing them to display more than 16 million different colors.
Following are the most commonly used graphics file formats for putting graphics on the World Wide Web and how each differs from the others.
JPEG/JPG vs. GIF vs. PNG - What is the difference?
JPEG/JPG:
Short for Joint Photographic Experts Group, the original name of the committee that wrote the standard. JPG is one of the image file formats supported on the Web. JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. Lossy compression refers to data compression techniques in which some amount of data is lost. Lossy compression technologies attempt to eliminate redundant or unnecessary information. Most video compression technologies, such as MPEG, use a lossy technique.
The information that is discarded in the compression is information that the human eye cannot detect. JPG images support 16 million colors and are best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness.
With the explosion of scanners, digital cameras and the World Wide Web, the JPEG image format has quickly become the most widely used digital image format.
A useful property of JPEG is that the degree of lossiness can be varied by adjusting compression parameters. This means that the image maker can trade off file size against output image quality. You can make extremely small files if you don't mind poor quality; this is useful for applications such as indexing image archives. Conversely, if you aren't happy with the output quality at the default compression setting, you can jack up the quality until you are satisfied, and accept lesser compression.
There are two good reasons: to make your image files smaller, and to store 24-bit-per-pixel color data instead of 8-bit-per-pixel data.
Making image files smaller is a win for transmitting files across networks and for archiving libraries of images. Being able to compress a 2 Mbyte full-color file down to, say, 100 Kbytes makes a big difference in disk space and transmission time! And JPEG can easily provide 20:1 compression of full-color data. If you are comparing GIF and JPEG, the size ratio is usually more like 4:1.
The second fundamental advantage of JPEG is that it stores full color information: 24 bits/pixel (16 million colors). GIF, the other image format widely used on the net, can only store 8 bits/pixel (256 or fewer colors).
Within a couple of years, GIF will probably seem as obsolete as black-and-white MacPaint format does today. Furthermore, JPEG is far more useful than GIF for exchanging images among people with widely varying display hardware, because it avoids prejudging how many colors to use. Hence JPEG is considerably more appropriate than GIF for use as a Usenet and World Wide Web standard photo format.
GIF
Short for Graphics Interchange Format, another of the graphics formats supported by the Web. Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. Lossless compression refers to data compression techniques in which no data is lost. The PKZIP compression technology is an example of lossless compression. For most types of data, lossless compression techniques can reduce the space needed by only about 50%. For greater compression, one must use a lossy compression technique. Note, however, that only certain types of data -- graphics, audio, and video -- can tolerate lossy compression. You must use a lossless compression technique when compressing data and programs.
GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that are only a few pixels high. With an animation editor, GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. The compression algorithm used in the GIF format is owned by Unisys, and companies that use the algorithm are supposed to license the use from Unisys.
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 gray-scale images of "realistic" scenes; that means scanned photographs, continuous-tone artwork, and similar material. Any smooth 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 indeed by GIF. JPEG can't squeeze such data as much as GIF does without introducing visible defects.
Computer-drawn images, such as ray-traced scenes, 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).But icons that use only a few colors are handled better by GIF.
GIF format supports transparency. This allows a graphic designer to designate the background of the image transparent. This means that if you place a transparent GIF in a yellow table cell, the background color of that image will turn yellow.
The interlacing feature in a GIF file creates the illusion of faster loading graphics. What happens is that an image is presented in a browser in several steps. At first it will be fuzzy and blurry, but as more information is downloaded from the server, the image becomes more and more defined until the entire image has been downloaded. It's important to note that interlaced GIF files will usually be a bit larger than non-interlaced ones, so use interlacing only when it makes sense.
Generally, GIF files should be used for logos, line drawings and icons. Avoid using it for photographic images, and graphics which have long stretches of continuous-tone in them. When you're designing GIF files, avoid using gradients and turn off anti-aliasing where possible to minimize the file size.
PNG
Short for Portable Network Graphics, the third graphics standard supported by the Web (though not supported by all browsers). PNG was developed as a patent-free answer to the GIF format but is also an improvement on the GIF technique. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. PNG does not support animation like GIF does.
The PNG format provides a portable, legally unencumbered, well-compressed, well-specified standard for lossless bitmapped image files.
Although the initial motivation for developing PNG was to replace GIF, the design provides some useful new features not available in GIF, with minimal cost to developers.
Unisys announced in 1995 that it would require people to pay licensing fees in order to use GIF. This does not mean that anyone who creates or uses a GIF image has to pay for it. Authors writing programs that output GIF images are subject to licensing fees.
GIF features retained in PNG include:
Indexed - color images of up to 256 colors.
Streamability: files can be read and written serially, thus allowing the file format to be used as a communications protocol for on-the-fly generation and display of images.
Progressive display: a suitably prepared image file can be displayed as it is received over a communications link, yielding a low-resolution image very quickly followed by gradual improvement of detail.
Transparency: portions of the image can be marked as transparent, creating the effect of a non-rectangular image.
Ancillary information: textual comments and other data can be stored within the image file.
Complete hardware and platform independence.
Effective, 100% lossless compression.
Important new features of PNG, not available in GIF, include:
Truecolor images of up to 48 bits per pixel.
Grayscale images of up to 16 bits per pixel.
Full alpha channel (general transparency masks).
Image gamma information, which supports automatic display of images with correct brightness/contrast regardless of the machines used to originate and display the image.
Reliable, straightforward detection of file corruption.
Faster initial presentation in progressive display mode.
PNG is designed to be:
Simple and portable: developers should be able to implement PNG easily.
Legally unencumbered: to the best knowledge of the PNG authors, no algorithms under legal challenge are used. (Some considerable effort has been spent to verify this.)
Well compressed: both indexed-color and truecolor images are compressed as effectively as in any other widely used lossless format, and in most cases more effectively.
Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!
 Previous Article |  Next Article |