Chrome 更喜欢 jpg 而不是 Webp

Question

我有很多image/webp图像，并希望浏览器具有 Safari 的后备image/jpg 。

由于某种原因，Chrome（以及其他所有浏览器）仍在使用 jpg 图像而不是 webp。

<picture>
     <source class="content_image" height="150" width="150" src="<?php echo get_stylesheet_directory_uri();?>/assets/pictures/section/logo_dsv_150x150.webp" type="image/webp">
     <source class="content_image" height="150" width="150" src="<?php echo get_stylesheet_directory_uri();?>/assets/pictures/section/logo_dsv_150x150.png" type="image/png">
     <img height="150" width="150" src="<?php echo get_stylesheet_directory_uri();?>/assets/pictures/section/logo_dsv_150x150.png" alt="lorem ipsum">
</picture>

我也将它与 ACF 结合使用：

<?php
     $image_02_jpg = get_field('content_picture_02_jpg');
     $image_02_webp = get_field('content_picture_02_webp');
?>
<picture>
     <source class="content_image" width="679" height="450px" src="<?php echo $image_02_webp['url']; ?>" type="image/webp">
     <source class="content_image" width="679" height="450px" src="<?php echo $image_02_jpg['url']; ?>" type="image/jpeg"> 
     <img class="content_image" width="679" height="450px" src="<?php echo $image_02_jpg['url']; ?>" alt="content_image">
</picture>

Answer 1

在source元素上使用srcset属性而不是src 。

<?php
  $image_02_jpg = get_field('content_picture_02_jpg');
  $image_02_webp = get_field('content_picture_02_webp');
?>
<picture>
  <source srcset="<?php echo $image_02_webp['url']; ?>" type="image/webp">
  <source srcset="<?php echo $image_02_jpg['url']; ?>" type="image/jpeg"> 
  <img src="<?php echo $image_02_jpg['url']; ?>" alt="content_image">
</picture>

<source> 元素

• src : <audio> 和 <video> 需要，媒体资源的地址。 当 <source> 元素放置在 <picture> 元素中时，该属性的值将被忽略。

• srcset ：一个或多个用逗号分隔的字符串的列表，表示由浏览器使用的源表示的一组可能的图像。