WebP fallback images not loading

Question

I'm using a <picture> tag to set a responsive image with WebP support. I'm pulling a desktop image and mobile image URLs that have both .web and .jpg files. for each media, I'm giving the .webp version and the .jpg version.

What I expect is that if the .webp version does not exist is that the website will take the .jpg file that exists.

any idea what is wrong here?

$image_desktop = get_field( 'desktop_image' ); // can be an .webp image or .jpg image
$image_mob     = get_field( 'mobile_image' ); // can be an .webp image or .jpg image

<picture>
  <source media="(min-width: 480px)"
  srcset="<?php echo esc_url( $image_desktop['url'] . '.webp' ); ?>"
  type="image/webp">

  <source srcset="<?php echo esc_url( $image_mob['url'] . '.webp' ); ?>" 
  type="image/webp">

  <source media="(min-width: 480px)" srcset="<?php echo esc_url( $image_desktop['url'] ); ?>"
  type="image/jpeg">

  <source srcset="<?php echo esc_url( $image_mob['url'] ); ?>" type="image/jpeg">

  <img class="header-image"
  src="<?php echo esc_url( $image_desktop['url'] ); ?>"
  alt="<?php echo esc_attr( $image_desktop['url'] ); ?>">
</picture>

Answer 1

All URLs that you put in the srcset attributes have to be valid and have to exist.

Browsers that have support for WebP will try to load the URL from the <source type="image/webp"> and all other browsers will try to load the URL from <source type="image/jpeg"> . If the URL selected by the browser does not exist it will not fall back to one of the other <source> s.

You should check the existence of the image files on the server side.