Images and icons can make your Moodle course more engaging and visually appealing, but they need to be used thoughtfully. In this section, we’ll explain how to prepare and add images and icons in a way that supports learning and accessibility.

Why images matter

Our research shows that well-chosen visuals help students process information faster and stay engaged. However, too many images—or poorly optimized ones—can slow down page loading and distract from the learning objectives.

There are plenty of options in the UAL Image Library. Just login with your staff ID to begin browsing. You can use the Image Library guide for help. 

UAL Image Library

Choosing the right images

• Purpose first: Every image should serve a clear educational purpose (e.g., illustrating a concept, guiding navigation).
• Avoid clutter: Don’t add decorative images that don’t add value.
• Consistency: Use a consistent style for icons and illustrations across your course.

Preparing images before upload

• Optimise size: Compress images to under 1MB without losing clarity. JPEG or PNG formats are recommended.
• Name files clearly: Use descriptive names like Week3_DesignDiagram.png instead of image1.png.
• Accessibility: Add alt text that describes the image’s purpose, not just “image” or “picture.”

Using icons effectively

Icons can help students navigate quickly, but they should be used sparingly:

• Use standard icons: Stick to universally recognised symbols (e.g., a play button for video).
• Don’t replace text: Icons should complement text, not replace it.
• Keep size consistent: Avoid oversized icons that dominate the page.

How to add images and icons in Moodle

In the Moodle rich-text editor:

1. Click the Insert/Edit Image button.
2. Upload your image or paste the URL.
3. Add alt text for accessibility.
4. Adjust alignment and size for a clean layout.

For icons, you can upload small PNG files or use Unicode symbols in text areas.

Accessibility tip: Always include alt text

Why: Alt text ensures students using screen readers understand the image’s purpose.

Action: Write short, descriptive alt text like “Diagram showing the design process” rather than “image.”

Considering the course index

Images and icons do not appear in the course index, so make sure your titles remain clear and descriptive. Avoid relying on visuals alone for navigation.

Checklist:

• Image serves a clear purpose.
• File is optimized and named properly.
• Alt text added for accessibility.
• Icons used sparingly and consistently.
• Layout tested on desktop and mobile.