ElearningWorld.org

For the online learning world

Elearning WorldLearning designMoodleTechnicalUX

WebP

Introduction

As we connect to the world through devices which can have both limited processing power and bandwidth it is important that web page load is as fast as it can be against those criteria. Even viewing web pages on modestly powered desktops and tablets, the user experience and expectation that they will be able to use the page as soon as possible is now here. Gone are the days of understanding the communication hardware had its limitations and accepting that as the reason for slow page load.

A big part of the bandwidth of a page can be in its pictorial elements. But not the processing element as that is relatively fast when compared to any scripts (even if they are smaller). Having images that are both small and of sufficient quality for any given device is the key.

There is now a means of delivering device specific image resolutions ‘srcset’ (see: css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset) but that is not what this post is about. This is about a new image format ‘WebP’ that looks to replace other image formats traditionally used on web pages.

Disclaimers

Firefox® is a registered trademark of the Mozilla Foundation.

Ubuntu® is a registered trademark of Canonical Ltd – www.ubuntu.com/legal/terms-and-policies/intellectual-property-policy.

Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.

Other names / logos can be trademarks of their respective owners. Please review their website for details.

I am independent from the organisations listed above and am in no way writing for or endorsed by them.

What is WebP

Just like JPEG images are able to be compressed due to the photographic properties of an image using an algorithm and the fact that our brains can interpret them and ‘fill in blanks’. We can still understand what an image represents even if the quality is low. The WebP image format uses another method of implementing that compression algorithm that (is claimed) results in smaller images for the same standard level of quality.

The format has been around since 2010, however not all browsers support it. Please visit ‘caniuse’. Therefore its your choice to use the format depending on your user base.

Example

As WordPress and some browsers don’t support WebP, here is an example image of a web page I created that illustrates the difference between the same image in JPG and WebP formats at different levels of quality:

The image of the Ducks is mine, so if you wish to replicate the page and try out the ‘cwebp’ conversion program (you’ll also need to make the lesser quality JPEG’s too – 100 quality version supplied), then feel free to use the images and markup contained in ‘March_2019‘ for that purpose.  The zip file contains: ducks_100.jpg, ducks_no_webp.jpg and cwebp.html.  Please don’t use the image(s) for anything else without first contacting me for permission. The file sizes stated are my results, yours could be different.  But if you just want to view the page, then download the much larger ‘March_2019_all‘ zip file, extract to a folder then follow instruction ‘4’ below.

Instructions

  1. Create ducks_90.jpg, ducks_80.jpg…. ducks_10.jpg from ducks_100.jpg using an image program of your choice (the number in the filename represents the quality to tell the program).
  2. Create ducks_100.webp, ducks_90.webp…. ducks_10.webp from ducks_100.jpg using the ‘cwebp’ program that you can get from: developers.google.com/speed/webp/docs/precompiled and follow developers.google.com/speed/webp/docs/using.  Again, the number in the filename represents the quality.
  3. Place them and the supplied images in a folder along with the ‘cwebp.html’ file.
  4. Open ‘cwebp.html’ in a browser.  The file contains no scripts.  The images will be responsive.

Grid format

So far this is not really Moodle orientated as it currently (at the time of typing) does not support WebP images (the mime type ‘image/webp’). However I wanted something that you could install on Moodle that would demonstrate this. So, what can I enhance that manages images? The Grid format.
In version 3.6.0.4 for Moodle 3.6 I’ve added a new setting ‘defaultdisplayedimagefiletype’, where the administrator can choose to employ WebP images instead of the original format for the displayed image. You can read more about this release here: moodle.org/mod/forum/discuss.php?d=383324.

Using Moodle 3.6.2+ (Build: 20190301) with:

  • Grid format test course (that I supply with the format in the ‘test’ folder) with a course image container width setting of ‘768’.
  • Theme designer mode off.
  • Firefox only reporting the ‘images’ on the browser development tools ‘Network’ tab.
  • Boost theme.

I found that the image (overall page) sizes reduced from 423kb to 296.81kb. Which is not much, but imagine a course with many images? If you’re getting the same for less then surely that must be a good thing.

The future

As WebP supports both lossy and lossless compression that appears to be better than existing image file types, then it certainly looks like the future of images on the web. But adoption will surely depend on browser uptake and for browsers that don’t the impact of their market share. Or the willingness of developers to employ fallback techniques: developers.google.com/speed/webp/faq#how_can_i_detect_browser_support_for_webp.

References:

Gareth Barnard
Latest posts by Gareth Barnard (see all)
blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

2 thoughts on “WebP

  • Wow – very interesting post Gareth !
    I knew about WebP, but being a Safari user, and Apple don’t support it yet, I haven’t done anything with it – generally sticking with .png
    I certainly didn’t know you had added support to Grid format !
    Hmmmm, I wonder if the Foundation Theme could have native support for WebP in a similar way?
    But maybe with fallback for .png for browsers that don’t support WebP yet?

    Reply
    • Hi Stuart,

      Having two displayed images in the Grid format is possible with fallback markup, but the code would be a little more complex and it would take time to write.

      Whilst themes, such as Foundation would benefit from WebP, most of the content is from other plugins. But could be possible for theme stored content, again, more complex.

      What really needs to happen is more global support of WebP and Moodle core supporting the mime type so that users can upload images of the type in the first place.

      Gareth

Add a reply or comment...