webp in v18.2

[DavidCP]

Hi, has anyone sorted out how to actually get webp images working? I have read through the post below from 2020 which sets up scenario from Norman for v2016. But 18.2 now lets you chose webp. Yet it doesn't really work because you need to still serve a jpg for those browsers or apple that don't like webp. I have come up with a proof of use for section images where I have created a couple of variables. This allows me to serve a different section layout which has the picture html option to use a webp or jpg image. I have then ftp'd the extra webp image to the server. So not really using it in the best way at all. I can see nothing in sellerdeck help files about webp images at all. I know there are lots of different server setups out there but it could do with something from Sellerdeck about how to actually implement this feature. Just allowing it as an image option only deals with half the problem. There is the .htaccess method of showing webp rather than <picture> but from what I have read then the picture method seems to be prefered.

my Christmas fabrics page https://www.cottonpatch.co.uk/acatal...s-Fabrics.html is my working example and Makower Christmas fabrics is the webp or jpg image.

ps sorry this software doesnt seem to like putting links in properly which seems a bit of a basic feature.

[brucet]

Hi David. I asked our CTO about this. To use .webp section images you would need to add a new section-level variable for the webp image filename. Then add a srcset attribute to the image tag for the section image. Something like:

<img src="<actinic:variable Name="SectionImageFileName"/> srcset="<actinic:variable Name="SectionImageWebpFileName"/>"

where "SectionImageWebpFileName" is the name of the new variable.

I hope that helps

[Mike Hughes]

Just for clarity, as I'm trying to make sure I understand this. The things we have to do here are:

1. Be able to setup Sellerdeck to take an image in webp format
2. Some browsers cant read webp images so we need to give them an alternative image
3. Implement this effectively in Sellerdeck.

The 'Picture' method would be to use something like this on the layout

<picture>
source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
/picture>

The idea being that browsers that can recognise webp images will use them. ones that can't will use the jpeg option.

Bruce's suggestion above looks even simpler if it works.

It seems to me that the ideal option, in terms of doing this with sellerdeck, minimising effort, maximising workflow and making sure it works whatever would be to use the same filename for your jpeg and webp images and then to use some php in your layout that does something like this (using Bruce's simple option as an example.)

<img src="<actinic:variable Name="SectionImageFileName"/>

block = php
MyWebpImageName = str-replace (".jpg",".webp", "<actinic:variable Name="SectionImageFileName">");
if (file_exists(MyWebpImageName)) {
    echo "srcset="<MyWebpImageName>";
}
/block

Note: This is untested pseudo code. It will probably need a bit of tuning to work properly.

This way you just enter the jpg image name into sellerdeck as usual and the layout will check if the equivalent webp images exists and if it does include the srcset option for that image.

I don't think sellerdeck will upload the webp images to the server automatically as it doesn't know about them. That will need to be done manually or some other solution found to do that..

[DavidCP]

Thanks Bruce and Mike, in essence that is what I have done. I have created two variables, one says that it is using a webp and the second is the webp file name, this is the same as the jpg name just with .webp added. I then have a block if that recognises that it is a webp layout and will use the <picture and sourceset html> examples to load a webp image. Part of the reason that I had to do it this was is that there did not seem to be a section image actinic variable that was raw and did not include the file path. Fundamentally my html code is okay but I am not as familiar with php code.

The fact that Mike suggests a php option and Norman in the original v16 post also suggests a php option means that I probably need to investigate this route more.

I was trying to ascertain if I had missed something in that by just adding support for webp in the image field in 18.2 does not actually solve the problem because two image files are needed, the webp and the jpg. It then becomes even harder to implement because as Mike points out there is no way to upload the webp files as part of the normal process. So you have to remember to ftp them or similar. Additional files under >Design is not really an option as soon as you have even a few images.

Having said all that it does appear that the webp route is worth pursuing. Having done this a test section page then I can see that there is quite a large saving in file size and that is what google likes.

[NormanRouxel]

I have an add-on that automatically creates webp images from the existing product or section JPG images and incorporates them into the Product / Section image layouts.. So if applied to an existing JPG based site, you don't need to do anything to have webp versions uploaded and available. And the existing JPG images are still there for browsers that don't support webp.

Email for details.