If your Moodle site feels slow, especially on image-heavy homepages, the cause is almost always the same: oversized, unoptimized images.

Modern Moodle themes like Lumo include hero layouts, featured panes, and other visual sections. These make your site look more engaging, but they also highlight performance issues when images are too large. Moodle does not resize or compress images automatically, so if you upload a 1–3MB file, Moodle serves that same file to every visitor.

The good news: this is one of the easiest performance issues to fix.

This guide explains why image optimization matters and how to do it properly, using a real example from a recent Lumo customer.

1. Why Images Slow Down Moodle

Moodle does not optimize images. If you upload a 1920 × 1080 PNG at 2MB, Moodle delivers that full file to all users — including mobile users on slow connections.

What this causes:

• Slow page load times
• Delayed hero and featured section rendering
• Lag on phones and tablets
• High bandwidth usage

Lumo and other modern Moodle themes are lightweight, but they cannot compensate for very large image files. Optimizing your images is essential.

2. Real Use Case: What We Found While Helping a Lumo Customer

A customer recently contacted us about a theme issue (fixed in Lumo v2.3). While reviewing their site, we noticed something unrelated to the bug:

All of their Featured Section images were extremely large — most were over 2MB.

They looked good visually, but they were far bigger than needed. For Lumo’s pane blocks, images around 800px wide are more than enough. Large images like these will always slow down the homepage.

Here’s the advice we gave the customer:

• Resize featured pane images to around 800px wide
• Compress images using free tools such as TinyPNG or ImageCompressor

One of their original files was 2MB+. After resizing and compression, it was only 105KB — with no visible quality loss.

The homepage felt much faster immediately. This shows how small optimization steps can make a big difference on Moodle sites.

3. Recommended Image Sizes for Lumo Users

These sizes work well for Lumo and help keep your Moodle homepage fast.

Home Hero Section
Side image (Side Image Mode): 1000 × 1000 px (square images give the best results)
Full-width background image: 1920 × 1080 px (minimum width 1600 px)
File size: 150–300KB
Format:
– JPG for standard full-width hero images (no transparency)
– PNG only if you are using Side Image Mode and need transparency for creative images or cutouts

Home Featured Section (Pane Blocks)
Recommended size: 800 × 460 px
File size: 100–200KB
Format:
– JPG(recommended)
– PNG only if transparency is required

Home Category Section
Recommended size: 300 × 300 px
Format:
– JPG or PNG for photos
– SVG for icon-style, flat graphics

4. How to Compress Images

You can reduce image file sizes quickly using free online tools. These tools keep your images looking sharp while making them much smaller.

TinyPNG
Great for fast, high-quality compression for JPG and PNG files.

ImageCompressor
Useful for compressing multiple images at once. Offers a quality slider for more control.

Squoosh
Allows resizing and fine-tuning image quality. Export as JPG or PNG (avoid WebP for Moodle theme settings).

In our Lumo example, a 2MB PNG was reduced to around 100KB with no visible loss in quality. This type of reduction is typical and has a major impact on page speed.

Conclusion

Most Moodle sites feel slow for one simple reason: oversized images.

By resizing and compressing your images before uploading them to Moodle, you can reduce file sizes by 80–95% and make your homepage load much faster. No server changes, no coding, and no plugins — just better image preparation.

If you’re using Lumo, these steps will help your Moodle site stay clean, fast, and user-friendly for every learner.