In Infradox version 32.19 we introduced WebP support.

Introduction

“WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000, without loss of image quality. The WebP format essentially aims at creating smaller, better looking images that can help make the web faster.” (source: Google.com).
To learn more about WebP, please visit https://developers.google.com/speed/webp/faq.

The use of WebP images will significantly improve page loading times. Faster loading pages are not only important for an improved user experience, but also for your SEO. Because it’s essential that bots can fetch HTML with reasonable respons times.

Recommended reading

Responsive slide show images with WebP support.

Which web browsers natively support WebP?

Currently WebP files are supported by most modern web browsers. Eventhough WebP has been around for 10 years, Safari only recently started to support the WebP image format (version 14 or later). So some users who haven’t updated their Macs yet may not be able to see your WebP images. Which is why we offer fallback support. I.e. if a browser does not support WebP, JPEG files will be served instead.

What you need to know

Your thumbnail and preview files are still JPEG files, but you can now use WebP files for your home page slide show, action boxes and so on, for contributor profile pages and for images on your ancillary pages. Using WebP in combination with lazy loading images will improve page loading times by a lot. Using WebP images on some pages requires a change in your workflow. To use WebP images on your home page may require changes to your back office settings, i.e. if you use a slide show and/or action boxes. This is explained below.

What you need to do

Home page slide show

If you use the new responsive slide show home page block, then read the article Responsive slide show images with WebP support. The below instructions are relevant only if you use any of the other slide show blocks.

1. If you haven’t already done so, upload your JPEG images via File manager to the folder “\home\slideshow”. Use valid file names with the .jpg file extension – no spaces, accented characters etc.
2. Important, for fallback support, don’t use .jpeg file extensions – use .jpg always. If you have already uploaded files with the .jpeg extension, then rename those files with the rename function in File manager
3. Select all the JPEG images that you want to convert in the “slideshow” folder (by clicking on the thumbnails), and then click on WebP in the toolbar. Click OK to have WebP versions generated and wait for the process to complete.
4. Go to Site Configuration, Home page configuration and then open the section “Slide show”.
5. Tick the box “WebP slide show images”, scroll down and click Save.
6. To enable fall back support for older browsers, go to the Code editor and select the template “Client Script” (you can also enter the number 4 in the input box and then press enter to load the file).
7. Click on “Load examples” to add the script (the example file “xswebpfallback.txt” explains what to do next).

Home page action boxes

1. If you haven’t already done so, upload your JPEG images via File manager to the folder “\home\actionboxes”. Use valid file names with the .jpg file extension – no spaces, accented characters etc. Don’t use .jpeg file extensions, use .jpg always.
2. Important, for fallback support, don’t use .jpeg file extensions – use .jpg always. If you have already uploaded files with the .jpeg extension, then rename those files with the rename function in File manager
3. Select all the JPEG images in the “actionboxes” folder (by clicking on the thumbnails), and then click on WebP in the toolbar. Click OK to have WebP versions generated and wait for the process to complete.
4. Go to Site Configuration, Home page configuration and then open the section “Action boxes”.
5. Change the file names of your action boxes by replacing the .jpg file extension with the .webp file extension.
6. To enable fall back support for older browsers, go to the Code editor and select the template “Client Script” (you can also enter the number 4 in the input box and then press enter to load the file).
7. Click on “Load examples” to add the script (the example file “xswebpfallback.txt” explains what to do next).

Enable lazy loading for the action box images

1. To enable lazy loading, put a + in front of the file names. It is recommended to do this for the action boxes that are “below the fold. Note that you can use this even if you don’t use WebP images.

Contributor pages

You can upload a profile and/or cover photo on the contributor profile pages as usual. However, a WebP version is now automatically created from the JPEG files that you upload. So you will not have to manually convert the JPEG files. Both the contributor profile pages and the contributor overview page will use the WebP version, or if you haven’t uploaded a new JPEG file then the current JPEG version will still be used. It is recommended to reupload all profile and cover photos.
You don’t have to add fall back support for older browsers. This is already built in.

Enable lazy loading for images on the contributor overview page

This is not required, but it is recommended.

1. Go to the Code editor and enter the number 13 in the input box, then press enter to load the template.
2. Click on “Load examples”, select “contributor-overview-list-item-lazy-32.18.txt” in the list and click “View code”.
3. It is recommended to click “Copy and close” to copy the example code to your clipboard. Then paste the code underneath the existing code so that you can see what’s changed.
4. Either replace the existing code or make changes as per the example in the above file.
5. Save and test your changes.

Custom pages

If you want to use WebP images in the custom pages that you create with the “Pages” function, then upload your images as JPEGs as usual. Then select the JPEG files and click on the WebP button in the toolbar to have WebP versions generated. To add fallback support, you’ll need to add script to template 89. An example is available via “Example code” in the Code editor.