在React中使用picture标记而不在浏览器中加载过多的数据

我用的是 picture 要加载的标记 webp 默认情况下为图像,以及 jpg 韦伯 无法加载。我就是这么做的( also on codesandbox )

import jpg from "./jake-the-dog.jpg";
import webp from "./jake-the-dog.webp";

export default () => (
    <div>
      <h1>Hello CodeSandbox</h1>

      <picture>
        <source srcSet={webp} type="image/webp" />
        <img src={jpg} type="image/jpg" />
      </picture>

    </div>
);

这种方法让我担心的是,我要将两个图像都导入组件,所以这不意味着我要导入几乎两倍的数据吗(jpg和webp)还是我错了?