The Image Types used on Web Pages

 

You remember at the start of this course we talked about file extensions, and you learnt what the .html file extension was. You're now going to learn about two new file extensions: JPEG and GIF.

Just like web pages and word process document have file extensions, so too do images have file extensions. There are a wide range of file extensions used for images. The two most popular file extensions used on web pages are JPEG and GIF.

GIF Images

GIF stands for Graphics Interchange Format, and was developed by Compuserve. It uses something called a LZW compression algorithm to reduce the size of the file. The size of your images on web pages is a crucial factor for people using 56k modems (most people). A 56k modem will have a maximum download speed of 56 kilobits per second. This is about 7 kilobytes per second. If you ignore image size, and have a picture on your web page that is 700 kilobytes, it will take well over two minutes to download (56k modems rarely work at their maximum speed). Most web surfers will not wait that long for your image to download (would you?). They'll be gone long before the two minute mark.

So compressing the size of an image makes sense on the internet. If you've scanned a photo and saved it to your hard drive, take note of the file extension used. The software package you used to view the scanned image will probably give you the opportunity to save the file in another format. Saving the file as a GIF image will greatly reduce the size of the file.

There is a down side, however, in converting to a GIF. The number of colours in your image is capped at 256 colours. For realistic photos, this is not nearly enough. And although your file size is greatly reduced, so too could be the quality of your image.

 

JPEG Images

JPEG is the other popular image format used on web pages. It stands for Joint Photographic Experts Group, and allows you to have images with more than 256 colours. In fact, millions more. Again, your original image is compressed when you convert to a JPEG image, so some loss of quality is inevitable. If you want to show off your photos in their best light, converting to JPEG rather than GIF is the best option for the internet. The size of the file might be slightly higher, but then so will the quality.

The downside to JPEG images is that jpeg is a Loss Compression format. This means that image quality goes down (rapidly) the more times you compress and uncompress the image. GIF images, on the other hand, is a Lossless Compression format, meaning there will be no loss of quality when you compress and uncompress the image.

Another thing you can't do with JPEG images is have a transparent background. So if your image was this:

and you wanted to get rid of that black background, you could set the black colour as a transparent colour, if you save as a GIF. With a JPEG, you're stuck with the black background. (you can also animate GIF image, which you can't do with JPEG images.)

In general, if your image is less than 256 colours, then save the image as a GIF; if the image is more than 256 colours, and quality loss is important, then save the image as a JPEG.

One last thing about JPEG images in web pages. When specifying an image in your HTML code, the "E" of JPEG goes missing. So it's this:

BACKGROUND = image1.jpg

and not this:

BACKGROUND = image1.jpeg

So let's design a web page with an image on it. We'll do this in the next lesson.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses