Photoshop

Digital Graphics

GIF Format

File types have been developed to designate pre-defined information and compression methods about an image. File types can be described as bitmap or vector based. The file type can usually be identified by the filename extension at the end of the name, as in 'banner.gif' or 'photo.jpeg'.

Most Web browsers currently support three image file types: GIF, JPEG and PNG.

GIF Format Defined

Graphic Interchange Format (GIF) uses a maximum of 256 colours (8-bit colour) and uses combinations of these to simulate colours beyond that range (this is called dithering). This format is best for displaying images such as logos, icons, buttons and other images with uniform colours and tones as well as limited detail. The GIF format is supported by all browsers.

There are two versions of the GIF format: GIF87 and GIF89a. GIF87 is an older version. New features were introduced with GIF89a such as interlacing and animation.

GIF images have some extra functionality that JPEG and other file types do not. You can save GIF images with the following features:

Indexed Colours

GIF is an indexed colour system. That means the colours on your system may not be the exact colours that are on the other user's system. It should be close, but there is no guarantee that it will be exact. You can choose between different colour palettes for your images when you create them. For example, you can choose colours that are native to Windows, Macintosh, or Web-safe (we will discuss Web-safe colours in more detail later).

In addition to the different colour palettes you can create, you can also control the bit-depth. If you are using a black and white image, you can save it as a 1-bit image. This may seem easy (and it is), but other image formats cannot always do this. JPEG, for example, always stores and transmits a 24-bit, 16.8 million colour palette, even if the image is black and white. This, of course, affects download times.

This is yet another example of why it is important to understand file formats. The optimizing of your images depends on it.

GIF has been causing quite a stir for legal licencing issues over the last few years; this has caused many people to move away from the GIF format. PNG was created to replace GIF. We will cover PNG in a bit.

Dithering

Part of the reason GIF images can be kept so small is that they 'dither' colours to create pictures that look like they may have more colours. Dithering is the effect of using a pattern of limited colours to trick the mind into seeing more colours than are there. For example, if you just have black and white pixels, you can simulate grey by alternating black and white. More black pixels will make darker grey, while more white pixels will make lighter grey. You still have only two colours, but you can fake more. In the examples below, the original image on the left contains four colours. The other images use two colours (black and white) and dithering to simulate the effect of four colours.

Types of Dithering

no dither	diffusion dither	pattern dither	noise dither

Lossless

The proprietary lossless encoding/decoding compression scheme (called LZW) that GIF uses to shrink the size of an image file is perfect for the simple solid colour icons that are used on the Web. A lossless compression scheme means all the information of the picture is retained; nothing is lost.

As we mentioned before, GIF files are bitmap images. Here is an analogy of how the lossless compression of GIF files works. We will pretend we have a picture of the letter T, let's assume that 'b' stands for a black pixel, and 'w' stands for a white pixel. The picture is 100 pixels (10x10) uncompressed. This is what it might look like:

b b b b b b b b b b
b b b b b b b b b b
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w

If we compress the file, we can encode and remove the redundant information, leaving a lot less information to download. Now, let's say that the image compressed as a GIF looks like this:

10b
10b
4w 2b 4w
4w 2b 4w
4w 2b 4w
4w 2b 4w
4w 2b 4w
4w 2b 4w
4w 2b 4w
4w 2b 4w

As you can see from this simple example, the GIF compression has a lot less information to transmit over the Internet to represent the exact same image. After the browser decodes the GIF, it will look like this:

b b b b b b b b b b
b b b b b b b b b b
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w
w w w w b b w w w w

Exactly what we had before (lossless), but it took much less time to send. Sounds too good to be true, right? Well, there are trade-offs. If the image is complex like a photograph, the overhead of the compression may actually make the compressed image larger than the original! The amount of data needed to describe a detailed photograph is why they aren't suited to the GIF format.

Now that you have seen this example, which image would you be able to compress into a smaller file: a white box that was 100x100, or a checkerboard pattern of black and white that was 100x100? Why did you choose that answer?

Compression Ratio

You cannot change the amount of compression that occurs when you save an image as GIF. The algorithm^* is fixed, unlike some other compression formats. JPEG, for example, employs a variable compression scheme that allows the user to trade quality for size. We will explore this concept more shortly.

Interlacing

If you save a GIF image as interlaced (GIF89a), the browser is able to display the image as it loads, gradually getting crisper and clearer until it has loaded. The image tends to appear in waves. This allows the user to get an idea of what the image is long before it is fully loaded. This was very important when surfing over a modem. These have slightly larger file sizes than non-interlaced GIFs, so you have to decide whether the extra download time is worth it or not. When GIFs are not interlaced, they load one line at a time from top to bottom.

Transparency

You can set a single colour to be transparent; that is, it will allow the background colour or image to show through it. This is used most commonly to make a solid coloured background of an image transparent. Since all images are rectangles, you can make the background transparent to make it look like it is round or curvy.

Animated GIFs

GIF images can also be animated. By linking several images together and having them replace each other like a simple flip-book, the GIF89a format allows you to create simple animations. These are used a lot in banner ads. They have uses, but they can also get annoying. Netscape and Internet Explorer both display animated GIFs but some older browsers cannot and may be only display the first image in the sequence.

Here is an example of an animated GIF file. These files can have a higher file size and take longer to download.

These animations are being replaced by vector-based graphics like Flash, SVG, and others with much faster download times.

GIF Format Summary

Images are compressed in different file formats. Each file format has advantages and disadvantages.
GIF and JPEG are two very common bitmap file formats on the Web.
Graphic Interchange Format (GIF) uses a maximum of 256 colours but can simulate more by dithering.
GIF is great for cartoons, logos, icons, buttons, and similar images that have limited colour and detail.
GIF is a lossless file compression format. The information and detail of the original is preserved.
You can interlace GIF89a images to allow users to get an idea of what an image looks like before it is fully loaded.
You can choose a colour to be transparent in GIF89a images. This allows you to make rectangular images appear as if they had irregular shapes.
Several frames or images can be linked together to create an animated GIF89a file. These files allow you to control the time between frames.
Animated GIFs can be quite large and can take a long time to download if not optimized.
GIF uses an indexed colour system that lets you choose a colour palette and bit-depth to reduce download file sizes.
GIF uses a proprietary compression scheme that software vendors are supposed to pay royalties on. The legal issues have encouraged the development of the PNG file format.

Coming Soon:

Feb 13: ISSD 24 - XML

Feb 14: Web Design Level 4: XHTML Advanced

Feb 21: ISSD 23 - Web 2.0 Technology

Feb 23: Facebook for Business
Hours: 2
Cost: Free!

Feb 25: Search Engine Optimization (SEO)
Hours: 2
Cost: Free!

Feb 25: Search Engine Marketing (SEM)
Hours: 2
Cost: Free!

Feb 27: ISSD 24 - OLDB (Online Databases with MySQL and PHP)

Mar 05: ISSD 23 - Ajax

Mar 20: Web Design Level 5: DHTML Introduction

Photoshop - TOC - Introduction - Books -
Digital Graphics - Links - Questions -
1 - 2 - 3 - 4 - 5 - 6 - [ 7 ] - 8 - 9 - A -