Image Types

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 documents 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. (PNG is another popular image format. It's similar to GIF, so we won't discuss it.)

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 slower connections. If you have an image that is 1 megabyte in size, and I only have a 2 megabit connection speed then it's going to take about 4 seconds to load the image on the page. That may not seem a long time, but if my speed drops to 500 kilobits per second then it will take 16 seconds to appear. I'm not likely to wait that long for your image to load!
So compressing the size of an image makes sense on the internet. If you've taken a photo and then saved it to your computer, take note of the file extension used. The software package you use to view the 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

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. This happens when you save the file over and over again. GIF 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 images, 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 is important, then save the image as a JPEG. (Modern digital cameras and mobile phones usually save your pictures in the JPEG format.)

In the next lesson, you'll learn how to insert images into your web pages.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 4 (Dealing with Images)