浏览器下载jpg即使它支持webp

Question

想法是，如果浏览器支持 webp 图片，那么只有那些图片会被加载以获得更好的性能。根本不应加载 jpg。我的应用程序不是这种情况。正在加载两种图像类型。我正在使用最新版本的 chrome，加载的图像是 webp。它也只是不必要地下载 jpg。开发和生产结果相同 - fifiportfolio-45ae7.web.app/ 这是我目前正在处理的主页。

这里是部分代码。

import top from "../assets/images/top.jpg";
import topwebp from "../assets/webpimages/top.webp";

return (
    <div className={classes["img-container"]}>
      <picture className={classes["picture-container-img-top"]}>
        <source
          type="image/webp"
          className={classes["img-top"]}
          alt="Filip Wielechowski Fotografia"
          srcSet={windowWidth > 500 ? topwebp : topSmallwebp}
        />
        <img
          className={classes["img-top"]}
          alt="Filip Wielechowski Fotografia"
          src={windowWidth > 500 ? top : topSmall}
        />
      </picture>
      <div className={classes.stripe}>
        F<span className={classes.smaller}>ILIP&nbsp;</span> W
        <span className={classes.smaller}>IELECHOWSKI&nbsp;</span>F
        <span className={classes.smaller}>OTOGRAFIA</span>
      </div>
      <picture className={classes["picture-container-img-bottom"]}>
        <source
          type="image/webp"
          className={classes["img-bottom"]}
          alt="Filip Wielechowski Fotografia"
          srcSet={windowWidth > 500 ? bottomwebp : bottomSmallwebp}
        />
        <img
          className={classes["img-bottom"]}
          alt="Filip Wielechowski Fotografia"
          src={windowWidth > 500 ? bottom : bottomSmall}
        />
      </picture>
    </div>
  );
};

我试过有条件地加载图像，但没有效果。

  return (
    <div className={classes["img-container"]}>
      <img
        className={classes["img-top"]}
        alt="Filip Wielechowski Fotografia"
        src={
          windowWidth > 500
            ? webpSupported
              ? topwebp
              : top
            : webpSupported
            ? topSmallwebp
            : topSmall
        }
      />
      <div className={classes.stripe}>
        F<span className={classes.smaller}>ILIP&nbsp;</span> W
        <span className={classes.smaller}>IELECHOWSKI&nbsp;</span>F
        <span className={classes.smaller}>OTOGRAFIA</span>
      </div>
      <img
        className={classes["img-bottom"]}
        alt="Filip Wielechowski Fotografia"
        src={
          windowWidth > 500
            ? webpSupported
              ? bottomwebp
              : bottom
            : webpSupported
            ? bottomSmallwebp
            : bottomSmall
        }
      />
    </div>
  );
};

您可以在网络选项卡中看到它。