Solution for display .webp alternative files

[nxr]

In one of my projects, I decided to use the .webp format for all images.
I tested it on several of new version of browsers and phones: iPhone with Safari/Firefox (iOS 14+), Android with Chrome/Firefox (Android 10+) etc.
Images display without any problems.

I'm a bit worried about old browsers and old phones.
It's known that I.E. not support .webp.
There is also a thread on the forum with information, that .webp not display in iOS (probably some old iPhone).

So, how to set the main picture to .webp and OPTIONAL - (.jpg or other ) for old and not supported browsers ?
I tried "Adapive Images" for Picture and "Retina Image" for Image, but it does not work (always display .jpg first).

There is any way to solve this "problem" ?
No problem with a small project, which will not be updated in WWB (I found various solutions on the web),
but if the project is bigger and I want to use WWB for future extension and updating of the site - it will be trouble and take more time...

[Pablo]

Maybe this will work?
https://css-tricks.com/webp-with-fallback/

You can insert the code via Object HTML -> Inside tag.

[BaconFries]

Have you looked at using the Picture feature in WB. As of WB12 the following was added

Picture
- New feature: Add 'Picture' object. The HTML5 <picture> element is a container used to specify multiple images for different viewport or screen resolutions. The browser will choose the most suitable image according to the current layout of the page and the device it will be displayed on.
You can specify different images for breakpoints. It also supports high resolution displays using pixel density descriptors such as 1x, 1.5x, 2x, and 3x. For example you can include different versions of the image by using names like: filename@1.5x.png, filename@2x.png
The picture object supports rotation using standard CSS3 transforms. Plus expirimental support for CSS3 filters (blur, contrast, brightness, hue, saturation, negative, sepia, grayscale)

By using this you would set the first image as .jog then follow using the .webp. On a side note if the end user is still using IE it might be best to mention that IE is no longer supported and they should update to a "Modern" browser for the best experience of viewing your site.

[nxr]

Maybe this will work?
https://css-tricks.com/webp-with-fallback/
You can insert the code via Object HTML -> Inside tag.

Thank you Pablo. I found this solution also, but with a few dozen sub-pages it will take too long and will be a mess with uploading external files.
I chose WWB to save time.
I have to opt out of .webp.

Have you looked at using the Picture feature in WB. As of WB12 the following was added

This solution not work.

On a side note if the end user is still using IE it might be best to mention that IE is no longer supported and they should update to a "Modern" browser for the best experience of viewing your site.

Yes. But what people with using iPhone 7, iPhone 8, old Android ?
I have to write: buy new phones ...?