News:

Support the VirtueMart project and become a member

Main Menu

WebP image support for FancyBox

Started by sandomatyas, June 02, 2021, 14:59:44 PM

Previous topic - Next topic

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:
J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i
if yout add webp here, it does work
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.   ;)
Non-English Shops: Are your language files up to date?
http://virtuemart.net/community/translations

Andrew Smith


Milbo

Quote from: sandomatyas on June 02, 2021, 14:59:44 PM
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:
J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i
if yout add webp here, it does work
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.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

Quote from: Jumbo! on June 02, 2021, 18:02:23 PM
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.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

Quote from: sandomatyas on June 03, 2021, 09:22:11 AM
Agree, but in this case other users won't have WebP support.
Thank you for choosing this way.
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

Quote from: jjk on July 05, 2021, 22:58:08 PM
Personally, I will ignore WebP and wait until JPEG XL is supported by all major browsers.   ;)
Better tell me the extension to add
Should I fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

jjk

#9
Quote from: Milbo on July 26, 2021, 22:15:26 PM

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/
Non-English Shops: Are your language files up to date?
http://virtuemart.net/community/translations

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:

<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.
MGS Creativa - VirtueMart Payment Plugin Experts
http://www.mgscreativa.com

Take a look at our downloads section for VirtueMart payment plugins and mouch more!
http://www.mgscreativa.com/en/online-store

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.