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.
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.
Agree, but in this case other users won't have WebP support.
Personally, I will ignore WebP and wait until JPEG XL is supported by all major browsers. ;)
Say nothing of Jpeg2000. 8) :P
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.
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.
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.
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
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/
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
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.
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
Cooooool, this topic saved my day! this is just what I was looking for. Hope WebP, SVG and JXL gets supported by VM.
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.
Quote from: razor7 on July 27, 2021, 16:11:02 PM
Cooooool, this topic saved my day! this is just what I was looking for. Hope WebP, SVG and JXL gets supported by VM.
Yes, this will be an important marketing bullet point for VirtueMart v4. :P
Andrew
Don't think about marketing for VirtueMart, but finally think for everyone from the real point of view of e-shop owners (fortunately, the goals of e-shop owners are not the same as the goals of VirtueMart developers).
WebP can be used using plugins to Joomla (dj-extensions, rupostel)
SVG can be used all over the web now (preferably after a slight adjustment of Joomla settings)
JXL - before the support of browsers, all e-shops that will be waiting for programmers will disappear here in the discussion, because google will penalize them for core vitals and speed from 1.6.2021.
Google is about to become more brutal in penalising slow sites?
Andrew
He's already doing it
since moving from the beta version of Core Vitals to the full version.
A common template with VirtueMart now has a rating of 20-30% == is in the red band == this site is not recommended for display in search results because it contains critical errors.
Thanks for that. Is there a link for somewhere we can go for further reading on this?
Andrew
https://developers.google.com/search/blog/2021/04/more-details-page-experience#new-report
https://web.dev/vitals/#core-web-vitals
Quote from: Studio 42 on July 27, 2021, 13:49:51 PM
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
SVG works, as far as I know. Tell me what I have to add/change and I wlll do. But dont wonder, I am in holidays next weeks.
Quote from: hazael on July 27, 2021, 22:15:12 PM
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.
Okey, I get it. Should be easy to write this simple exception.
Quote from: pinochico on July 28, 2021, 08:35:39 AM
Don't think about marketing for VirtueMart, but finally think for everyone from the real point of view of e-shop owners (fortunately, the goals of e-shop owners are not the same as the goals of VirtueMart developers).
This is rude and just not true. Or I dont understand what you want to say.
Any developer here is webshop owner and/or manages shops for clients.
Quote from: Milbo on July 28, 2021, 20:36:20 PM
Quote from: hazael on July 27, 2021, 22:15:12 PM
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.
Okey, I get it. Should be easy to write this simple exception.
The fun fact. I just added 3-4 days ago the orginal width, height, ratio to the media table. It is set for the original image. The idea is that we always set the height and width for lazyload. But we also need that for the svg, I assume.
Hi Milbo
Just a simple comment :
Yes for SVG, the width and height should always match the size of the frame displayed on the screen in which the image is located, because it define the size of the SVG that we want on screen.
And if you do not set width and height, that's the container of the SVG that will define the size, and as google will test the image on it's own, and as SVG fill up the screen, you'll have an error in webmastertools for the mobile ergonomics because of Content larger than the screen.
(I had the case, that's why I'm talking about it)
Regards
hazael,
It's the solution for you but not for all shop manager.
The devs have only to check the file extension and disable the thumbs creation for SVG, so you have not to manually add the link, because it's more user friendly.
jpeg is now thumbnailed as jpg and works. Just check the new version and tell me what is missing now. I "lost" a bit track, but you know what I mean. You know your requests, I could recherche it, but then I would be again theory puppet.
So just check vm4.0.2 and tell me, what is missing. You need to enter the same link for the thumbnail so that it works as expected, I wonder how I can write a workaround for that.
Hello, today I installed the VirtueMart 4.0.14 10805 version. I had some problems that were indicated in the forum as being corrected and would come out in later versions.
Webp images is one of them, but I can't get it to work in Virtuemart.
In Joomla I do have some webp images, including the logo and it looks good.
The modification explained in this post did not have the corrections that are mentioned in this post, the previous version of Vistuemart was 4.0.12
What can be?
QuoteWebp images is one of them, but I can't get it to work in Virtuemart.
pls you have to find better - etc. rupostel.com
In OPC is plugin for webp, we use with VirtueMart
Look at this site: www.zelenazeme.cz
Even so, why is the file indicated in this post not updated with this version of Virtuemart.
Something similar happens with PHP8, it seems that there is a problem in some language file and it would be fixed in later versions.
My files have permission 644 and these files are in their original folders, so the changes should be updated.
SVG is now supported by all browser in IMG tag, my request is from 2021 !
WEBP images can be generated with this simple free plugin: https://dj-extensions.pl/dj-webp
Virtuemart's problem is that it automatically generates thumbnails - for SVG it should be disabled.
SVG can be easily displayed on the product page. Upload a png image to the product. and in a separate folder with the same name, add the SVG file (via ftp).
First you check in PHP if the file exists: file_exists()
And then (if it exists) you replace png with svg: str_replace('.png', '.svg',$img);
Ideally, Milbo would make a separate custom form for uploading images in SVG format :)
For Svg, it's really simple
If .svg, then do not create the thumb and use same file
2 years to add this ?