Home and Learn: Web Design Course


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 three most popular file extensions used on web pages are JPEG, PNG, 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 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.

PNG

PNG stands for Portable Network Graphics. It was introduced as an improvement to GIF files. As you didn't need a licence, the format became very popular. It uses something called lossless data compression, which means you can save it as many times as you like without any degradation in the quality of the image. PNG files tend to be small, which is another advantage.

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, unlike GIF and PNG files. 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 and PNG on the other hand are Lossless Compression formats, 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:

Example of an image on a black background

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 or PNG. 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 or PNG; 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.)

If you're interested in the graphics and design side of web design, Adobe have some great resources in this blog of theirs Adobe Design Blog.

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

Back to the Home Page

 


Email us: enquiry at homeandlearn.co.uk