Tuesday, 6 November 2007

When to use jpgs and when to use gifs

Firstly if you want to read a comprehensive article about jpgs and gifs then go to Wikipedia. That's what i've read to understand why the two formats exist, actually the gif article is great but you'll need a maths degree to decifer the jpg article.

To summarize, they both take an image and compress it / make the file size smaller. To compress an image in this way something has to be thrown away. In jpgs this is picture information, in gifs this is colours.

I've found no simple article explaining what a jpg does to compress, probably because it's hugely complicated. So in my (idiot's) terms, 'A jpg will throw away information by grouping together pixels. This is what gives you that blurry edge on a heavily compressed jpg image. However because it can contain millions of colours, photos are still as vivid after compression.

A gif can only use 256 colours, therefore if you have turn a photo into a gif then it becomes grainy as some of the colour information has to be thrown away. However because gifs don't throw picture information away all sharp edges stay sharp.

Used in the right way you can have images online that are compressed but don't LOOK compressed. The following articles from the grammatically incorrect Web Developers Notes (Web Developer's Notes or even Web Developers' Notes!) contain good images of how the compression works and why some images need to be gif and some jpgs (the pages are fit to burst with annoying advertising but then i'm not suggesting this site is accessible).

When to use gifs - "Use gifs for line art, cartoons and images that contain text because they preserve the sharp lines of shapes and text in the graphic" ...and also animated images (as you can't animate jpgs).
When to use jpgs - "Use jpgs for photographs or other high colour images because they preserve gradients and subtle colours."

I've just found a minutely less complicated article about how a jpg compresses things, i got to the second paragraph, can you beat me?


gZa said...

Just to add that PNG files are also a nice alternative to GIF files.

I ran into a problem today for instance when I was 'stealing' the rather cool blockquote tags from the Wordpress Regulus Theme. The problem I had occurred when I was changing the colour of the GIF file to match my blog colours.

Unfortunately the colour I wanted the GIF to be was not one of the 256 colours that the format allows and thus there wasn't the EXACT colour match I required. Now I could have used a JPEG but due to the nature of the image (two colour, sharp edges) I really didn't want to.

So this is where the PNG format came into its own. PNG files are kind of like a GIF file Mark II. i.e. they have all the functionality of a GIF file only without the colour restrictions. They did used to have browser compatibility issues however these are almost a thing of the past. I say almost as (surprise, surprise) Internet Explorer has certain problems with them and in some cases is unable to render the colours correctly, which dropped me right back at square one, as you will see if you visit the blog entry I was working on - it looks fine with Firefox (Hurray!) but the colour of the huge quote's surrounding area is (ever so slightly) different in IE (Boooo!).

Another example of this IE anomaly can be found here along with a fix, that I suppose I should try and implement, however I'll be leaving it for the time being in order to illustrate IE's shitness!

Ed Sexton said...

Aaaaah! I always wondered what the point of PNG's was just never bothered to find out.

If i was to respond in an annoying accessibility way i'd say only use 256 colours on your website and then you can use a gif.

However I admit that that's a crap answer, why be limited by Microsoft's inability to produce useful software.

It's probably worthwhile adding that if you anyone reading this is using Internet Explorer, then please stop for the sake of your own sanity and get Firefox.

gZa said...

It's not a case of only using 256 colours - I'd guess my blog uses less than 10 total, sans pictures - it's a case of only using the 256 shades of colour that the GIF format allows, some times referred to as Web Safe Colours

e.g. I was trying to match the colour #C0D2F0 but the nearest GIF can do is round it off to the web safe #CCE

Ed Sexton said...

I've just read this post about pngs.

Could they be taking over from gifs?!