Unoptimised images are one of the biggest culprits behind poor platform performance, accessibility issues, and sluggish Learning Management System (LMS) speeds. But with the right image optimisation strategies, you can enhance user experience, reduce load times, and create a seamless learning environment for students and educators alike.
In this month’s Catalyst Expert Tip, we’ll show you how simple adjustments to image size, format, and compression can transform your Moodle or Totara platform.
Why Image Optimisation is Important
Slow-loading pages frustrate users and limit accessibility, particularly for mobile users or those with slower internet connections. Optimising images can transform your platform’s performance by:
- Boosting user engagement.
- Enhancing accessibility for all learners.
- Reducing server load and cutting hosting costs.
Best Practices for Image Optimisation
Resize Images Before Uploading
Use tools like Photoshop, GIMP, or Canva to resize images to the required dimensions. For banners or full-screen visuals, aim for a 16:9 ratio, such as 1920×1080 pixels, to maintain a polished look.
Compress Images for Faster Loading
Tools like TinyPNG, Squoosh, or ImageOptim can significantly reduce file sizes without compromising quality. Striking the right balance is key—reduce the size without sacrificing clarity.
Adopt Modern File Formats
WebP is a game-changer, offering superior compression compared to JPEG or PNG while preserving quality. Moodle and Totara now support WebP, making it an excellent choice for eLearning platforms.
Implement Lazy Loading
Lazy loading ensures images load only when they are visible on the user’s screen, improving initial load times and overall performance. This is especially useful for sites with numerous high-resolution images that can’t be reduced further using the tips above.
Open-Source: GIMP for Image Optimisation
Open-source tools offer powerful, budget-friendly solutions for image optimisation. GIMP stands out as a versatile, free alternative to paid editing software. Whether you need to resize, crop, or export images in modern formats, GIMP can help.
GIMP’s Key Features Include:
- Support for a wide range of file types.
- Tools for batch processing, saving time when managing multiple images.
- An active community offering tutorials and plugins to enhance functionality.
Pro Tip: GIMP’s community-created plugins can help automate repetitive tasks, like resizing large batches of images, so you can focus on delivering engaging content.
Avoid these common Pitfalls
Uploading Images Directly from Devices
Images straight from smartphones or cameras are often too large for web use. Always resize and compress them before uploading.
Over compressing Images
Excessive compression can result in blurry, pixelated visuals, detracting from the learner experience. Always preview your images to ensure quality is maintained.
Ignoring High-Resolution Displays
For devices with retina displays, provide images at twice the size but aim to keep file sizes under 500KB for optimal performance.
Skipping ALT Text
While not related to file size, ALT text is essential for accessibility. If your image conveys information, label it with descriptive ALT text to ensure all learners benefit, including those using screen readers.
Benefits of Partnering with Catalyst IT
At Catalyst IT Europe, we offer expert guidance to help you optimise your Moodle or Totara platform for peak performance. From detailed documentation to hands-on support, we’re here to ensure your platform looks great and runs smoothly and efficiently.
Get monthly insights from our Digital Learning Team on how to optimise your Moodle or Totara platform. Sign up for our newsletter to receive exclusive expert tips, best practices, and the latest eLearning innovations—straight to your inbox. Sign up here
With Catalyst, you have the freedom to innovate.
