Highlighted

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

Community Beginner ,
Jun 08, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Learn Dreamweaver

Views

351

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Jun 08, 2019

Copy link to clipboard

Copied

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

TOPICS
Learn Dreamweaver

Views

352

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 08, 2019 0
Adobe Community Professional ,
Jun 08, 2019

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 08, 2019 1