WebP image support for FancyBox

[sandomatyas]

There are several extensions which convert the site images to WebP format, e.g: https://dj-extensions.com/dj-webp
It does work with VirtueMart as well, except the Fancybox modal where you'll get the source of the image.
If you check components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js there is a code part like this:

Code Select Expand

J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i
if yout add webp here, it does work

Code Select Expand

J=/\.(jpg|gif|png|bmp|jpeg|webp)(.*)?$/i
Could you please add this to the js file so a VM update won't remove my modification.

[Jumbo!]

Instead of modifying the original file, you can override it by copying the file to your template - templates/YOUR-TEMPLATE/js/fancybox/jquery.fancybox-1.3.4.pack.js

That way the file will never be overwritten by future VirtueMart updates.

[sandomatyas]

Agree, but in this case other users won't have WebP support.

[jjk]

Personally, I will ignore WebP and wait until JPEG XL is supported by all major browsers.   

[Andrew Smith]

Say nothing of Jpeg2000.   

[Milbo]

There are several extensions which convert the site images to WebP format, e.g: https://dj-extensions.com/dj-webp
It does work with VirtueMart as well, except the Fancybox modal where you'll get the source of the image.
If you check components/com_virtuemart/assets/js/fancybox/jquery.fancybox-1.3.4.pack.js there is a code part like this:

Code Select Expand

J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i
if yout add webp here, it does work

Code Select Expand

J=/\.(jpg|gif|png|bmp|jpeg|webp)(.*)?$/i
Could you please add this to the js file so a VM update won't remove my modification.

thank you, I am going to add that.

[Milbo]

Instead of modifying the original file, you can override it by copying the file to your template - templates/YOUR-TEMPLATE/js/fancybox/jquery.fancybox-1.3.4.pack.js

That way the file will never be overwritten by future VirtueMart updates.

We need the knowledge in the team. not somewhere.

[Milbo]

Agree, but in this case other users won't have WebP support.

Thank you for choosing this way.

[Milbo]

Personally, I will ignore WebP and wait until JPEG XL is supported by all major browsers.   

Better tell me the extension to add

[jjk]

Better tell me the extension to add

.jxl
But I would suggest to wait with implementing that until the major browsers move their support from experimental to 'enabled by default'. I think Mozilla will do so with Firefox 92.
If you want to convert one of your images to the .jxl format for testing if your browser can display it already, you may use this converter: https://mconverter.eu/

[Studio 42]

If you support WEBP in fancybox, please support uploading and resizing webp images.
And SVG should also be supported(no need to resize, but need the right link)
Thanks

[man.of.earth]

Compatibility with browsers that do not support webp or other extensions can be obtained using <picture> element:

Code Select Expand

<picture>
<source srcset="/path/to.webp" title="Next generation picture title" type="img/webp">
<img src="/path/to.jpg" alt="Compatibility/fallback image" title="Compatibility/fallback image"/>
</picture>

In case a browser cannot display .webp or .jxl formats, there is a fallback.
This would require a bit of work on the VM function that renders images.

[Andrew Smith]

Given the size of the images used by VM, is the ratio of improvement really worth the effort.  If I'm averaging 60k to 75k for a full size product image (jpg 50% quality in Photoshop save for web, minified further through tinypng.com), then a 15% file size reduction only gets you so far in real terms.

Andrew

[razor7]

Cooooool, this topic saved my day! this is just what I was looking for. Hope WebP, SVG and JXL gets supported by VM.

[hazael]

On Virtuemart SVG displays without any problems. Programmers just have to ignore generating thumbnails because it doesn't make sense - SVG is vector graphics. Now, in order not to display errors with thumbnails, it is enough to enter the same address for the thumbnails.