我有一个网站，我使用 webp 和 jpg 作为后备。在标题中，我有一个双图像和适合移动用户的较小图像。
所以我有4个文件：
header-big.webp
header-small.webp
header-big.jpg
header-small.jpg
因为它位于标题中，所以我希望预加载图像，但仅预加载我需要的图像。对于小和大的，我可以使用媒体属性预加载它。
<link rel="preload" href="header-small.jpg" as="image" type="image/jpg" media="(max-width: 575px)">
<link rel="preload" href="header-small.webp" as="image" type="image/webp" media="(max-width: 575px)">
<link rel="preload" href="header-big.jpg" as="image" type="image/jpg" media="(min-width: 576px)">
<link rel="preload" href="header-big.webp" as="image" type="image/webp" media="(min-width: 576px)">
在这种情况下，浏览器总是根据其宽度预加载两个文件，但仍然只使用其中一个。
jeah，这是有道理的，因为 jpg 和 webp 都可以实现。所以浏览器当然会预加载两者。
但我可以说“如果你支持 webp，就预加载 webp 并且不预加载 jpg”吗？
谢谢，弗洛里安