webp images

[NormanRouxel]

That code mentioned in post #15 is obsolete (see my post #14).

Use post #14 (which also makes it much easier to modify for Thumbnail and Section images).

Internet Explorer doesn't support webp but the tweak has been designed for that. IE displays the original Product Image in such cases.

See http://www.drillpine.biz/v18-webpproductimages where nearly every image is of type webp. It's fine in IE.

[NormanRouxel]

GOOD NEWS. The Pen Zone is using a version of SellerDeck where its PHP supports the generation of webp images. If you like you can try out my add-on that auto creates these images (you can specify the quality) and automatically uploads the webp's. A fit-and-forget solution. Email me for details.

It should work with Magic Zoom Plus type images.

[Buzby]

Hi Norman,

does this work with Swift? If so I will probably be interested when my site is ready to go live.

[NormanRouxel]

Jason: Yes it works with Swift. Needs a different build but that's trivial.

You also need to update magiczoomplus.js and magiczoomplus.css to the latest version.
SD seems to be using a January 2019 version of Magic Zoom Plus and the <picture> tag that webp uses was only supported by Magic Zoom Plus from October 2019.

[tristam]

Sorry didn't see your post #14 Will have a play with this

[NormanRouxel]

Tristam: Also see my post #17.

[tristam]

Norman

Definitely interested in your add on. I think in the long term this will save a huge amount of work. I am using Magicthumb. I have messaged them to see how I get the latest versions of the CSS and JS. that will be a few days.

[NormanRouxel]

The question you need to ask Magic Toolbox is whether Magic Thumb supports the <picture> tag for the main image and the icon images.

Their Magic Zoom Plus has what they describe as "basic support for the <picture> HTML tag" but I know little about Magic Thumb as I've only seen about 3 SellerDeck sites using it ever.

[tristam]

I have updated the js and css but have had the answer from them "current version supports IMG tag only"

[NormanRouxel]

Tristam: Since you use Magic Thumb on all your products images that's not good news.

Looks like you won't be able to use webp images unless you switch to using Magic Zoom Plus (that does support webp).

[tristam]

Shame. I do like Magic Thumb. Personally I find Magic Zoom a bit frustrating to use sometimes.

I would still like to use WebP images on the rest of the pages as these also have room for much improvement. eg: https://www.thepenzone.co.uk/acatalog/cross-pen.html https://www.thepenzone.co.uk/acatalo...nsend-pen.html

Is this easy with your plug in?

Maybe they may make Magic thumb compatible some day.

[tristam]

Magic Tool Box say this will most likely be in one of the next versions.

[NormanRouxel]

Webp images should work fine on the page you mention (https://www.thepenzone.co.uk/acatalog/cross-pen.html) and also the pages like https://www.thepenzone.co.uk/acatalo...nsend-pen.html that lead from that. Anywhere you're not using Magic Thumb.

P.S. if you want to make your Magic Thumb pages about 1/3rd the size for loading images, use a small version of the alternate images for the thumbnails. At the moment you are displaying 3 full sized images (scaled down in the browser as icons) below the main image. Make these smaller ad use Magic Thumbs "Lazy Load" feature to load them only on demand and you'll only be loading 1 large image and 2 small extra icons on page load.

[tristam]

Still can't get this to work properly not sure what I am missing out.

I have used the code as per #14

Then added the WebP image in the image field. I have tried this as image.jpg image.jpg-webp.jpg and image-webp.jpg

It works in chrome etc but not in IE. In-fact if I remove the code as per #14 and use image.jpg-webp.jpg or image-webp.jpg
it works exactly the same, so I don't think I am using it correct. I changed the Edit appearance for the first image to Encoding - Quoted Pearl and Selectable - False. I have all 3 file versions in the same place on the server.

[NormanRouxel]

I have used the code as per #14

You haven't!

You've wrapped my code around a DIV tag. It should be around the IMG tag.

You've changed the image in Section Details / General / Image. That should have been left alone.

You should have created a webp image called <whatever you've got in Section Details / General / Image>-webp.jpg and left it in the same place as the original image.

You shouldn't have manually FTP'd anything onto your server. SellerDeck will deal with that.