Certificate in Online Education

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.