To be specific once you finish reading this article you'll be able to answer the following questions:
1. I need transparency in my image. What image format should I use?
2. I took a screenshot of my desktop. What image type is the best?
3. I'd like to put a photo on my website. What image format yields the lowest file size?
Comparison of Common Image Formats
JPEG, GIF, PNG, ICO, TIFF, BMP are six of the most common formats for images and graphics. They each have their advantages and disadvantages. Some support many colors; others support only a few. Some require much less disk space to store than others. Here is a table that compares the critical aspects of each of them. 'Lossy' means the image is stored at a less quality level in order to reduce image file size. 'Lossless' means the image is stored with NO quality loss.
| JPEG/JPG | GIF | PNG | ICO | TIFF/TIF | BMP | |
| Short for.. | Joint Photographic Experts Group | Graphics Interchange Format | Portable Network Graphics | Windows icon | Tagged Image File Format | Bitmap |
| Release Date | September 1992 | 1987 | October 1, 1996 | November, 1985 | 1986 | November, 1985 |
| Browser Support (Major browsers include Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera.) | All Major Browsers | All Major Browsers | All Major Browsers | All Major Browsers (only as favicon) | Safari and Internet Explorer | All Major Browsers |
| Number of Colors Supported | 16.7 million | 256 | 2^48, or 2.81475e14 | 16.7 million | 16.7 million | 16.7 million |
| Lossy or Lossless? | Lossy | Lossless | Lossless | Lossless | Can be lossless or lossy, but used exclusively as a lossless format | Lossless |
| Support Animation? | No | Yes | No | No | No | No |
| Support Transparency? | No | Yes | Yes | Yes | Yes | No |
| Best Use Application | For complex images such as a colorful photo | When you need simple animation or when you need transparency in a single, simple image | For simple images such as a desktop screenshot | Use ICO only for favicons as ICO is the only format supported by all major browsers. | Professional photos with no loss of details | You should never use BMP. |
You should NEVER use TIFF or BMP for images that you display on a website! If you beg to differ let me know!
Conclusion
So here's the conclusion of when you need which image format.
When you need to store on your computer or a hard drive a professional photo where quality is a must, pick PNG or TIFF. Use Microsoft Paint to save the same photo in PNG and in TIFF separately to find out which format yields a smaller size. Based on my experience they yield equally big files.
When you need to display photos on your website then use JPG/JPEG. JPEG does an excellent job of reducing file size at a small expense of the image quality, and the loss in quality is mostly imperceptible to our eyes anyway.
When you need transparency in a simple image use GIF. GIF yields a much lower file size. I've tested storing a 100 pixel by 100 pixel image and a 500 pixel by 500 pixel image as GIF versus as PNG and the savings in size when stored as GIF go from 12% to 35%! HOWEVER keep in mind a GIF image only supports up to 256 colors!
When you need transparency in a not-so-simple image use PNG. Basically if your image contains more than 256 colors then it is considered not-so-simple.
When you need to play a simple animation go with GIF. Note each frame of the animation should not contain more than 256 colors.
What if you need a complicated animation? Then use Adobe Flash!
When you need to store a simple image or an image with several colors in it go with PNG. My experience suggests a screenshot of your desktop fits in this category. When in doubt you can also use Microsoft Paint to find out whether PNG or JPEG yields a lower file size.
You should use ICO when you are creating 16x16 favicons for your websites.
Again you should NEVER use BMP.
So here's a test for you. What image type should you use to save a complex photo with some areas of transparency in the photo?
The answer is PNG.
If you have any questions let me know and I will do my best to help you!
Posts
