I recently was developing a web application and needed to incorporate a company logo image on the site. When asking the marketing department to send me an image of the company’s logo so that I may put the image on the site, they responded asking me what type of image format I would like I them to send…
I have no idea! (I thought to myself)
This actually caught me off guard for a second. I was guilty of not understanding the underlining differences between all the different image formats that are out there and which would make the best use case for my situation.
Rather than sit around beating my head against the desk for not knowing my image types like I should, I quickly did some research on the topic to fill the knowledge gap in my brain (Django Reinhardt was a person I found on the web that seemed to be an expert on the topic and much of this post was only possible thanks to his articles). I knew there had to be some big differences, after all, people just don’t make up new formats to screw with us users and developers (do they????).
Well, after a few hours of reading about the differences in the different image technologies, I decided to write this post to help me remember what I discovered and to hopefully help point anyone else in the right direction if they are also unfamiliar with these formats. Well without further adieu, lets jump into it!
There are some terms that we should first familiarize ourselves with that I found in many of the articles describing these formats.
First, there are two types of compression: Lossless and Lossy.
Lossless means that the image is made smaller, but at no detriment to the quality. Lossy means the image is made (even) smaller, but at a detriment to the quality. If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.
There are also different color depths (palettes):Indexed and Direct
With Indexed it means that the image can only store a limited number of colors (usually 256) that are chosen by the image author, with Direct it means that you can store many thousands of colors that have not been chosen by the author.
And now the image formats!! I am going to go over the main ones that you will find yourself using. I’m sure there are many more out there, but you will use one of the below in 99% of the cases.
So here we go…
BMP – Lossless / Indexed and Direct
This is an old format. It is Lossless (no image data is lost on save) but there’s also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that’s a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.
Good for: Nothing really. There isn’t anything BMP excels at, or isn’t done better by other formats.
GIF – Lossless / Indexed only
GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that for most cases, there can only be a maximum of 256 different colors in the file. That sounds like quite a small amount, and it is.
GIF images can also be animated and have transparency.
Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.
JPEG – Lossy / Direct
JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won’t notice. As a result it’s a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colors and so is great for photographs, but the lossy compression means it’s bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!
Good for: Photographs. Also, gradients.
PNG-8 – Lossless / Indexed
PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.
Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.
Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you, Photoshop!) There are ways to convert Photoshop PNG-24 to PNG-8 files while retaining their transparency, though. One method is PNGQuant, another is to save your files with Fireworks.
PNG-24 – Lossless / Direct
PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colors, just like JPEG). It’s very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be much bigger than JPEGs, GIFs and PNG-8s, so you still need to consider if you really want to use one.
Even though PNG-24s allow thousands of colors while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you’re not concerned about file size, and want to get the best quality image you can.)
Just like PNG-8, PNG-24 supports alpha-transparency, too.
PHEWWWWWWWWWWWWWWW!!!!
Who knew that there was so much in choosing the correct image format technology to use???? (Not me!)
I hope that helps!
P.S. For those curious, I replied to the marketing team (several hours later) with “I will have it in a GIF format please”
🙂
Leave a Reply