当WebP可用时,Chrome默认使用JPG。为什么? [英] Chrome is defaulting to JPG when Webp is available. Why?
本文介绍了当WebP可用时,Chrome默认使用JPG。为什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<picture>
<source srcset="imgs/img_480w.webp" media="(max-width:480px)" type="image/webp">
<source srcset="img/img_280w.webp" media="(max-width:280px)" type="image/webp">
<source srcset="imgs/imgs.jpg" type="image/jpeg">
<!-- always defaults to here --> <img src="grid_img/LoW_grid.jpg" alt="Image" class="tm-img">
它肯定正在获取文件,它们没有显示为未找到。当我不包括最后一行时,根本不会显示任何内容。这些文件确实可以正确转换为WebP格式,因为我可以在Chrome中打开它们。
推荐答案
它seems like您的代码正确。但是,您对正在执行的规则/行的假设是错误的。Chrome不喜欢显示JPG图像。
为简单起见,我删除了第二行(max-宽度:280)。如果您查看下面的代码,您将看到代码默认为第二个代码。这可以通过以下事实来解释:这是第一个对当前屏幕宽度有效并且可以显示的图像(由于浏览器支持WebP)。
为了说明这一点,我用一棵树的图像替换了前两个图像。在第三行中,我将图像替换为玫瑰图像。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><picture>
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" media="(max-width:480px)" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.jpg" type="image/jpg">
<!-- always defaults to here --> <img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>
删除第二行时...您会看到:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><picture>
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" media="(max-width:480px)" type="image/webp">
<img src="https://www.gstatic.com/webp/gallery3/1.sm.png" alt="Image" class="tm-img">
</picture>
当您在第二个代码块中缩小窗口时,图像将被交换到Chrome中的WebP树。在non-supported browsers中,您仍将看到玫瑰。
这篇关于当WebP可用时,Chrome默认使用JPG。为什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文