/
Compressing images for fast loading

Compressing images for fast loading

Images displayed on the web (including Moodle) should have as small a file size as possible, while still maintaining adequate quality. Don't use the image resize handles in text editors, as this is just the same large file shown in a smaller format. You should resize files before uploading them to use online.

Many students these days access Moodle on their mobile devices and in some cases they will be paying for every mega byte of data they download.

Keeping image file sizes small means pages will load more quickly and it will consume less data. 

In order to do this a few rules can be followed:

  • Images should typically be no more than a few hundred KB. If your image is larger than this it should be resized and/or compressed.
  • Resize the picture before you upload it - making it smaller once it's uploaded will mean the file size will be larger than necessary.
    A typical size for websites would be 450x300 pixels for a medium sized image.
  • Save photographs as JPEG (you can choose to save at a lower quality to reduce filer size)
  • Save illustrations and drawings as GIF or PNG.
  • If you want to allow students to see a photo in high quality consider adding a thumbnail that links to the full-size, high quality image, so they can choose to download it when appropriate.

Online Tools for compressing and resizing images

Compressing images using Microsoft Picture Manager (Windows with Office installed):

  1. Locate the image you want to compress in Windows Explorer.
  2. Right click the image > Open with... > Microsoft Office 2010
  3. Click Edit Pictures... (from the middle of the top menu bar)
  4. Click Compress Pictures (from the bottom of the right-hand column)
  5. Choose Web pages (from the list on the right-hand column)
  6. Click OK.
  7. Your picture will be resized to 448X336 pixels and saved in a compressed format.

Compressing images using Mac Preview (Mac only):

  1. Open your image in preview.
  2. Click Tools (in top menu bar) > Adjust Size...
  3. Choose pixels from the width / height and enter 450 (or whichever size you are aiming for) in the width field. The height will adjust accordingly.
  4. Click OK.
  5. Click View (in the top menu bar) > Actual Size to see the real size of your image.
  6. Click File > Save as... and save your compressed file with a new name - so you keep your high quality large image.

Instructions with images can be downloaded here: http://alums.vassar.edu/images/volunteer/image-reductions-in-preview.pdf

Related content

M03 - Links, files and folders
M03 - Links, files and folders
More like this
M04 - Display content directly in Moodle
M04 - Display content directly in Moodle
More like this
M03b - Uploading multiple files using zip
M03b - Uploading multiple files using zip
More like this
M02b - Add images
More like this
Which format should I use for my document in Moodle?
Which format should I use for my document in Moodle?
More like this
M03c - Embed media with multiple files & a PDF
M03c - Embed media with multiple files & a PDF
More like this