Photographs on a line

Using Images in Moodle

» Technology » Tasks » Content Creation » Using Images in Moodle

You may want to add images to your Moodle course on the course homepage or in pages, books, and lessons. Images add to the aesthetic value of your course, which may increase how desirable learners find the course when they first look at it. A course that looks visually engaging will increase learner’s motivation to explore further. 

So how do you go about using images in your Moodle course? 

First of all, you have to find an image to use. If you are looking for photographs, Unsplash is a great site to use because all of the images on it are free to use with no copyright restrictions. We discuss other places to find images in another post. Once you find a great image, you need to make sure that you are allowed to use it. That means that you will have to look up the copyright information for the image. On some sites, there is an image use policy that is site wide. On other sites, the copyright information is attached to each individual image. If the image is copyrighted then you cannot use it without the permission of the author. But if it is licensed under Creative Commons, then you can use it as long as you give attribution to the author and follow the rules that pertain to its specific CC license. Images that are CC0 are considered public domain. The authors have waived their copyright and allowed their work to be reused freely. (All of the images on Unsplash fall into this category of CC0.) It is still considered good practice to give attribution to the image author, even for CC0 images. At Horizon, we do this by creating a spreadsheet for each of our courses where we track all of the images we use along with their licenses. We post a link to this in the course overview section.

Before you insert your image into Moodle, we recommend checking the size of the image and resizing it if it is large. For example, this image (by Raj Rana) on Unsplash is 5760 by 3840 pixels (3.2 MB). But maybe we only need it to be about 400 pixels wide on the page. If we resize it to 400 by 267 pixels, it is reduced to only 15.25 KB. That is 99% smaller, which represents a pretty significant savings in page load time. This is especially important in areas with low bandwidth or intermittent internet access. As a designer, you want to think in terms not of your internet situation but that of your learners. You might have a great internet connection in the city, but if many of the learners who will be taking the course live in villages with slower connections, you’ll want to be careful about reducing image sizes as much as possible for their sake. You can use free tools like Web Resizer to reduce the size of your images. 

Once your image is resized, you are ready to insert it into your Moodle course. Click on the image button in the editor and select your image file. Make sure to briefly describe it. This will help anyone who is using a screenreader to access your course. It will also help anyone for whom the image is loading slowly. Decide if you want the image on the left or right side of the page (for images that will be used to illustrate text) and set the alignment accordingly.

Atto editor

Image properties

One final step that is optional is to put a margin around your image to separate it slightly from the text. This makes it easier to read. Unfortunately, the default Moodle editor (Atto) does not allow you to do this when you add the image, but you can add it in the HTML code. To do that, click on the button with the </> symbol to open the HTML editing window. Find the line of code for your image. It will look something like this:

<img src=” 201930/raj-rana-IB_x2fNdLEw-unsplash-2_opt.jpg” width=”400″ height=”267″ alt=”Photographs on a line” style=”float: right;” />

If you did not set the alignment to be right or left, then it may not have the part that says style=”float: right;”. If the image is on the right, as on this page, then we want a little extra space on the left. The following line of code will add 5 pixels to the top of the image, 0 pixels to the right (because the image is floated right), 5 pixels to the bottom of the image, and 15 pixels to the left of the image (between the image and the text): 

style=”float: right; margin: 5px 0px 5px 15px;”

If you want an image on the left side instead of the right, the line of code would be:

style=”float: left; margin: 5px 15px 5px 0px;”

The trick to remembering the order of the margins is to remember TRouBLe: Top-Right-Bottom-Left.

If you want a border around the image the final image code including the border looks like this:

<img src=” 201930/raj-rana-IB_x2fNdLEw-unsplash-2_opt.jpg” width=”400″ height=”267″ alt=”Photographs on a line” style=”float: right; margin: 5px 0px 5px 15px; border: 4px solid #404040;” />

TIP: If you don’t want to mess around with HTML code every time you insert an image, you can switch your Moodle editor to the TinyMCE editor instead of using the default Atto editor. The TinyMCE editor allows you to set image margins and borders in the editing window itself without going into HTML. You do still need to know whether you want your image margins to be 5px 0px 5px 15px for right-aligned images, or 5px 15px 0px 5px for left-aligned images. But you can at least type it into the image editing window without the extra step of going into HTML. And if you type 5 and 15 into the Vertical space and Horizontal space boxes, it will get the margin code started for you so all you have to do is add 5px 0px to the line below in the order you need them for left or right alignment. Editor preferences can be set by clicking on your name in the top right hand corner of Moodle, opening the Preferences menu, selecting Editor preferences, and then changing the dropdown menu to TinyMCE HTML editor. 

TinyMCE editor

How to Set up a Peer Review in Moodle
Elements of Design