Which image file type to use - GIF, JPEG, PNG
There are quite a number of image file types available such as PNG, GIF, JPEG and etc. What does each of these file types mean, and which format should we use especially in web site?
In the case of web site design, in order for users to view an image, they need to download it. In this case, slow internet connection or limitation of mail box size is something to be considered. In the worst case, an email system may reject to receive any email that is too big in size. Graphics in their natural state are too big to be quickly downloaded over the Web, so you have to compress them. As such, file size is usually the most important criteria in choosing a format for the web, or to send images by email.
The other important criterion when choosing an image format is image quality. There is typically a trade off between file size and quality - you can compress an image to a smaller size, however, you may need to sacrifice its quality. So, having a fair balance between loading time and quality of the image is not an easy task.
GIF — Graphics Interchange Format
GIF is an indexed format. This means that it uses a fixed list of colors instead of encoding every color separately.
Graphic images are normally not continuous tone. Graphics are drawings, not photos, and they use relatively few colors, perhaps less than 16 colors in the entire image. GIF is very efficient for images with a small number of colors, like a five-color corporate logo.
GIF files can be saved with a maximum of 256 colors (This is called as 8-bit color - 256 is 2 to the 8th power). Typical photographs have many more colors than that, so saving a photograph in GIF format will usually result in very poor quality. Even worse, with 256 colors, the file will usually be larger than a full-color JPEG version of the same image! The lesson is clear: don’t use GIF for photographs, only for simple icons and logos.
The GIF format offers two very useful features: transparency and animation. With transparency, you can make an icon with a clear background. This means that if you place a transparent GIF in a blue table cell, the background color of that image will turn blue. GIF only allow single-bit transparency. This means it does not allow for partial transparency; a pixel is either fully transparent or not transparent at all.
GIF can be animated - which allows you to create images that move. This is another reason GIF became so successful. Most web browsers support animated GIF images.
GIF can also be interlaced. This is a way of saving a graphic so that it loads progressively — appear first with poor resolution, low-detail version is loaded, and then successive layers of detail are added. This allow the viewer to get a quick idea of what the picture will look like while waiting for the rest. This is beneficial in many situations, as it gives the impression of a speedier download.
JPEG - Joint Photographic Experts Group
The 16-bit JPEG format was designed with photographs in mind. It is capable of displaying millions of colors at once, without the need for dithering, allowing for the complex blend of hues that occur in photographic images.
Photo images have continuous tones - adjacent pixels often have very similar colors, for example, a blue sky might have many shades of blue in it. Normally this is 24 bit RGB color, or 8 bit grayscale, and a typical color photo may contain perhaps 100,000 colors, out of the possible set of 16 million colors in 24 bit RGB color. As such, for sharing full-color photographs, the best format to use is usually JPEG, not GIF.
A JPEG file is usually having an extension of “.jpg” or ".jpeg". JPEG images are highly compressed and are encoded in full color, so it’s a very efficient format for photographs or other images with a wide range of colors.
JPEG permits a greater degree of compression than the GIF alternative, enabling quicker downloading times for larger graphics. However, the drawback to this format is that the compression is lossy. That means that every time you read a JPEG file, make a change, and write the file back to disk, the image quality degrades slightly. Do not use JPEG for images you plan to edit over and over. But as a format for exchanging photographs with other people, JPEG excels. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage.
PNG — Portable Network Graphics
PNG(pronounced Ping) is a relatively new format, originally intended as a replacement for GIF because of legal issues regarding the GIF format.
PNG can be used for full-color images, like JPEG, or for indexed images, like GIF. In full-color mode, it is not nearly as efficient as JPEG; a PNG will be much larger than a JPEG of the same image. However, PNG is the only lossless format that web browsers support - if you want to display a photograph exactly without loss on the web, PNG is your choice. This makes full-color PNG a very good format for storing original copies of your own images if you might want to edit them later.
If you have an image with large areas of exactly uniform color, but contains more than 256 colors, PNG is your choice as PNG supports 16 million colors, not just 256. Nearly all web browsers support PNG, so it is safe to use PNG images on web pages. PNG supports transparency, like GIF, and it also supports partial transparency so you can have translucent areas.
However, some browsers (such as Internet Explorer) do not support PNG transparency, so transparent PNG images on a web page may not always display properly.
PNG does not support animation. For animated images, GIF is pretty much the only choice.
Summary
Choosing the right file format to save your images is of vital importance. Each file format is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Web pages require JPEG or GIF or PNG image types, because that is all that browsers can show. On the web, JPEG is the best choice (smallest file) for photo images, and GIF is most common for graphic images especially if the image is black and white. High quality images and personal artwork that is not black and white should be in PNG.
In the case of web site design, in order for users to view an image, they need to download it. In this case, slow internet connection or limitation of mail box size is something to be considered. In the worst case, an email system may reject to receive any email that is too big in size. Graphics in their natural state are too big to be quickly downloaded over the Web, so you have to compress them. As such, file size is usually the most important criteria in choosing a format for the web, or to send images by email.
The other important criterion when choosing an image format is image quality. There is typically a trade off between file size and quality - you can compress an image to a smaller size, however, you may need to sacrifice its quality. So, having a fair balance between loading time and quality of the image is not an easy task.
GIF — Graphics Interchange Format
GIF is an indexed format. This means that it uses a fixed list of colors instead of encoding every color separately.
Graphic images are normally not continuous tone. Graphics are drawings, not photos, and they use relatively few colors, perhaps less than 16 colors in the entire image. GIF is very efficient for images with a small number of colors, like a five-color corporate logo.
GIF files can be saved with a maximum of 256 colors (This is called as 8-bit color - 256 is 2 to the 8th power). Typical photographs have many more colors than that, so saving a photograph in GIF format will usually result in very poor quality. Even worse, with 256 colors, the file will usually be larger than a full-color JPEG version of the same image! The lesson is clear: don’t use GIF for photographs, only for simple icons and logos.
The GIF format offers two very useful features: transparency and animation. With transparency, you can make an icon with a clear background. This means that if you place a transparent GIF in a blue table cell, the background color of that image will turn blue. GIF only allow single-bit transparency. This means it does not allow for partial transparency; a pixel is either fully transparent or not transparent at all.
GIF can be animated - which allows you to create images that move. This is another reason GIF became so successful. Most web browsers support animated GIF images.
GIF can also be interlaced. This is a way of saving a graphic so that it loads progressively — appear first with poor resolution, low-detail version is loaded, and then successive layers of detail are added. This allow the viewer to get a quick idea of what the picture will look like while waiting for the rest. This is beneficial in many situations, as it gives the impression of a speedier download.
JPEG - Joint Photographic Experts Group
The 16-bit JPEG format was designed with photographs in mind. It is capable of displaying millions of colors at once, without the need for dithering, allowing for the complex blend of hues that occur in photographic images.
Photo images have continuous tones - adjacent pixels often have very similar colors, for example, a blue sky might have many shades of blue in it. Normally this is 24 bit RGB color, or 8 bit grayscale, and a typical color photo may contain perhaps 100,000 colors, out of the possible set of 16 million colors in 24 bit RGB color. As such, for sharing full-color photographs, the best format to use is usually JPEG, not GIF.
A JPEG file is usually having an extension of “.jpg” or ".jpeg". JPEG images are highly compressed and are encoded in full color, so it’s a very efficient format for photographs or other images with a wide range of colors.
JPEG permits a greater degree of compression than the GIF alternative, enabling quicker downloading times for larger graphics. However, the drawback to this format is that the compression is lossy. That means that every time you read a JPEG file, make a change, and write the file back to disk, the image quality degrades slightly. Do not use JPEG for images you plan to edit over and over. But as a format for exchanging photographs with other people, JPEG excels. In practical use, a compression setting of about 60% will result in the optimum balance of quality and filesize, without letting the lossy compression do too much damage.
PNG — Portable Network Graphics
PNG(pronounced Ping) is a relatively new format, originally intended as a replacement for GIF because of legal issues regarding the GIF format.
PNG can be used for full-color images, like JPEG, or for indexed images, like GIF. In full-color mode, it is not nearly as efficient as JPEG; a PNG will be much larger than a JPEG of the same image. However, PNG is the only lossless format that web browsers support - if you want to display a photograph exactly without loss on the web, PNG is your choice. This makes full-color PNG a very good format for storing original copies of your own images if you might want to edit them later.
If you have an image with large areas of exactly uniform color, but contains more than 256 colors, PNG is your choice as PNG supports 16 million colors, not just 256. Nearly all web browsers support PNG, so it is safe to use PNG images on web pages. PNG supports transparency, like GIF, and it also supports partial transparency so you can have translucent areas.
However, some browsers (such as Internet Explorer) do not support PNG transparency, so transparent PNG images on a web page may not always display properly.
PNG does not support animation. For animated images, GIF is pretty much the only choice.
Summary
Choosing the right file format to save your images is of vital importance. Each file format is suited to a specific type of image, and matching your image to the correct format should result in a small, fast-loading graphic. Web pages require JPEG or GIF or PNG image types, because that is all that browsers can show. On the web, JPEG is the best choice (smallest file) for photo images, and GIF is most common for graphic images especially if the image is black and white. High quality images and personal artwork that is not black and white should be in PNG.
Comments
Post a Comment