Chrome更喜欢jpg而不是Webp。

Question

Chrome更喜欢jpg而不是Webp。

3

我有很多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>

- Timo Fingas

这个有帮助吗？https://stackoverflow.com/questions/57487066/chrome-is-defaulting-to-jpg-when-webp-is-available-why - Nico Haase

还是这个？https://stackoverflow.com/questions/66312543/why-google-chrome-loads-jpg-instead-of-avif-and-webp - Nico Haase

还是这个？https://stackoverflow.com/questions/62700342/picture-fallback-default-to-png-instead-of-webp - Nico Haase

1

@NicoHaase，你添加的所有链接都与基于“媒体”属性选择图像有关。原始帖子中没有“媒体”属性。 - Fenton

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cam · Accepted Answer

使用srcset属性替代source元素上的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：一个由逗号分隔的字符串列表，表示由该<source>元素代表的一组可能的图像供浏览器使用。