WebP 后备图像未加载

Posted 2023-03-05

【中文标题】WebP 后备图像未加载

【英文标题】：WebP fallback images not loading

【发布时间】：2020-04-30 09:28:32

【问题描述】：

我正在使用<picture> 标签来设置支持 WebP 的响应式图像。 我正在提取同时具有 .web 和 .jpg 文件的桌面图像和移动图像 URL。 对于每种媒体，我给出了.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'] ); ?>"
  >
</picture>

【参考方案1】：

您放入srcset 属性的所有网址都必须有效且必须存在。

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

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