Read browser type switch page to load images of non webp type for Safari

[jamieh2os]

Adobe Pros,

Please help me with a script for my website that will read the users browser type.  If the browser is Safari, have the script direct the user to a different page.  I want to do this because Safari will not read the webp images.  I plan to make a different page with all jpeg images so the Safari user can wait for them to load instead of not seeing them.  I have seen fixes for this problem using the HTML Picture element and adding alternative image formats for Safari users.  But, I'm using FancyBox with these webp images and I don't see how the 'picture element' could be used within FancyBox.  Thanks for any insight you can provide...James

[Nancy OShea · Accepted solution]

Browser support for WebP format has not gained much traction yet.  I'ts currently only 78%  supported which isn't good enough for prime time.   See Can I Use table below.

https://caniuse.com/#feat=webp

In the meantime, use JPG or PNG images for all devices.  When the browser support improves to 98% or higher, then you can think about using WebP in your production work.  Until then, it's experimental.

Fancybox3 does support SRC SET so it can display different images based on viewport width. You can use this to improve download times for mobile users and over time save bandwidth.

<a href="medium.jpg" data-fancybox="images"

data-srcset="large.jpg 1600w,

medium.jpg 1200w,

small.jpg 640w">
<img src="thumbnail.jpg" />
</a>