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 ：一個或多個用逗號分隔的字符串的列表，表示由瀏覽器使用的源表示的一組可能的圖像。