| |||||||||||||||||
 | |||||||||||||||||
| GIF 64 | |||||||||||||||||
 | |||||||||||||||||
| GIF 256 | |||||||||||||||||
| Transparent Images | |||||||||||||||||
| One version of the GIF format -- GIF89a -- has the capability of producing transparent images. You can specify one particular color in the image which is then rendered transparent when the image is displayed on the page. Most often this is the single background color in the picture. When set to transparent, the background disappears, leaving only the foreground image displayed against the page background. The following figure shows the transparent effect. | |||||||||||||||||
| Both the standard and transparent images are created on a white background and are saved as GIF89a files. The "Transparent" image, however, has the color white selected as the transparent color. When the images are displayed on a textured background, the white background of the transparent image is rendered transparent to permit the page background to show through. Of course, if the background color of the page is the same as the background color of the image, then there is no need to make the picture background transparent. | |||||||||||||||||
| Interlaced Images | |||||||||||||||||
| Another feature of GIF89a format is its ability to produce interlaced images. Normally, when an image is loaded into the browser it is revealed a few lines at a time beginning at the top of the picture. If the file size is large and the connection speed is slow you see the picture revealed a little at a time until the complete picture is downloaded. | |||||||||||||||||
| If you choose to save your images as interlaced then the entire picture is revealed at increasingly higher resolutions. That is, it is first revealed as a low-resolution version of the entire picture. As more of the picture is downloaded it becomes sharper and sharper as more details are added. Although the time taken to download an interlaced image is the same as for a regular image it often appears to download faster since the complete, although not final, image is viewable much quicker. Whether you use standard or interlaced images is more a personal preference than technical need. | |||||||||||||||||
| Animated Images | |||||||||||||||||
| Multiple single images can be packaged together to produce animated GIF images. These are image files containing two or more images that are revealed in a timed sequence. | |||||||||||||||||
| A slightly different animation technique is used in other animation programs. Some GIF animators require the creation of separately saved GIF images. Each image represents a different frame of the animation. These individual GIF files are imported into the software and are converted into sequenced cells of the animation. | |||||||||||||||||
| An animated GIF file is retrieved by the browser just like any other GIF file. When displayed in the browser the file produces the animation. Of course, if you are not particularly skilled in working with graphics or you do not have the patience to put together the series of pictures to be animated you can probably find animated GIF images on the Web that suit your needs. |
| PNG Image Format |
| A newer format that is increasing in popularity is PNG (Portable Network Graphic) format, pronounced "ping." This format is used for the same purposes as GIF; however, it produces smaller file sizes and faster loading times without loss of resolution quality. It can reveal interlaced images and produce them faster than GIF format. |
 |
| PNG8 |
 |
| PNG 24 |
| The most noticeable difference between PNG and GIF formats occurs with transparent images. PNG format permits up to 254 levels of transparency, allowing images to better blend with the background color or pattern of a page. |
| JPEG Image Format |
| The JPEG (Joint Photographic Experts Group) format is designed for storing photographic images with millions of colors at different compression rates. During compression, graphics programs use special algorithms to sample and render colors close to those in the original picture but without retaining full color information in order to minimize file sizes. |
| You normally have a choice of compression settings when saving pictures in JPEG format. Smaller file sizes normally mean greater loss of picture details. Still, with moderate compression you can display an image on screen that appears very similar in quality to the original picture. The four pictures below show the original image and three compressions along with resulting file sizes.You can notice a loss of sharpness in those images with higher compressions and smaller file sizes. |
| JPEG images at various compressions |
| For Web images that are displayed at normal 72 pixels per inch, compression percentages that reduce file sizes to as small as 1/8 to 1/4 of original file sizes still retain satisfactory visual precision. |
| JPEG images are saved as files with the .jpg extension. JPEG format does not support interlacing or transparency; plus, it is not a good format for text or line drawings since the precision needed to produce straight lines or hard edges is not as accurate with compression. |
 |
| JPEG image with High Compression[Low Quality] |
 |
| JPEG image with Low Compression [High Quality] |
| Difference between GIF, PNG and JPEG |
| The GIF Format |
| The GIF format is one of the most popular formats on the Internet. Not only is the format excellent at compressing areas of images with large areas of the same color, but it is also the only option for putting animation online (unless you want to use Flash or other vector-based animation formats, which typically cost more). The GIF89a format also supports transparency, and interlacing. |
| GIF files support a maximum of 256 colors, which makes them practical for almost all graphics except photographs. The most common method of reducing the size of GIF files is to reduce the number of colors on the palette. It is important to note that GIF already uses the LZW compression scheme internally to make images as small as possible without losing any data. |
| Transparency |
| As I mentioned above, the 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. |
| Interlacing |
| 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. |
| When to use them |
| 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. |
| The JPEG Format |
| The JPEG format, with its support for 16.7 million colors, is primarily intended for photographic images. The internal compression algorithm of the JPEG format, unlike the GIF format, actually throws out information. Depending on what settings you use, the thrown out data may or may not be visible to the eye. Once you lower the quality of an image, and save it, the extra data cannot be regained so be sure to save the original. |
| Progressive JPEG's |
| Any JPEG file can be saved as a Progressive JPEG. This is very similar to the interlaced GIF. As with GIF, this presents a low-quality image to your visitor at first, and over several passes improves the quality of it. Some graphic editing tools allow you to specify the number of passes before the image downloads completely. |
| When to use |
| As a rule, the JPEG format should be used on photographic images, and images which do not look as good with only 256 colors. |
| The PNG format |
| The third, and newest, file format that's widely supported by the Web is PNG (pronounced Ping). PNG was developed to surpass the limitations of GIFs, and as a means by which developers can avoid having to worry about the patent licenses associated with other formats. PNG was designed to offer the main features of the GIF format, including streaming and progressive file formats. It also provides greater depth of color, catering to images up to 24 bit in color. |
| It's expected that support for PNG will be widespread in the near future, although it will never completely replace GIF, as it doesn't support animation. |