Skip to main content
jamieh2os
jamieh2os
Known Participant
June 8, 2019
Answered

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

  • June 8, 2019
  • 1 reply
  • 628 views

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

This topic has been closed for replies.
Correct answer Nancy OShea

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>

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
June 8, 2019

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>

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices