Images makes web pages more appealing and a pleasure to watch but there are various image formats out of which three image formats which are popular and used extensively on web pages are discussed.
Graphics Interchange Format ( GIF ) – Images in this format are used for banners, clip art, and buttons as they can have a transparent background where in parts of the image, the background will be allowed to show through. But, they are usually large file size, not compressed as a jpeg, which results in slow load times and large transfer rates. Gifs are limited to the 256 color scheme. It stores the palette of colors it used to store the image and is called as lookup table
They use LZW compression which is lossless compression technique or no data is lost and therefore there is no loss of quality. They can store more than one frame (or copy of the image) within a file, thus they can rotate between the various frames and create a simple animation called as animated GIFs.
Joint Photographic Experts Group (JPEG) – Images in JPEG format have an unlimited color palette, and have a high compression rate thus reducing load times and disk space. They are a standard for storing and compressing images such as photographs that use a wide range of colors.
It discards color data that people would not normally perceive during compression, thus it uses lossy compression. Amount of compression can be varied and hence the resultant file size from 100% quality means no compression.
It does not allow for transparent backgrounds, but have good size/quality ratio. They are used for photo galleries, or artwork for more image detail but they are usually avoided for graphical design.
Portable Network Graphics (PNG) – It is an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and true color images are supported, plus an optional alpha channel. Sample depths range from 1 to 16 bits. PNG also compresses better than GIF in almost every case (5% to 25% in typical cases).
Rules to follow for images
- JPEGs for photo-realistic pictures with a lot of detail.
- GIFs or PNGs for images with flat color like diagrams, text, or logos