webp images

[tristam]

After doing a PageSpeed Insight I get the speed suggestion for mobile

Serve images in next-gen formats 1.35 s
Efficiently encode images 0.9 s

This is quite a significant saving so I have been looking into webp images.
I have spent ages reading loads of blogs about the advantage of these but no one really tell you how to do it.

Sellerdeck doesn't recognise the .webp extension.

I read that this can be done via the htaccess file.

I did contact my site host and had the answer

You are able to add any required custom mime types in a .htaccess file which should achieve what you're looking for, I believe this should be AddType image/webp .webp. Unfortunately its not possible to enable globally at the minute, if at some point we do enable it globally is shouldn't require you to change the .htaccess file.

Not really sure whet all this means.

Am I supposed to be changing the word image in AddType image/webp .webp. with a jpg file then this some how converts it? Then upload the webp images to the acatolog folder on the server?

All too confused really! I tried to find a dummies guide.

[Goz]

This is an interesting article if you fancy giving yourself some work..... https://css-tricks.com/using-webp-images/

[Buzby]

If you run your site through Cloudflare they will serve your images in webp format.

If your willing to pay enough they will also serve the correct image size for every browser, so no speed is lost in resizing images.

[NormanRouxel]

There's not much you can do with webp images in SellerDeck 2016. SD, as you've seen, only allows you to enter images as GIF, JPG or PNG.
And the version of PHP that SD 2016 uses doesn't support webp images so no chance of auto creating them.

Things are better with SD 2018. It still doesn't let you select an image of webp type but its embedded PHP does support the imagewebp function: "Output a WebP image to browser or file".

This would let you (with a bit of work) replace your Standard Product Image layout with one that auto-creates the corresponding webp image and replaces the image tag with a <picture>...</picture> that makes the webp image available plus the original image for browsers that don't support webp. See https://css-tricks.com/using-webp-images/ and scroll down to Using WebP in HTML.

The final challenge would be getting SD to automatically upload .webp images and, other than adding it to design / additional files, I've not found a way to do that.

If the above is too complex, then running server-side code to return these images would be the way to go. Or, as Buzby mentions, use Cloudfare.

[brucet]

We will keep an eye on this format, but it's currently unsupported on Apple devices. So you would need to provide versions in an alternative fomat, which means Norman's solution is probably a better one anyway

[tristam]

Thanks for your answers. As this can't be done in SD 2016 and I don't want to upgrade to SD 2018 it looks like server side via htaccess is the way to go.

I was advised to use the code AddType image/webp .webp. in the htaccess file. I have uploaded a few webp images upto the server in the same folder as the jpg. Nothing happens.

Does anyone know what I am missing? Also as its not possible to enable globally what else do I need to do for every image or is this a huge amount of coding in htaccess file?

The page I have experimented with is https://www.thepenzone.co.uk/acatalo...pen-702tw.html

[Seorch]

I had a look at this last year and gave up for now and looking at moving to http2 cloud servers first.

RewriteCond %{REQUEST_FILENAME}.webp -f RewriteRule \.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [L]

If the condition and rule don't match, the request will fall through and serve the file (.jpg/.png) as is.

[NormanRouxel]

Let's assume you've uploaded a webp image file (say testimage.webp) via SellerDeck's Design / Additional files. Then you should be able to view it in a compatible browser via the URL:

www.thepenzone.co.uk/acatalog/testimage.webp

If you don't see the image in your browser then you have to check if it's on the server and if the server is sending it with the correct type.

Until the above works you can't move on.

Next step is the big one. You need to convert some Product Images to their corresponding webp format. There are tools to do this - google for them. Save them in the same place as the original image but with the extension .webp.
Unfortunately these images won't be detected by SellerDeck so you'll have to manually upload them to the acatalog folder on your server. FTP is the way you do this. I use FileZilla - google for instructions. Or if you're only doing a few, add them via Design / Additional Files.

You have to write code to amend layout Standard Product Image and generate the webp <picture> tags if a corresponding .webp image exists for your usual jpg product images. Edit layout Standard Product Image and replace lines:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<img style="max-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>px;" src="<actinic:variable name="ProductImageFileName" />"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

With:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e">
<img style="max-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>px;" src="<actinic:variable name="ProductImageFileName" />"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
<actinic:block if="file%5fexists%28str%5fireplace%28%27%2ejpg%27,%20%27%2ewebp%27,%20%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20encoding%3d%22perl%22%20selectable%3d%22false%22%20%2f%3e%29%29%20%21%3d%20true" >
<!-- we only have a JPG image -->
<img style="max-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>px;" src="<actinic:variable name="ProductImageFileName" />"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>
<actinic:block if="file%5fexists%28str%5fireplace%28%27%2ejpg%27,%20%27%2ewebp%27,%20%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20encoding%3d%22perl%22%20selectable%3d%22false%22%20%2f%3e%29%29%20%3d%3d%20true" >
<!-- we have a WEBP image -->
<picture>
<source srcset="<actinic:block php="true">echo str_ireplace('.jpg', '.webp', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');</actinic:block>" type="image/webp">
<source srcset="<actinic:variable name="ProductImageFileName" />">
<img style="max-width: <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%3d%3d%20%22%22%20OR%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3c%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageWidth" /></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e%20%21%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22ProductImageWidth%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22ProductImageMaxWidth%22%20%2f%3e" ><actinic:variable name="ProductImageMaxWidth" /></actinic:block>px;" src="<actinic:variable name="ProductImageFileName" />"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</picture>
</actinic:block>
</actinic:block>
</actinic:block>

And that's you done.

WARNING: Code above only lightly tested and it's for standard SellerDeck. Thepenzone is using Magic Zoom Plus and that requires a customised Standard Product Image layout so much more work will need to be done to integrate the above with it.

[tristam]

Thanks for your help with this.

I had a play around with this on the product page but couldn't get it working with the Magic Thumb so I thought I would have a go at the section page https://www.thepenzone.co.uk/acatalo...nsend-pen.html

I got it working with the first image Cross Townsend 10k Rolled Gold Ball Point Pen as you will see this is a webp image. I then created webp images for the rest of this page and uploaded them to the same location on the server via FileZilla.

BUT Non of the other images are showing, they remain as jpgs. I have checked that the images exist by temporarily changing images. It just doesn't want to place them anywhere else. Can't work out what I am doing wrong.


Thanks for your help

[NormanRouxel]

It's working. You have code:

<!-- we have a WEBP image -->
<picture>
<source srcset="CrossPens\small-CR_702TW.webp" type="image/webp">
<source srcset="small-CR_702TW.jpg">
<img src="small-CR_702TW.jpg" class="img-responsive"
border="0"
title="Cross Townsend 10k Rolled Gold Ball Point Pen"
alt="Cross Townsend 10k Rolled Gold Ball Point Pen" />
</picture>

And only file small-CR_702TW.webp is being loaded in the Chrome browser. See screenshot.

[NormanRouxel]

A P.S. I got interested in this and have written an add-on that automatically generates the .webp images and uploads them. Catch is that it only works on SD 2018 as the PHP version needed to generate the webp images is only available from SD2018 on. If there's anyone with a SD2018 site who'd like to try it out please get in touch.

Here's the trick I used to get over SD not detecting .webp files for upload. You create webp images in the same place as each Product Image with names like <productimagefilename>-webp.jpg
They're webp images but they end in .jpg so SellerDeck can detect and automatically upload them.
Your small-CR_702TW.jpg image would be converted to webp image named small-CR_702TW.jpg-webp.jpg

And the line that loads the webp image becomes:

<source
  data-src="<actinic:variable name="ProductImageFilename" />-webp.jpg"
  srcset="<actinic:variable name="ProductImageFilenameRaw" />-webp.jpg"
  type="image/webp"
>

The data-src="..." part fools SD into uploading the file.
The srcset="..." loads our webp image into the browser.
The type="image/webp" tells the browser to ignore the .jpg file-type and load it as a .webp.

[tristam]

Can't seem to get this to work. I have tried the above code in various places within the <!-- we have a WEBP image --> but I just get a broken image most of the time. Did I need to create the image with the extension .jpg-webp.jpg ? I created a couple of these but still didn't work?

I am currently using this in the section page so therefore using <actinic:variable name="ProductThumbnailImageFileName" /> instead. It doesn't give the RAW option with this but the webp images are in a folder acatalog/CrossPens on the server.

It is only detecting that I have a webp image for the first item.

[NormanRouxel]

The code in my post #11 is for when you've created webp images for each product image and saved them in the same place as the product image was stored. You have to create these images. Then you have to rename them so they are named as per post 11.

There is no need to FTP anything to the server as the SellerDeck will do it for you if you follow my tweaks.

Now, if you want to do this with the Thumbnail images, you will need some extra code to overcome there not being a ProductThumbnailImageFileNameRaw capability. SD's inbuilt PHP can do this:

<source
data-src="<actinic:variable name="ProductThumbnailImageFileName" />-webp.jpg"
srcset="<actinic:block php="true">echo basename('<actinic:variable name="ProductThumbnailImageFileName" encoding="perl" selectable="false" />');</actinic:block>-webp.jpg"
type="image/webp"
>

[NormanRouxel]

Here's the full code. It replaces all prior posts in this thread.
All you need to do is paste something before and after your existing <img...> tag.

You manually create webp images in the same place as each Product Image with names like <productimagefilename>-webp.jpg.
E.g. your existing myproductimage.jpg gets a webp version called myproductimage.jpg-webp.jpg.
They're webp images but they end in .jpg so SellerDeck can detect and automatically upload them.

To fix existing layouts look for the <img ...> tag.

Put the following before it:

<actinic:block php="true">
    // Product Image code - amend line below for other types of image (ProductThumbnailImageFileName, SectionImageFileName, etc)
    $currentimagefile = str_replace ( '\\', '/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');
    $webpimagefilename = $currentimagefile . '-webp.jpg';
    $havewebpimage = file_exists($webpimagefilename);
    if ( $havewebpimage )
        {
        echo "<picture>"
            . "<source"
           . " data-src=\"$webpimagefilename\""
           . " srcset=\"" . basename($webpimagefilename) . "\""
           . " type=\"image/webp\""
           . ">"
           . "<source srcset=\"$currentimagefile\">";
        }
</actinic:block>

And the following after it:

<actinic:block php="true">
    if ( $havewebpimage )
        {
        echo "</picture>";
        }
</actinic:block>

Code works as follows:

Assume product image called myproductimage.jpg.
If file (you have to create it) myproductimage.jpg-webp.jpg exists in the same place as the product image
then the necessary webp code is generated and wrapped around your existing <img ...> tag.
Your myproductimage.jpg-webp.jpg will automatically be uploaded.
If no webp image exists, the standard SellerDeck image tag is left in place with nothing around it.

[tristam]

I have added the below.

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e">
<img src="<actinic:variable name="ProductThumbnailImageFileName" />" class="img-responsive"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e" >
<actinic:block if="file%5fexists%28str%5fireplace%28%27%2ejpg%27,%20%27%2ewebp%27,%20%3cactinic%3avariable%20name%3d%22ProductThumbnailImageFileName%22%20%2f%3e%29%29%20%21%3d%20true" >
<!-- we only have a JPG image -->
<img src="<actinic:variable name="ProductThumbnailImageFileName" />" class="img-responsive"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>
<actinic:block if="file%5fexists%28str%5fireplace%28%27%2ejpg%27,%20%27%2ewebp%27,%20%3cactinic%3avariable%20name%3d%22ProductThumbnailImageFileName%22%20%2f%3e%29%29%20%3d%3d%20true" >
<!-- we have a WEBP image -->
<picture>
<source
data-src="<actinic:variable name="ProductThumbnailImageFileName" />-webp.jpg"
srcset="<actinic:block php="true">echo basename('<actinic:variable name="ProductThumbnailImageFileName" encoding="perl" selectable="false" />');</actinic:block>-webp.jpg"
type="image/webp"
>
<source srcset="<actinic:variable name="ProductThumbnailImageFileName" />">
<img src="<actinic:variable name="ProductThumbnailImageFileName" />" class="img-responsive"
border="0"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</picture>
</actinic:block>
</actinic:block>
</actinic:block>



It still only load the first image as a jpg-webp.jpg the rest are still jpgs

I have tried having the original jpg, webp and jpg-webp.jpg image in the add a thumbnail field.

Problem is when when the browser sees jpg-webp.jpg it displays this and although it is a webp in disguise but internet explorer doesn't like it.