XF 2.3 Image optimization, enhanced image resizing, and more!

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.

hys_4_option.png


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.

hys_4_rebuilds.png


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.
 
I can reproduce the effect mentioned by @Chromaniac on a local 2.3.0 Beta 4; image proxy turned off

Within one post:

Image inserted via insert image dialog > URL
BB-Code
[IMG size="192x192"]https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656[/IMG]

HTML
HTML:
<img src="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" data-url="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" class="bbImage" data-zoom-target="1" style="" alt="11388.jpg" title="" width="" height="" loading="lazy">

Image inserted manually
BB-Code
[img]https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656[/img]

HTML
HTML:
<img src="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" data-url="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" class="bbImage" data-zoom-target="1" style="" alt="11388.jpg" title="" width="" height="" loading="lazy">

So for images inserted via dialog the [img] tag has attribute size - a manually inserted [img] does not.

In both cases the generated HTML does not have width / height set; this happens because the analyzer code unconditionally sets $this->images[$hash], so if an image is used multiple times within the same post and a later usage does not have attribute size this overwrites the previous value.

If the order is switched (eg. [img] without size first followed by [img] with size both instances have width / height set in HTML).

IMHO width / height should always be recorded, no matter if the [img] has attribute size or not or if the image proxy is enabled or not.
 
Last edited:
Can you check if enabling proxy would fetch and store dimensions of images inserted manually or past images that didn't have dimensions saved? It doesn't seem to be for me. Thanks!

I was hoping to enable proxy for all images for a month to have dimensions updated for bulk of the images accessed in posts 😬

I also ran the post rebuild process but that didn't do this as well though I suppose it was too much to expect I suppose.
 
We have the image proxy enabled here and clearly it works. But there does appear to be an issue if image proxy is disabled. We had this bug during development so there may have been a regression there.

If there's a bug here though, please post a bug report. Otherwise, let's move this to a support thread.

HYS threads should not be the first choice when it comes to these types of discussions, even if they do relate to the feature being discussed.
 

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.
Will webp also support smilies and(or) importing them as well & reactions?

Sorry if this has been asked before.
 
Last edited:
sorry Noob here how do I optimize the images in the media gallery
It's in the first post.

 

I created this suggestion based on the image optimisation order
 
xf-rebuild:attachment-optimization xf-rebuild:avatar-optimization xf-rebuild:profile-banner-optimization
@Chris D is there any way to speed up the process? I mean xf-rebuild:attachment-optimization
I tried to run multiple instances with --process but it seems the command isn't working.
 
Back
Top Bottom