Moodle Best Practice Guide
Header images
At the top of every module page you’re able to add a header or banner image that will serve not only to identify your module, but also give it some personality and individuality relevant to the subject. Depending on your faculty, this may be chosen on a course level, which may mean you won't be able to change it yourself, or you might get to choose this image on a module level, meaning you have control over what it looks like. In either case, we suggest these images adhere to the guidelines set out below.
Dimensions & file size
Minimum suggested width
1000px
We suggest using a minimum width of 1000px. If you use a size smaller than this, you run the risk of reduced image quality when the page is viewed on larger screens.
Image ratio
0.22
We suggest that you use an image with a width to height ratio of 0.22. This means, that if your image is 1000px wide, it's height should be approximately 220px, or if it's 1300px it should be 286px high and so on.
Image file size
2mb
You won't hit a file size limit if your image is of a reasonable size. Do keep in mind however that a large file size is likely to download more slowly off campus. Essentially – the lower the better.
Choosing a header image
There are a few points to consider when choosing an image for your module, below you will find a list of those that we have found to be most important to ensure the usability of the your Moodle modules.
- Image style
We suggest that you avoid any busy images – think less is more, this will be less distracting to those who view your content.
- Copyright
-
The image you use should be free of copyright restrictions. Be aware that you shouldn't take an image, (or part of an image) directly from Google without establishing if you have permission to reuse or remix that image for your own purposes. If you need high quality copyright-free images Unsplash is an excellent resource.
- Relevance
Is the image you have chosen relevant to the module you want to use it on? You could potentially confuse students, or indeed other members of staff if you use an image which is not representative of the content being taught.
- Diversity & inclusivity
Your image should be as diverse and representative as the topic it depicts.
- Right-hand weighted
It is best practice to ensure that any details you add to your header for example, logos or icons are positioned on the right hand side, to prevent them from being obscured by the module title.
- Text content
Don't include text or messages in your module header image. This type of text won't be readable by those that use accessibility software to read the screen, and isn't an effective way of reaching those that potentially could see it.
