如何在2020年使用Webp

Question

im试图在Google上进行研究，并发现了许多不同的教程。所以我决定在stackoverflow上发帖。

这是标准图片标签：

 <picture>
    <source type="image/webp" srcset="path/to/image.webp">
    <source type="image/jp2" srcset="path/to/image.jp2">
    <source type="image/jxr" srcset="path/to/image.jxr">
    <img src="path/to/image.jpg" alt="alt description">
  </picture>

========================================

这是我的问题：

1。带有源代码的标签，今天我们是否仍在使用媒体查询？ 我看到了一些教程（但自2018年以来），而有些则没有 例如：

 <source
   media = "(min-width:860px)"
   srcset="{{asset('storage/large_photos/'.$photo->photo.' 860w')}}">

如果仍然使用媒体，这意味着我们需要对所有图像使用webp，jpg2000，jxr吗？

2。万一我们使用webp，我们还需要JS吗？我看到一些有关“ Modernizr”的教程 例如：https://codepen.io/jeremyfrank/pen/pjmJyg

感谢您的帮助。 栗子