Ability to replace style images (png/jpg etc) with WepP images for significantly reduced page size/speed score

[Frode789]

Would be nice to have the option to replace style images (bg/nav/sidebar etc images used in the style) with WepP images. WebP is supported by most of the userbase, only really old safari editions are left out.
Google doesn't like JPG/PNG and you get punished in speed tests. WebP offer a dramatic reduction in size.

My JPG/PNGs (compressed) were 416 kb.
WebP were 102 kb..

 

[Russ]

This isn't something a style has control over. If you want to use webp images you can, you just can't use the upload function that XF offers at the moment. The reason behind that is that XenForo simply doesn't offer support for it yet.

You can hard code the url's in the style properties or the LESS templates, you just can't use the upload function.

So by all means, convert the images to webp, upload them to the same directory and then change the extension. Some older browsers still don't support it: https://caniuse.com/webp

I think cloudflare also has an option to convert the images and serve them as webp if I recall. Might be under the paid plan, not entirely sure.

 

[Frode789]

Sure.

It seems that WebP support is coming to XF now in 2.3, judging by Chris response in the WebP suggestion thread.
Could be a nice idea for then to provide a short guide for how to update the images ourselves from png/jpg. (so we don't have to look through all style properties =) hunting for the style image references)

 

[Russ]

Every style will be different. Majority of our styles don't really use images outside of the logo for the most part. Few exceptions here and there.

Easiest method would be to export your style XML and do a ctrl-f find inside of it. From there you'd be able to find exactly where images are being used.

I'm also not trying to be negative but even if you did this on style images, you'd still have avatars on there which I'm guessing google might flag as "not next gen". So doing this might not even get rid of the flag.

 

[Frode789]

Every style will be different. Majority of our styles don't really use images outside of the logo for the most part. Few exceptions here and there.

Easiest method would be to export your style XML and do a ctrl-f find inside of it. From there you'd be able to find exactly where images are being used.

I'm also not trying to be negative but even if you did this on style images, you'd still have avatars on there which I'm guessing google might flag as "not next gen". So doing this might not even get rid of the flag.

Ah okay, good idea. Thanks.
Mine does, because you converted it from another style, which I believe had quite a few images.

Actually, it should. The front page is more important, and there it is style images + images from widgets/news articles.