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.

 

[Floren]

A test I performed, to compare the sizes. JPG files are already compressed (unlike PNG) and WebP managed to squeeze another 8KB out of the picture without losing any quality.

JPG - 170KB

WebP - 162KB

 

[eva2000]

Would be nice indeed if more web apps natively supported WebP

My Xenforo forum is already setup to auto convert jpg/png images to webp for support browsers only via Nginx Pagespeed module and there's huge savings to be had for bandwidth as well as page speed.

Nice savings to be had ~38% according to my pagespeed stats below

image_file_count_reduction:                                        0
image_rewrites:                                                  633
image_resized_using_rendered_dimensions:                           0
image_norewrites_high_resolution:                                  0
image_rewrites_dropped_intentionally:                            167
image_rewrites_dropped_decode_failure:                             0
image_rewrites_dropped_mime_type_unknown:                          0
image_rewrites_dropped_server_write_fail:                          0
image_rewrites_dropped_nosaving_resize:                            0
image_rewrites_dropped_nosaving_noresize:                        167
image_rewrites_dropped_due_to_load:                                0
image_rewrites_squashing_for_mobile_screen:                        0
image_rewrite_total_bytes_saved:                             4440146
image_rewrite_total_original_bytes:                         11674919
image_rewrite_uses:                                            52672
image_inline:                                                  20451
image_webp_rewrites:                                             378
image_rewrite_latency_total_ms:                               125055
image_ongoing_rewrites:                                            0
image_webp_conversion_gif_timeouts:                                0
image_webp_conversion_png_timeouts:                                0
image_webp_conversion_jpeg_timeouts:                               0
image_webp_alpha_timeouts:                                         0
image_webp_opaque_timeouts:                                        0

 

[Joe Link]

Crossing my fingers for this one.

 

[Amin Sabet]

Definitely would be appreciated. Now supported by Chrome, Firefox, and the latest versions of Safari as well! Edge too!

 

[cyadron]

Any updates?

 

[Malchishka]

When webp?

 

[Robert9]

Haha. This is from 2014.

 

[MstrfBlng]

Yes it is, but it is still a very good feature. Maybe someone is able to make a plugin for it, like Yireo did for Magento 2:

GitHub - yireo/Yireo_Webp2: Magento 2 module to add WebP support to Magento 2

Magento 2 module to add WebP support to Magento 2. Contribute to yireo/Yireo_Webp2 development by creating an account on GitHub.

github.com

That module generates webp images and adds them as the primary image to serve and only when the client does not support webp, it will serve the jpg / png alternative. It is a brilliant plugin!

 

[MstrfBlng]

The problem also is that the attachments are generated by php, thus a CDN is not able to serve them. Any modern CDN offers the automatic conversion to webp, but that doesn't work with Xenforo at this time, which is a pity. @Brogan are there thoughts about this from Xenforo's perspective?

 

[DroidOne]

The problem also is that the attachments are generated by php, thus a CDN is not able to serve them. Any modern CDN offers the automatic conversion to webp, but that doesn't work with Xenforo at this time, which is a pity. @Brogan are there thoughts about this from Xenforo's perspective?

Any update on this?

 

[Vroomm]

If you're using Cloudflare (everyone should be really) there's an option to automatically convert images to webp format.

 

[Alpha1]

If you're using Cloudflare (everyone should be really) there's an option to automatically convert images to webp format.

Unfortunately there still is no XenForo - CloudFlare integration. For example: XenForo makes use of version strings for avatars. Its possible to set Cloudflare to ignore this, but it requires additional functionality to make this work.

 

[Chromaniac]

Cloudflare does index images with version strings

 

[arn]

Unfortunately there still is no XenForo - CloudFlare integration. For example: XenForo makes use of version strings for avatars. Its possible to set Cloudflare to ignore this, but it requires additional functionality to make this work.

I don't follow. You want Cloudflare to use the version string, for cache busting.

Looks like they use Cloudflare for caching here too: https://xenforo.com/community/data/avatars/l/7/7212.jpg?1587374740

 

[Stuart Wright]

Is it possible to serve webp when the browser supports it?
For a page full of posts with up to 30 avatars on it, switching to webp would make a difference even if we didn't convert attached images.

 

[arn]

Is it possible to serve webp when the browser supports it?
For a page full of posts with up to 30 avatars on it, switching to webp would make a difference even if we didn't convert attached images.

That’s what cloudflare and other cdns do. They can serve up webp selectively. It’s also possible to configure your own web server to do same.

 

[Stuart Wright]

That’s what cloudflare and other cdns do. They can serve up webp selectively. It’s also possible to configure your own web server to do same.

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

 

[Masetrix]

hmm ...
What I don't quite understand (language barrier?)
Why, or for what, does XF need webp support?
It is quite sufficient if I have all jpg/jpeg/gif etc.
convert files to webp.
XF then delivers them and if the browser understands the webp format, it also displays the images.

Or is it meant that XF recognizes whether a browser understands webp and delivers other graphic formats if the browser does not yet know webp?

 

[Chromaniac]

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.