Images
The two main image types used on websites are .gifs and .jpgs. When you save a picture for your website is important to choose the right format.
Graphics Image Format - GIF
GIF was designed for efficient online transmission of colour images.
The main limitation with the GIF format is that it only stores up to 256 colours.
If your image has 256 colours or less then GIF is often the best format. The smily face below has fewer than 256 colours and therefore GIF is fine.
However GIF is unlikely to be suitable for saving photographs as they generally contain millions of colours.
Because GIF can only store up to 256 colours it is known as a lossy format as the quality degrades the more colours there are over 256.
Joint Photographic Expert Group - JPG
The JPEG format can store millions of colours in a relatively small image file.
JPEG is known as a lossless format as providing the quality setting is left to maximum no quality is lost when the original image file (known as the raw format) is saved as a jpeg.
| Description | HTML Code | Result on web page |
|---|
| gif image - 3 kb |
<p align=center><img SRC="smiley.gif" ALT="smiley face drawn in paint"> |
|
| jpg image - 9 kb |
<p align=center><img SRC="smiley.jpg" ALT="smiley face drawn in paint"> |
|
| gif image - 38 kb |
<p align=center><img SRC="school.gif" ALT="E15 - gif"> |
|
| jpg image - 21 kb |
<p align=center><img SRC="school.jpg" ALT="E15 - jpg"> |
|
From the table above you can see that when there are less than 256 colours it doesn't make much difference which file format you use in terms of the quality of the image,
however the gif image requires 3 times less memory than the jpg.
However when there are more than 256 colours there is a clear difference in quality, with jpg providing a much clearer image - and producing a smaller file.