html - 为什么 img 同时 srcset 和 src 下载 2 个图像？

Question

我一直在尝试将 srcset 用于图像以在不同的视口/屏幕密度下提供不同大小的图像，这是我目前拥有的代码：

    <img 
    class="..."
    srcset="/img/some-img-476w.png 476w,
            /img/some-img.png 950w"
    sizes="(max-width: 500px) 476px,
            950px"
    src="/img/some-img.png"
    alt="Some alt text" />

特别是在基于 Chromium 的浏览器（即 Microsoft Edge 和 Chrome，均为最新版本）中，此代码最终似乎仅以 <= 500px 的屏幕尺寸下载图像的两个版本（它通过了第一个尺寸查询）。正如预期的那样，在更大的屏幕尺寸中，它只下载最大的图像。

有谁知道为什么会这样？Firefox 对我来说似乎很好，并下载了适当的图像。

最初，我的 src 在所有其他属性之前，所以我认为这就是原因，因为 src 是不支持 srcset 的浏览器的后备，所以无论如何它都会下载最大的图像，但我把它做成了最低属性，它仍然没有解决问题。想要一些见解，谢谢！

标签： htmlimage