WebP备用图像无法加载

Question

我正在使用<picture>标签设置一个支持WebP格式的响应式图片。 我提取了桌面和移动图片的URL，它们都有.web和.jpg文件。 对于每个媒体，我分别给出了.webp版本和.jpg版本。

我希望的是，如果存在.webp版本，则会使用该版本，否则将使用已有的.jpg文件。

你有什么想法吗？

$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>

- AssafA

Answer 1

在srcset属性中放置的所有URL都必须有效且存在。

支持WebP的浏览器将尝试从<source type="image/webp">加载URL，而所有其他浏览器将尝试从<source type="image/jpeg">加载URL。如果浏览器选择的URL不存在，则不会回退到其他<source>之一。

您应该在服务器端检查图像文件的存在性。

- ausi