skip to content rich footer

stevenclark.com.au

subscibe to the StevenClark.com.au rss feed

GIF and JPG Basics for Beginners

A common beginner question in web design is what are the differences between the GIF (Graphics Interchange Format) and JPG (Joint Photographic Experts Group) image file formats? How do they work and what type of images are they best suited for optimising? The answers are relatively straight forward. The objective of these algorithms is to save an image in the highest quality possible while keeping the file sizes as low as possible.

In simple terms the GIF algorithm works by optimising the image as a series of calculations. For example, the next x number of pixels are red then the next y number of pixels are black and the next z number of pixels are pink (x, y and z being totally arbitrary examples). By gathering this information the algorithm stores the colour values of a GIF image. Its not hard to see how GIF is more efficient if there are larger areas of the same colour and less efficient if there are lots of changes in hue and saturation. Because GIF stores information in this way it is considered to be a lossless file format - it doesn’t lose information each time you re-save the image file.

And where would we see images with large areas of repeated colour values? Images with a limited number of colours (maximum 256 colours) and solid areas of colour such as logos or simple illustrations.

However, the JPG algorithm, which stores up to 16 million colours, works by pulling out just enough information to reduce the image file size while not being noticable to the human eye. The down side of this is that every time you re-save a JPG image it gets further optimised with this algorithm and very quickly deteriorates into an ugly pixelated mess. Its best to save to JPG once. Because JPG stores information in this way it is considered to be a lossy file format - it loses a certain amount of information each time you re-save.

And where would we see images with that level of detail? Photographs and highly detailed images with greater than 256 colours and without large sections of solid colour.

That being said you may find that certain borderline images save as smaller file sizes than you might have expected. For example, many illustrations save as a smaller JPG than if GIF were used. There is an amount of judgement call in the role of the web designer regarding image optimisation. I’d say that some people have made it almost an art.

To consider when you’re saving GIF are the number of colours (the palette) required for the image. If you have a 3 colour simple image you will not need the maximum 256 colour palette. And if you’re saving as JPG the aim is to choose a compromise between a low percentage and the acceptable quality of the resulting JPG. Sometimes I save an image as GIF and JPG and compare their resulting file sizes. In the end you’re looking for quality versus file size because the web has inherent bandwidth constraints. Often people transitioning from print design to the web find it an overbearing constraint to be faced with image optimisation requirements.

This article doesn’t confuse the issue by discussing PNG (Portable Network Graphics) which was designed to improve upon the GIF format. But if you want to read further about GIF’s LZW data compression, the GIF file format, the JPG file format, the PNG file format, or a comparison between image file formats, you will greatly improve your industry knowledge. Understanding, at least in the rudimentary sense, the technologies and issues relating to web design are key to becoming a professional in the industry.

Comments are closed.

Stand Up Guy

Steven Clark Steven Clark - the stand up guy on this site

An icon for overweight middle aged bogun-geek web designers. A lego block in a Meccano world. A synergy of tattoos, memories of bare knuckle fist fights, and old episodes of Star Trek. My name is Steven Clark and I'm a highly opinionated web designer with a few good ideas. I'm too old for fist fights.

My Photography Blog

My photography blog Walk a Mile in my Shoes is back up and running. Due to bandwidth issues it's only one image at a time and not full text in the RSS feed. It's licensed under creative commons , meaning not for commercial use and you need to attribute, otherwise drop me a line via the contact form on this site.

My Links Blog

You might also like to check out my links blog over at Nortypig.com to learn more about everything worth mentioning.

My Illustrations

Currently I only have a static page for illustrations but if time allows I'd like to start another illustration blog.

Declaration of Independence

Site Content

Developed and published by Steven Clark

Site Supporters

Hosted by Brett at Tashosting

skip to top of page

Currently Reading

Here Comes Everybody by Clay Shirky (cover)

Clay Shirky's Here Comes Everybody: The Power of Organizing without Organizations has been on my bookshelf for the last few months literally screaming to be read. In fact, I'm wondering how I got so sidetracked to have reached the end of the year without having consumed it. The message of the book is an area of my own fascination, the effects that our new technologies have on the way we relate to each other, and how we're now empowered in ways that were historically unheard of (or not even conceived of) not too long ago.

I'm a small town boy who grew up in the seventies, graduating high school in 1979. The world was slower - how did we survive without Wikipedia? Without MSN or Facebook? Nowdays we have flashmobbing and blogging and constant connection.