Filters: Image optimiser

filter_imageopt
Maintained by Picture of Guy ThomasGuy Thomas
Resize images to a configurable maximum size. Delay the loading of images until visible in the viewport.
175 sites
76 downloads
29 fans

Image optimiser filter

The image optimiser filter is intended to solve the issue of high resolution images slowing down (and blocking) page loads.

Features:

  • Resize images that are greater than a maximum width and preserve aspect ratios and original images.
  • Resizes images in all filterable text - course content, user profile description, etc.
  • Allow for delayed loading of images (load when visible) with the option of specifying how many images should be loaded immediately before images are placeheld and loaded when in the view port and the page has fully loaded (eliminates blocking for other resources, e.g. javascript in the footer).

Example scenarios:

  • Course designer doesn't know how to resize images prior to upload and uploads a 6 mega pixel image when they don't require this resolution. The filter solves this issue by automatically resizing images to a specified maximum width (aspect ratios are preserved).

  • Course designer uploads 100s of images into a course label The filter can solve this issue by place holding images and making them load only when scrolled into the viewport.

  • Students using mobile data plans are finding their course page to be sluggish due to unnecessarily large images uploaded to their course. The filter can solve this issue by both placeholding images until scrolled into the viewport and then resizing the image which is served to the user.

Configuration

For the filter to work, it must be enabled via Site administration / Plugins / Filters / Manage filters.

The filter settings area available via Site administration / Plugins / Filters / Image optimiser.

By default, the optimiser both place holds (load when visible) and resizes (maximum image width) to 800px.

Videos

Load on visible feature - images are place held and then loaded when visible in the view port.

Non destructive resizing - resampling is always done against the original image

Mobile page load speed WITHOUT the image optimiser

Mobile page load speed WITH the image optimiser (over twice as fast)

Note, the page is ready in half the time when the filter is enabled!

Copyright

(c) Guy Thomas 2017

Licence

http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

Author

Developed by Guy Thomas.



Note - for an up to date description of this plugin - please visit:


https://github.com/gthomas2/moodle-filter_imageopt/blob/master/README.md

Screenshots

Screenshot #0
Screenshot #1

Contributors

Picture of Guy Thomas
Guy Thomas (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Jeff White
    Thu, Aug 3, 2017, 9:33 PM
    Very impressive plugin!
  • Picture of Guy Thomas
    Thu, Aug 3, 2017, 11:26 PM
    Cheers Jeff!
  • Picture of Chris Chapman
    Thu, Aug 24, 2017, 5:49 PM
    This sounds awesome Guy! hope it makes it to core. Seen it works with 3.1, do you think it would work with 3.0? if so I'l test it out on our DEV if you think it's worth a shot and get back to you.
  • Picture of Guy Thomas
    Sat, Sep 2, 2017, 1:06 AM
    @Chris - I don't know if it would work with 3.0. It might but you'd have to alter the ->requires property in version.php to a value lower or equal to the Moodle 3.0 release.
  • Picture of Chris Chapman
    Fri, Sep 8, 2017, 6:25 PM
    @Guy, cheers. changed it but unfortunately doesn't work, will definitely use it when we upgrade though! If there is a tracker to get this to core, let me know and I'll support.
  • I Teach With Moodle
    Fri, Oct 20, 2017, 8:45 PM
    Hi Chris, thanks for the plugin, works great. I have witnessed strange behaviour for some images. See below for scenario
    - Moodle 3.3 - ImageOpt fully up-to-date
    - ImageOpt max width is set to 800px
    - Teacher uploads large image to label (3,000px wide), using Atto
    - Teacher manually resizes image to 250px wide
    - Teacher saves label
    - Picture is displayed at 800px wide (even though it should be 250px)
    Is that something you have witnessed before, or do you think it's something to do with my setup?
    Cheers,
    Fred
  • Picture of Guy Thomas
    Sat, Nov 4, 2017, 12:06 AM
    @Frederic Nevers - This is now fixed in the github master branch and the MOODLE_33_STABLE branch.

    https://github.com/gthomas2/moodle-filter_imageopt
  • Picture of Joseph Liaw
    Sat, Nov 4, 2017, 3:34 AM
    Hi Guy:

    Thanks for your quick response and work on this great filter! I think there was the same glitch that Frederic saw on the 3.2 version--is that also pushed out on Github or should we wait for it to be pushed out on the official Moodle plugins Deployment update engine?

    Thanks again!

    Cheers,

    --Joe
  • Picture of Guy Thomas
    Mon, Nov 6, 2017, 6:43 PM
    @Joe - I've updated the 3.2 version on github this morning.
  • Picture of Joseph Liaw
    Wed, Nov 8, 2017, 10:30 AM
    Installed your 3.2 update off of Github and it works perfectly....

    Thank you Guy--great plugin for building visually rich courses without sacrificing usability / precious bandwidth!
  • Picture of Guy Thomas
    Sat, Dec 9, 2017, 7:06 PM
    Thanks Alex, that's really kind of you.
  • I Teach With Moodle
    Wed, Mar 7, 2018, 2:39 PM
    Hi Guy,
    Sorry I had not noticed your reply a few months back. Thanks for fixing the issue.
    Cheers,
    Fred
  • Picture of Pat Sej
    Thu, Mar 14, 2019, 8:41 PM
    Hey Guy,

    This plugin sounds great!
    I just have some questions before using it.

    What is its future?
    Is it safe to use for production on a Moodle 3.5 and later versions?
    Was it created while you were working on Snap?
    Are you still maintaining it? Otherwise, does it exist alternatives?

    Thanks wink
    Patrice
  • Picture of Guy Thomas
    Fri, Mar 15, 2019, 5:12 PM
    @Pat Sej. I will check it out with Moodle 3.5 and 3.6 later today. Yes I created it around the same time I was working on Snap but I did it as a personal project. I will continue to maintain it.
  • Picture of Guy Thomas
    Fri, Mar 15, 2019, 5:13 PM
    @Pat Sej - there is already a Moodle 3.5 version if you click on 'versions'. Will check it with Moodle 3.6 later today.
1 2
Please login to post comments