Shrinking the Size of Image Files in Your Moodle LMS

It is a little known fact that, unlike WordPress, Moodle LMS does not resize the physical file when you upload an photo. This means that your beautiful 20 megapixel class photo is sent to the web browser even when it is displayed dozens of times smaller in a web browser. You may have experienced this yourself when you view a list of courses and the thumbnail seems to load slowly. Now can you imagine if there are 20 courses with high resolution photos?

The solution is to resize your photos before you upload them into Moodle. In fact, it is a good idea to do this regardless of where you are uploading your photos as the resizing software built into websites is not even close to being as good as what you can do with software installed on your computer.

Are you one of those people who pay Google, iCloud, Dropbox, etc. for extra storage so that you can carry around your photo collection so that you can share it with friends? What if I told you that you could store 10 to 30 times more photos in the same space by resizing your photos before uploading them. Nobody would even notice unless they tried to print them.

A professional might use a tool like Photoshop to do the job but you can also do it with free software and get almost identical results. If you want to compare various software tools and even online services, a quick test is to take a screenshot of the text and then resize it. All resizing tools do not all produce the same quality. The same thing happens to the quality of your photos when you resize them to make them smaller.

Irfanview

Irfanview is a very powerful image viewer that supports almost every known image file format, especially if you have also installed the extension pack. Some file formats require support in your operating system (called codec) such as for HEIC and AV1. It can be used to resizes images. I've tested several other images resizing tools but this one produces almost identical quality to Photoshop. Best of all, it is free for non-commercial use. For commercial use, you will need to contact the developer for current pricing. I think it was only about $10-12 USD at one point in the past.

Processing Individual Images in Irfanview

Reducing the Image Size

To reduce the size of an image:

• Open the file in Irfanview
• Click Image > Resize/Resample...
• Make sure that the Preserve aspect ratio (proportional) box is checked so that your image doesn't get stretched
• Make sure that Resample (better quality) is selected and make sure it is set to "Lanczos (slowest)". Don't worry, it's still very fast.
• Optional: I usually like to check the box for Apply sharpen after resample however this depends on the image.
• Specify the new Width or Height
• Click OK
• Save your file with a new file name.

Reducing the Quality of the Image

Open the image in Irfanview if it isn't already and simply save it as a JPG file. As you are doing this, set the Save Quality to about 80%. Depending on the file, this will result in a dramatic reduction in the file size without changing the height and width of the image, and the difference will visually hardly be noticeable if you see any difference at all.

Multiple Batch Processing of Image Files in Irfanview

Irfanview lets you process many files at once which can be a huge time saver. Be sure to ALWAYS review the settings in both the Options button and the Advanced button as their settings are always remembered from the last time you used them and they are both applied anytime you do the batch processing.

1. Open Irfanview
2. Click File.
3. Click Batch Conversion/Rename...
4. Locate the files you want to process and use the buttons below the list to add these to the Input files list of files to be processed.
5. Specify where the modified copy of the files are to be saved in the Output directory for results files.
6. Next complete both the Reducing the Image Size and the reducing the Quality of the Images steps below. If you don't want to re-size your images, uncheck the Use Advanced options (for bulk resize...) box. Otherwise you may find that your files have been inadvertently re-sized.
7. Click Start Batch

Reducing the Image Size

There are several reasons why you might want to re-size many images when making them available on your website. For example, you may want to create thumbnails of your photos or just reduce the file size of your photos so that they can be seen on the screen. Your website doesn't require the high resolution multi-megapixel size images that most cameras take these days.

1. Click the Advanced button.
2. Uncheck all the check boxes.
3. Make sure that the Preserve aspect ratio (proportional) box is checked so that your image doesn't get stretched.
4. Make sure that the Resample (better quality) box is checked.
5. Here you have a choice of either setting the Width, the Height. This will make all your images have the same height or width. Alternatively you can choose to specify the length of the Long Side or the Short Side of the image to make all your images be of the same size. Whichever you choose, the other dimension will automatically be calculated in order to preserve the aspect ratio of the height and width.
6. Click OK.

Reducing the Quality of the Image

You can change the quality of the images, often without affecting them visually.

1. Click the Options button
2. Set the Save Quality option to 80%.
3. Unless you have a specific reason to do so, make sure none of the other boxes are checked.
4. Click OK.

As we navigate the landscape of image optimization, the magic happens not just in the reduction of file sizes but in the preservation of quality. So, whether you're resizing a single image or orchestrating a symphony of batch processes, the quest for visually appealing, optimized web content begins with a click, an edit, and a optimized experience on your website and in your Moodle LMS courses.

Hope you found this useful.

Michael Milette