Filters: Image optimiser

filter_imageopt
Maintained by Picture of Guy Thomas Guy Thomas
Resize images to a configurable maximum size. Delay the loading of images until visible in the viewport.
60 sites
131 downloads
15 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 Guy Thomas
    Fri, 5 May 2017, 9:44 PM
    @Joseph. Thank you for your kind words. I'm guessing it's highly likely that the plugin will already work with 3.1 but I haven't tested it.
  • Picture of Joseph Liaw
    Sat, 6 May 2017, 12:34 AM
    Hi Guy:

    Wanted to report back and verify for you since Moodle 3.1 has Long Term Support.....I just tested it out on my 3.1 sandbox, and then deployed it on my production site---works flawlessly on 3.1 with the Snap theme--awesome!!!

    Keep up the great work!!!!
  • Picture of Guy Thomas
    Sat, 6 May 2017, 6:38 AM
    @Joseph thanks for testing with 3.1. Nice to know it works.
  • Picture of Joseph Liaw
    Sat, 20 May 2017, 6:34 AM
    Hi Guy,

    I wanted to report a bug with one of my courses with the Optimiser Filter and Snap 3.1--when I turn on the filter my course formatting gets crazy and out-of-whack:

    https://drive.google.com/file/d/0B7W2PTS398G-VGtBdlVqMkY2SFE/view?usp=sharing

    ...once I turn off the filter, Snap 3.1 behaves normally....

    To help troubleshoot, I turned on debugging mode and this is the error message output at the top of the page:

    Notice: Undefined property: stdClass::$width in /var/www/moodle3/filter/imageopt/filter.php on line 222

    Notice: Undefined property: stdClass::$height in /var/www/moodle3/filter/imageopt/filter.php on line 223

    Notice: Undefined property: stdClass::$width in /var/www/moodle3/filter/imageopt/filter.php on line 227

    Notice: Undefined property: stdClass::$width in /var/www/moodle3/filter/imageopt/filter.php on line 222

    Notice: Undefined property: stdClass::$height in /var/www/moodle3/filter/imageopt/filter.php on line 223

    Notice: Undefined property: stdClass::$width in /var/www/moodle3/filter/imageopt/filter.php on line 227

    Notice: Undefined property: stdClass::$width in /var/www/moodle3/filter/imageopt/filter.php on line 181

    Notice: Undefined property: stdClass::$height in /var/www/moodle3/filter/imageopt/filter.php on line 182

    Any ideas on what I can try? Or is it better to just wait until I upgrade to 3.2 and for the new Snap 3.2 release later this summer?

    What's weird is the optimiser filter works great in all my other courses, but for some reason not this course....

    Thanks again for your hard work on not only this great filter, but also on Snap and sharing with everyone a truly useful tool....

    Regards,

    Joe
  • Picture of Guy Thomas
    Thu, 25 May 2017, 5:57 PM
    Hi Joe. Thanks for reporting this. I'll take a look and get back to you ASAP.
  • Picture of Joseph Liaw
    Thu, 1 Jun 2017, 12:47 AM
    Thanks Guy!

    Can't wait for Snap 3.2 to come out to use with this great filter!

    Keep up the great work!
  • Picture of Guy Thomas
    Fri, 2 Jun 2017, 12:17 AM
    Joe - I can't test this with Moodle 3.1 without going to a lot of trouble. My dev environment is now fixed to PHP 7 which won't work with Moodle 3.1. Could you please try testing it again but on a completely separate course page. I'm wondering if it's something specific about the course you tested it with.
  • Picture of Joseph Liaw
    Fri, 2 Jun 2017, 2:02 AM
    Hi Guy:

    Thanks for the quick reply--I tested the filter on other courses with PHP 7 and it works great on 3.1--I'm thinking it's just a weird glitch with this particular course and once I upgrade to 3.2 I'll report back.

    Thanks for your great filter and also your contributions to Snap....both of these great tools will really change the learning experience for everyone!
  • Picture of Guy Thomas
    Mon, 5 Jun 2017, 7:30 PM
    Jospeh. Please could you do me a favour and download the latest version from: https://github.com/gthomas2/moodle-filter_imageopt

    It should fix the error that you have reported.
  • Picture of Joseph Liaw
    Tue, 6 Jun 2017, 10:36 PM
    Hi Guy,

    I downloaded the latest version from Github as directed and tested it out on 3.1--you fixed it!!!!! THANK YOU!!!! This is an amazing plugin that should eventually be added to the Moodle core since it helps instructors build media rich, visually robust courses while optimizing the end-user experience by speeding up page loads and reducing strain on the Moodle server--a win-win!!!

    Tie this in with the amazing Snap theme, and we have a powerful synergy of tools here to deliver great looking courses that are also fully functional and robust!

    Thank you Guy!
  • Picture of Jeff White
    Thu, 3 Aug 2017, 9:33 PM
    Very impressive plugin!
  • Picture of Guy Thomas
    Thu, 3 Aug 2017, 11:26 PM
    Cheers Jeff!
  • Picture of Chris Chapman
    Thu, 24 Aug 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, 2 Sep 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, 8 Sep 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.
1 2
Please login to post comments