Title: 8.1 Using Images
Course: Certificate in Online Education

Image file types

You're probably already aware there are many different image format types available. Earlier in the course (section 3.4) you looked at how you could use the GIMP image editing program.

Here's we'll describe in more detail the different image types commonly used for images on the internet. Each of these is a compressed image type, meaning that smaller file sizes can be achieved, but with a possible reduction in quality.

GIF (Graphics Interchange Format): Usually used for line drawings and similar simple graphics. It only has support for 256 colours so generally doesn't work well for photographic images. It can support transparency, where the background may be transparent to allow the underlying web page colour to show through. GIF images can also be put together to create simple animations.

JPG or JPEG (Joint Photographics Network Group): Usually used for photographic images as it doesn't tend to work well with line drawings, simple graphics or lettering. No support for transparency.

PNG (Portable Graphics Network): May be slightly more compressed than a GIF image and can support 24 bit (16,777,216) colour. Supports transparency but not animations.

See some examples of how the image file type and compression can affect the resulting image. The advice at the end of this page says:
- PNG is good option for transparency and non-lossy, smaller files. Larger files, not so much, unless you demand non-lossy images.
- GIF is largely a novelty and only useful for animation, but can produce small 8-bit images.
- JPG is still the king for photographs and photo-like images on the internet, but be careful, as your file can degrade with every save.

Image file sizes

Adding images to your pages certainly makes then look more interesting than lots of text, but the more images you add, the more the student has to download. If you students are using slow internet connections, they may not appreciate having to wait for large image files to be downloaded before they continue with the course.

On the previous page we saw how different image formats can compress images to differing file sizes, but even the settings when you save a file in the same format can have a big impact on the final file size.

Take these 3 jpeg images for example:

No compression - 8.8KB | compressed to 50% - 4.5KB | compressed to 25% - 2.7KB

The image on the left is three times the files size of the image on the right. If you were taking these to be printed out you'd use the image on the left, but for displaying on a web page, do you need such a high quality image given the extra bandwidth it will use?

A common mistake is to resize the image by specifying the dimensions it will have when displaying on on your web page. For example both these images require the user to download 8.8KB:

193x233 pixels | 75x90 pixels

All I've done with the image on the right is tell the web browser to download the full image, but display it at the dimensions I've specified (75x90). Behind my webpage, the image is still 193x233 pixels. Best practice is to scale or resize the image in your graphics editing program before you upload it. Here is the same image, but resized in my graphics editor before upload, it's file size is now 2.3KB:

With all the images you insert into your course, you should try to keep the file size as small as you can. This will help your course pages to download much more quickly.

Accessibility

Some users may turn off downloading images in their web browser to save on bandwidth costs. Others may be using a browser on their mobile phone which reduces the size and quality of the images. Other users may have visual impairments which make difficult for them to see the images clearly.

In all these cases you'll want to ensure your students don't lose out in their understanding of your course content. For example, you may use an image of a graph to demonstrate a particular point. If some of your students can't see the graph, they may not appreciate the point you are trying to make.

For this reason, it is best practise to give your image a title and alternative text (or alt text). The alt text is the text that will appear if your image isn't displayed. The alt text will also appear when the user hovers the mouse over the image.

Image displayed, with the alt text: "Pie chart showing distribution of football team support" | Image not displayed and with no alternative text | Image not displayed, with the alt text: "Pie chart showing distribution of football team support"

By adding alternative text, users who aren't able to see the image know what the image is intended to show. With no alt text (as shown in the middle of the table above) users will have no idea what the image is meant to be showing them.

Fortunately, Moodle will always prompt you to add alternative text whenever you try to insert an image into your course, but it's worth understanding why this is necessary and how it can help to make your course accessible to all your students.