Since computers understand everything in terms of 1s and 0s (that is, all data is converted into a form that can have only two states, a presence of a signal or an absence of a signal), if you want to store information about a picture on a file on your computer, the picture would be divided into a large number of units, called pixels. A pixel is the smallest part of an image. Then, you could use a sequence of 1s and 0s to represent the colour of that pixel.
Let's consider an image that contains only 4 pixels, maybe something like this.
The first pixel is black. Call this 00000000. The second pixel is white. Call this 11111111. Similarly you could assign values for the other pixels. You could have numbers like 11001001 representing colours between black and white.
This way, you could simply break the whole image up into it's tiniest portions, that is, the pixels. Since each pixel can have only one colour, you could use a sequence of 1s and 0s and literally describe the whole image. But to save space, you could analyse the picture data, and find a more effective way of storing the same image. For example, if you have a hundred pixels in an image, but all of the same colour, you could say that the first pixel is black, and all the neighbouring pixels are of the same colour. Many people have come up with many ways of effectively storing images on a computer - using techniques that accurately describe the image but take less space to store.
These different ways of storing images on a computer represent different types of files, that is, they are different types of image formats. (Something similar to this is the way you store text - you could type some text in Notepad and save it as a TXT file, or alternatively, you could do the same thing in Microsoft Word and store it as a DOC file. DOC files allow you to use different fonts, colours, etc., but TXT files only store plain text).
Here I've discussed the three most common file formats.
If you've used Microsoft Paint, you'll be familiar with the Bitmap file format. This type of file has the extension .BMP. Bitmaps store the image information like I described above - each pixel's information is stored individually. Of course, this means that the size of the image depends totally on the number of pixels in it - your Windows Desktop Background image is probably 800 x 600 pixels in size, which means it contains 4 80 000 pixels! If you use 16 bits (16 ones and zeros) for each pixel, you'd end up using 76 80 000 bits, which comes to 960 000 bytes or 960 KB approximately.
There are bitmaps that use 8 bits per pixel, which means you can only represent 256 colours. 16-bit bitmaps can store thousands of colours, whereas 24-bit bitmaps can store 16.7 million colours (obviously taking up more and more space as the number of bits requires increases).
JPEG stands for Joint Photographic Experts Group. The Group created this format which is optimised for storing 24-bit or True Colour images.
The JPEG format works like this - it applies some compression algorithms to the entire image information. The image is analysed, only important colours are stored, and some colour information is neglected. Doing all this means you can store the image in a very small space.
Let's say you have an image that consists of 4 80 000 pixels, that's completely red in colour. The Bitmap and JPEG formats would work something like this.
This of course is an over simplification, but you get the idea. If you have a lot of variations in the colours, the JPEG format decides which colours to keep and which to discard. This means that the JPEG format is a lossy format - when you store an image as a JPEG, you always lose some colour information.
JPEG files have the extension .JPG. You can use any standard image editing software like Paint Shop Pro or Adobe Photoshop to create them or convert Bitmap images into JPGs.
While saving an image as a JPEG, you can actually control the amount of compression that is applied, that is, you could choose Large Compression, which would result in a very small file but of low quality. Similarly, Low Compression means High Quality but more disk space.
The CompuServe Graphics Interchange format or GIF format is capable of storing only 256 colour images, but it also compresses the image information. GIF is also capable of storing images that have transparent portions. These files have the extension .GIF. GIF files can also store animation - that is, a sequence of images that will be repeatedly looped.
|Format||No. of colours||Transparency||Compressed||Use|
|Bitmap||256, thousands or even 16.7 million||Not supported||No||Storing any type of pictures on your computer. Retains all the colours and doesn't lose any information.|
|JPEG||Only True Colour (16.7 million colours)||Not supported||Yes, and you can control the amount of compression||Storing Photos. Don't use JPEG to store images that contain sharp, well-defined lines or they will appear blurred.|
|GIF||256 Colour images only||Supported||Yes||Storing images that contain sharp well defined areas, like logos, buttons containing text, or anything that must be clear and at the same time contains only a few colours.|
A GIF image. Since only 256 colours are supported, you can see some regions where the 'nearest colour' has been used.
The same image, stored as JPG using less compression. High quality but still, the colours are not that well defined and are a bit blurred.
JPG using large compression. File size is very small, but I don't think anyone would use a picture that looks this blurred.
Click here to see the Bitmap version of the above image - that stores the colours as they are meant to be.
In the above pictures, the GIF is 13.7 KB, compressed JPG is 9.28 KB, and with larger compression the size is further reduced to just 2.97 KB. The actual Bitmap is 65.9 KB. This is a 24-bit True Colour original image that is 300 x 75 pixels in size.
Two pictures of Sarah Michelle Gellar. The first is a GIF image, while the second is a JPG. You can easily see that JPG is ideal for photographs - the GIF image can store only 256 colours and must therefore select colours that match the original, leading to a loss of quality.
For all graphics used on your websites, use ONLY GIFs or JPEG images. Never use Bitmaps.