Note: You are currently viewing documentation for Moodle 4.0. Up-to-date documentation for the latest stable version of Moodle may be available here: More on images.

More on images

From MoodleDocs

This page presents some advice regarding images.

Image type

Obviously, the existing images already have a type. But when you create an image using graphics software, you need to decide which type you are going to save it to.

JPG vs PNG

You will often save an image as bitmaps, that is either in the JPG or PNG file format. Since file size can be an important consideration, it is good to know that, for the same image quality, the file size depends on the "content" of the photo.

Indeed, if the image is a photo, therefore containing a multitude of colors and shades of colors, it is better to save it in JPG format. On the other hand, if the image is a drawing, containing a limited number of colors, it is better to save it in PNG format.

If you are unsure, save the image in both JPG and PNG formats. Make sure the image quality is adequate and choose the image file that has the smallest size. You will invariably find that the JPG file of a photo has a smaller size than the PNG file, and that the PNG file of a drawing has a smaller size than the JPG file.

An advantage of the PNG format that should be mentionned is that it supports transparent color, which makes it possible to have a transparent background, which is not possible with the JPG format.

You will find further information on the web about when to use either format, for example here.

Image size

The size of images, specified by their width and height, is measured in pixels (px) which translate to mm (or inches) depending on the size and setting of your screen. Consideration should be given to the size of images, as the size of the image files depends on the dimensions of the images.

Basically, there are two sizes of an image to consider: 1) the original size, i.e. the one before uploading the image to Moodle and 2) the size in which Moodle displays the image. To obtain good results, the original size should be equal, if not slightly greater than, the displayed size.

For example, consider an image whose original size is 400px wide by 200px high. When you upload the image, Moodle suggests that you display the image in its original size or let you specify a different size. If you choose the original size, the image will be displayed in its original size. This is the ideal situation. But sometimes you may want the image to be displayed in Moodle at a size different than the original size.

If you want to display the image at a size of 200px by 100px instead of 400px by 200px, you can reduce the original size of the image to the desired dimensions using image editing software and then upload the newly sized image.

You can also use the image of size of 400px by 200px and, when you upload it, specify that you want it to display at a size of 200px by 100px. This latter method is perhaps faster but less efficient than the former because, although the image is displayed in Moodle at a size of 200px by 100px, it is indeed the image of 400px by 100px which is actually uploaded to Moodle. It is therefore a file of size larger than necessary which is uploaded in Moodle.

Now suppose you create an image with dimensions of 100px by 50px and want to upload and display it in Moodle at a size of 400px by 200px. If you do this, you will get a bad result i.e. a blurry or pixelated image. Indeed, Moodle can enlarge an image but it cannot change its resolution.

In other words, if you want to display an image in Moodle at a size of 400px by 200px, and get a good and clear image, you must have an original image that is at least 400px by 200px.