Implemented Google WebP Support

[Floren]

This would an amazing enhancement for attachments, especially for sites that use many large pictures.

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels. Webmasters and web developers can use the WebP image format to create smaller and richer images that can help make the web faster.

GD (PHP 5.5) and ImageMagick are supporting WebP. This could be made as option available if PHP 5.5+ is detected. Many of us already use PHP 5.5 anyways.

 

[Masetrix]

something like that. as of now, older gen browsers, safari and apple ios browsers are the only platforms where webp is not supported. so you cannot really treat webp as jpg and directly embed it as images. so a backend mechanism is needed that can detect the browser and load the more optimized version of the image. as of now users have to rely on CDNs to get this done.

Thanks, so +1 from me

 

[Kirby]

Confirmed. Switched it on for the Cloudlfare Pro setup that we use, and it's working great. Thanks.

Hmm ... https://developers.google.com/speed...ds/lg-oled-b9-55-with-1-bright-pixel.2293697/

This complains about https://www.avforums.com/attachments/brightdot-jpg.1319268/ and https://www.avforums.com/attachments/brightdot-jpg.1319267/ not being in a modern format (eg. WebP)

So either this is not (yet) enabled or it does not work:
XenForo does deliver attachments through PHP to do access permission checks and does set header Cache-control: private, no-cache, max-age=0 so CloudFlare shouldn't be able to cache this response (and transform it do WebP for supporting clients) - if they did, this could bypass permissions?

 

[Anatoliy]

if they did, this could bypass permissions?

there is an option to turn OFF Origin Cache Control

 

[arn]

Here's an example of it working

https://images.macrumors.com/t/empP5kSdPPGqKJBZ9WN7VKJOUyo=/800x0/filters:quality(90)/article-new/2020/03/wwdc2020roundupheader.jpg?lossy

Load that in Chrome vs non-Chrome

 

[Anatoliy]

in 2014 this discussion made sense. in 2020 it's just funny.
except it's not funny to pay $55 for xF renewal and $240 for Cloudflare to be able to serve pix in webP.

 

[Chromaniac]

honestly, if only apple can add support for it, we can natively upload and embed webp images like jpegs! plus now we have phones taking photos in heic format. iphones seem to handle the transition well when you upload images from phone gallery to a third party app that has no support for hiec. my samsung failed as it tries to upload the hiec format! these things are best handled by delivery networks. modpagespeed is a good alternative for people (like me) who don't want to pay cloudflare for this functionality.

 

[Karelke]

From a UX point of view, I think XenForo should at least allow the user to upload webp files and convert it to jpg or png. Because right now, if I want to upload an image that appears to be webp, I first have to convert the file with a tool. That's a bit unfriendly IMO.

But if XenForo wants to natively display webp files to the browser, they would have to find a solution for Apple:

Can I Use webp? Data on support for the webp feature across the major browsers from caniuse.com.

.

 

[Kirby]

Here's an example of it working

https://images.macrumors.com/t/empP5kSdPPGqKJBZ9WN7VKJOUyo=/800x0/filters:quality(90)/article-new/2020/03/wwdc2020roundupheader.jpg?lossy

I am sure that this will work (did not test it).
What I wanted to point out (not 100% sure if I am right, but I think it is the case):
Even with Cloudflare supporting WebP (or any other fany image format) for static files, it won't helpt for those images that are most important for forums: attachments - or does it?

 

[arn]

I am sure that this will work (did not test it).
What I wanted to point out (not 100% sure if I am right, but I think it is the case):
Even with Cloudflare supporting WebP (or any other fany image format) for static files, it won't helpt for those images that are most important for forums: attachments - or does it?

it does. I don’t have it turned on for our attachments right now because it’s a lossy conversion and our photography forum members had been complaining it was impacting photos too much because we resize (lossy) them via xf on upload and was doing it again via cloudflare.

arn

 

[Anatoliy]

it does. I don’t have it turned on for our attachments right now because it’s a lossy conversion

but you can set it "lossless" (Polish)

 

[Anatoliy]

@arn Can I config xenForo for lossless resize? If so then when & how?

 

[arn]

@arn Can I config xenForo for lossless resize? If so then when & how?

I don't believe so. I mean if you resize an image, that's inherently lossy. It's possible you could crank up the quality of jpg compression so it won't recompress as much. It's still gonna be lossy. But I don't think that setting is easy to tweak by default on Xenforo.

There are some image compression add-ons, but I'm not quite sure how that would work with regards to order of compression/resizing.

arn

 

[Anatoliy]

I don't believe so. I mean if you resize an image, that's inherently lossy. It's possible you could crank up the quality of jpg compression so it won't recompress as much. It's still gonna be lossy. But I don't think that setting is easy to tweak by default on Xenforo.

There are some image compression add-ons, but I'm not quite sure how that would work with regards to order of compression/resizing.

arn

Just got an answer from Brogan on the other thread.
You would need to override the 85% compression set in the Imagick.php file. (c)

 

[Masetrix]

But if XenForo wants to natively display webp files to the browser, they would have to find a solution for Apple:

A workaround would be in XF - as with the header logo - you would only have the option of specifying an image twice, once (and first) a webp file and as a second image format e.g. the same picture as jpeg

We load our header logo exactly in this way and both Firefox and IOs "safari" display the graphic correctly.

 

[Chromaniac]

Apple has added WebP support in Safari 14!

Apple Developer Documentation

developer.apple.com

For starters, it would be great if XF Image Proxy can add support for WebP files in 2.2.0. One could basically rename all the imgur files to webp and it would be pretty good starting point. Though embedding webp attachment would be very nice. Though I guess devs would wait for it to be widely adopted before support is added

 

[Floren]

An ideal implementation would be a library like Thumbor, it not only will convert a standard large image to any format required in XenForo but will also convert it on the fly to the smallest size and format supported by your browser. I implemented this library successfully at Expedia years ago, we were processing on average 100 million images/hour at blazing speeds because the Akamai frontend.

 

[JoyFreak]

+1

 

[StarArmy]

I'm increasingly running into WEBPs in the wild and I think now would be a great time for WEBP support to be added for XF2.

 

[Chromaniac]

Google seems to have already shifted its interest to the new hot thing in the compressed image segment... AVIF. Both Firefox and Chrome got support for this relatively new image format this week. Chrome developers have also updated Squoosh to support AVIF images. Chromium based browsers should get support in near future. The only problem as usual remains Apple devices.

How to Use AVIF: The New Next-Gen Image Compression Format — Lightspeed

How to Use AVIF: The New Next-Gen Image Compression Format August 5, 2020 Dan Klammer Performance Designer Dan Klammer (@danklammer) on Twitter November 2, 2021 Update: Firefox 93 now supports the...

reachlightspeed.com

 

[MstrfBlng]

I don't think they will shift. As WebP is Google's own format.