Image optimization with WebP support
Arguably, we could have talked about this in our bumper
Boosting performance entry but it wasn't quite ready to be shown at that point. (I started working on it this week and I haven't yet mastered the art of time travel).
Initially the scope of our WebP support in XenForo 2.3 was to merely allow users to upload WebP files and have them correctly displayed inline. This would have been a positive change on its own as the format becomes more prevalent across the web, but it doesn't really do much on its own to solve the issue of disk usage which, of course, then also has a positive effect on performance.
But, this wasn't enough.
View attachment 292273
If you wish to optimize, automatically, all future image uploads you simply need to enable this option.
On upload, all currently supported image types (except GIFs) will be saved to WebP format.
Side note: As is the case now, thumbnails, profile banners and avatars (and anything else that has a programmatically set file name) will be served with a .jpg extension, regardless of the underlying file format.
If you have custom content types which already use the attachment system, such as we do with Media Gallery and Resource Manager, images uploaded to those will be automatically optimized too.
In fact, if your add-on handles uploads via the default approach, namely the
XF\Http\Upload class, all new image uploads will be optimized automatically. This extends out into pretty much every system we have, including the admin asset upload system.
As a developer, if you wish to opt-out of this behaviour for any reason, you can do so with the following one-liner:
PHP:
$upload->setImageOptimize(false);
That deals with future uploads, but, many of you will be wondering how to optimize existing files. So you'll be pleased to hear that you are able to rebuild all of your existing attachments, avatars and profile banners automatically.
View attachment 292274
These are somewhat typical rebuilds that you can kick off from within your admin control panel on the "Rebuild caches" page.
With this being a rather intensive and lengthy process, if you'd prefer to run this without the risk of browser timeouts and supervision, you can also use one of the built in commands:
Code:
xf-rebuild:attachment-optimization
xf-rebuild:avatar-optimization
xf-rebuild:profile-banner-optimization
As a developer, adding support for your own content types is trivial by extending the
AbstractImageOptimizationJob class.
We have run this already on a development copy of the XenForo Community forum. In doing so, the file size reported via the
xf_attachment_data table
before the conversion was around 40GB. The file size reported
after the conversion is around 19GB.
These are significant savings and will also have a positive impact on performance.
The "not so good" news
WebP is now supported by every single major browser. Anyone using an up to date browser will not experience any issues with viewing images. However, certain Apple devices and browsers prior to September 2020 do not support WebP.
Specifically, if you are using iOS 14 or above, there is no issue at all. Safari 14 and above is great, too but you must be running at least macOS 11 Big Sur for WebP images to display.
In earlier browsers, these users will simply not see WebP images at all. They will appear as broken images.
As time progresses, this is naturally an ever decreasing issue as people update their software and hardware. But it is something you should be aware of and think about before blanket converting all images to WebP.
