Safari fallback from .AVIF to .GIF using <picture> tag not working

Question

Description: I am trying to display .AVIF images on Chrome and newer browsers, while showing .GIF images on browsers like Safari that do not properly support .AVIF images. However, on Safari, the .AVIF image is still being requested, and an empty space is being shown where the image should be. This issue occurs on Safari (PC + Mobile).

Code:

<picture>
  <source type="image/avif" srcset="https://overpadel.nl/wp-content/uploads/browser-test1.avif" />
  <source type="image/gif" srcset="https://overpadel.nl/wp-content/uploads/browser-test1.gif" />
  <img src="https://overpadel.nl/wp-content/uploads/browser-test1.gif" alt="" />
</picture>

Question: Any tips on how to get the .GIF image to display on Safari instead of the .AVIF image? What am I missing?

Answer 1

Having had this same problem, I did a reasonably thorough check using Browserstack, and determined that this affected around 1.5% of my website users, with the following profile:

• Prior to Safari version 16, the browser made no attempt to load the AVIF file (therefore not a problem)
• On any of 16.1, 16.2, 16.3 or 16.4, the browser attempts to display the AVIF file but fails in the way you describe
• From 16.5 onwards, the AVIF file is displayed correctly.

So as @user2283347 suggests, I'm testing the user agent and disabling the AVIF function if a buggy version is found. Here's my PHP code:

function isBuggySafari() {
    $userAgent = filter_input(INPUT_SERVER, 'HTTP_USER_AGENT');
    return preg_match("%Version/16\.[1-4] Safari%", $userAgent);
}

It's ugly, but it appears to do the job, and I don't have any better ideas.