Course Images in Moodle Themes and Load Times

A general Moodle theme trend out there is to use an image (that is set in a course) as either an ‘icon’ on the Moodle landing page and/or as a banner/cover image when inside the course. Some of our stock themes include this feature and clients love it. It provides a nice visual cue to learners about where they are and what course they are in. However, it is not always clear how to set this up and, because the course image dimensions need to be large, these images can often negatively impact load times. The following will quickly cover easy methods to optimize an image and then how to set it in the course for use in a theme.

Optimizing a Course Image:

First crop and save your course image. For Moodle themes where the image is only used on the frontpage, we recommend 600px wide x 300px tall. For Moodle themes where the course image is being used as a banner or cover inside the course, 1920px 1080 is more than enough. There are plenty of web-based services that you can use to ‘optimize’ your images but we prefer Kraken.io. The interface is easy to use. Just drag your images into the upload box, let Kraken do the work and then download them. They can often radically reduce the weight of an image.

Adding Your Optimized Image to a Moodle Course

The next step is to add the image to the course. Login as an admin to your Moodle install. Enter the course and click on ‘Edit Settings’ under ‘Course Administration’ in the blocks area. Once in the settings scroll down to ‘Course Summary Files’. Drag your optimized image into this box, scroll to the bottom and hit save and you are done!

Screen Shot 2015-04-24 at 3.40.09 PM

Keep up with us! Add your email address and get notifications about new themes, special offers and other updates.