To GIF, or not to GIF?
Written February 2, 2009. 3 comments.
I’m frankly surprised to see that in this day age, many designers still don’t know when to use the right image format for the right job. Before I get stuck into this, here’s a quick primer for beginners.
The most common image formats for the web are:
GIF: Limited colour range, single colour transparency
JPG: Large colour range, no transparency
PNG: Large colour range, full transparency
Each format has different capabilities and they need to be used properly if you want the best possible appearance and most optimal loading of a web site.
When to use a GIF
Even with their limited palette, GIFs (FYI it’s pronounced ‘gif’, not ‘jif’) are the most suited format for where you have a less complex blocks of colour. Let’s take the GIF below for example. Notice the colours still look sharp.
Now look at the same button as a compressed JPG:
Can you see the difference? It’s particularly noticeable on areas where there isn’t much variation, where a JPG will show all its nasty compression artefacts.
You know what this means, don’t you? When you go about slicing your design, you’re going to have to make a conscious choice on every part on if it needs to be a GIF or a JPG. If you don’t, and you just make all your design elements JPG, the finished product will have an unpolished, grubby feel to it. But don’t worry because it’s not that hard. If the image is low complex with what looks like a limited colour range, make it a GIF.
When to use a JPG
JPG’s have an enormous colour range and are best used when displaying complex images, such as photographs. And even though JPG is a compressed format, compression artefacts can usually get lost in the photo. This is also why the aforementioned GIF format is not suited to photographs. Lets look at a couple of examples.
Believe it or not, this JPG is full of compression artefacts, but as mentioned it’s difficult to notice among the complex details.
Now the same image in GIF format:
Because if the limited colour palette in a GIF, you can clearly notice banding in several areas where the format has tried its best to match the original complex colour.
So the rule to remember here is that when it comes to photography or design elements that contain complex information, a JPG is probably the better choice.
When to use a PNG
When it comes to transparency, PNG is going to be your best option. PNG’s are also not limited to a small amount of colours like a GIF, so combined with the formats transparency support technically there is no reason why you couldn’t always use them for all your design elements or even photographs.
I did say there was no technical limitation, but there certainly are other limitations. PNG’s don’t compress very well, and will nearly always have a significantly larger file size than a JPG or GIF equivalent. Using examples:
These images, GIF, JPG and PNG, are 3k, 2k and 9k respectively.
And this time using a photograph:
GIF, JPG and PNG, are 30k, 18k and 75k respectively.
My advice is to only use a PNG where transparency is required to solve a design issue. Otherwise too many of them will make for a slow loading web site for people with slow internet connections. Also consider that PNG transparency is not supported on older browsers like Internet Explorer 6, but you can get them to work with one of the many great scripts out there. But does anyone really care about IE6 any more? Did I just say that out aloud?
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
BTW your captcha is the best.