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.
