Images

There are lots of different types of images available and it can be quite confusing which images are best to use for web site creation. The most abundantly used file types for A JPG Image images for web site creation are as follows:

GIF files
JPEG files
Animated GIF files
PNG's

The two most common by far are GIF and JPEG files. Both of these formats encode static (as opposed to animated) bitmap images.

In a bitmap image, the image file has to define the exact colour of every pixel in the image. For example, imagine a typical bitmap on the web that is 400 by 400 pixels. To define this image, you would need 24 bits per pixel for 160,000 pixels, or 480,000 bytes. That would be a huge image file, so both the GIF and JPG formats compress the image in different ways.

In a GIF image, the number of colours is reduced to 256 and then "runs" of same-colour pixels are encoded in a color+numberOfPixels format. For example, if there are 100 pixels on a line with the colour 41, the image file stores the colour (41) and the length of the run (100). This makes a GIF file great for storing drawings that have lots of same-colour pixels.

A JEPG file uses a much more complex technique to compress images, like photographs, A PNG Image where the colour of every pixel is different. A GIF file creates a perfect reproduction of the original, while a JPG does not.

An animated GIF is a sequence of GIF files all bonded together and displayed one after the other. With enough panes, you can get very realistic animations. However, the size of the file is the sum of the GIF files used to create the sequence, and that can add up quickly.

A PNG is the best of both worlds in a sense because it does not lose quality in the way that a 256 coloured GIF would, but instead retains the colours and depths as a JPEG does but allows for alpha transparency, that is the ability to make images "see-through". Unfortunately this is not cross-browser compliant without using hacks, but is part of the CSS3 outline and should be readily used in the next generation of web browsers. There are two types of PNG, 8 and 24. 8 is a GIF but with the possibly of better colour depths and quality. The PNG 24 is the one that is able to use alpha transparency.