Best practices: Seven tricks for displaying images using the Moodle™ 2 HTML Editor
Do the images in your course take a long time to load? Does it look like images are loading from the top-down? Do the images in your course look really close to the text? Do your images look distorted and/ pixelated? Do you have users who are using a screen reader? If you answered “Yes” to any of these questions then keep reading! In this post I’ll give you some tricks for displaying images using Moodle™ 2’s HTML Editor (based on TinyMCE). You’ll learn how to take advantage of the settings located in the General and Appearance tabs of the Insert/edit image dialog box.
1. Resize and optimize images before uploading them into Moodle™.
Avoid changing the dimensions of images using the Appearance tab. Many people think that changing the dimensions of a file in the Appearance tab will actually resize the image; this is NOT the case as it only changes the display of the image. The “Dimensions” fields in Moodle™ change the HTML code which tells the browser how to display that image. Thus changing the dimensions rather than resizing and optimizing for online delivery can dramatically decrease the performance of your course as pages load images and it can decrease the quality of the image. For example let’s say you have an image that is 2048 x 1152 pixels and you want to display it as 400 X 225 pixels. If you resize the image in Moodle™ your users are downloading an image that is over 5X’s larger than necessary (even though it will display as 400 x 225). If you want to change the size of images then you do it in an image editing program.
2. Maintain image proportions.
It is ok to change the dimensions in the Appearance tab if you are making a slight change. However you’ll want to make sure that you don’t distort the image when doing this. To make sure that you display the image in the same aspect ratio make sure you keep the “Constrain proportions” checkbox checked. Also if you upload a new version of an image with the same file but with different dimensions then you will need to uncheck this box temporarily to modify the dimensions to the correct scale as Moodle™ will keep the dimensions of the old image. If you aren’t sure of the dimensions of the file you can find its height and width properties in the Windows Explorer properties or if you are a Mac user then you can find them in the Finder window.
3. Don’t enlarge images by changing the proportion to a larger value.
If an image looks pixilated then you most likely scaled it (either in an image editing program or inside of Moodle™) to be larger than the image size. As a best practice only resize images to be smaller so that you maintain the quality of the image and then upload into Moodle™. If you want the image to be larger then you’ll need to use one with larger dimensions. Keep the original file so that you can resize to other dimensions later if desired.
4. Change the alignment of the image.
Did you know that you can change the position of images on the screen? The “Alignment” setting located on the Appearance tab allows you to choose how you want to align the image. I typically align images either the left or right. This will float the image to the outside of the screen. If you have bulleted text on the page then you’ll want to float to the right or the image will overlap with the bulleted text on the screen.
5. Change the proximity of the image in relation to the text.
When you add images they are often displayed very close to the text on the screen without much white space. To avoid this you can add white between the text and image by adding a margin around your image. Margins can be added by inserting pixel values into the “Vertical space” and “Horizontal space” fields on the Appearance tab. Try adding a 10 into these fields to add some white space around your images. When you add/modify a value in these fields the HTML for the image tag updates in the “Style” field. If you wish to customize the amount of space of just the top/bottom or the left/right you can do so by changing it in the “Style” field.
6. Provide users with alternative text.
By writing alternative text you are making your course more accessible because screen readers read this text to your users. You can add alternative text in Moodle™ by typing text into the “Image description” field located on the General tab. While you don’t need to add descriptions for images that are decorative or spaces you should add them for all other images. Keep the descriptions short and meaningful and avoid misspellings.
7. Add borders to make images more appealing.
In Moodle™ you can easily add a border around an image by adding a pixel value into the “Border” field. This can make the image stand out visually. When you add/modify a value in this field the HTML for the image tag updates in the “Style” field (e.g. border: 1px solid black;). If you want to change the color of the border then you can alter the color name in the “Style” field (e.g. border: 1px solid #990000; or border: 1px solid red;) or replace it with a hex value (e.g. border: 1px solid #990000;). If you do choose to add borders be consistent with size and color.
I hope you find these tricks and best practices useful as you develop your courses. If you’d like to learn more about the HTML editor sign up for our Moodle™/joule courses: Fundamentals of Course Building and Advanced Course Building.
Thanks for reading!
~Rebecca