使用 srcset 时如何强制加载低分辨率图像

Question

我需要一个横跨多种屏幕尺寸的全宽显示横幅。为此，我有 4 个版本的横幅图片。

横幅长@2x.jpg (2880x640)
横幅-long.jpg (1440x320)
短横幅@2x.jpg (1440x640)
横幅-short.jpg (720x320)

我正在使用 srcset 属性。

<img
    src="/images/interface/banner-long.jpg"
    srcset="/images/interface/banner-long@2x.jpg 2880w,
            /images/interface/banner-long.jpg 1440w,
            /images/interface/banner-short@2x.jpg 1439w,
            /images/interface/banner-short.jpg 720w">

但是，如果我从宽浏览器开始加载长版本，然后缩小浏览器的宽度，则短版本永远不会加载，因为长版本已缓存。浏览器 (Chrome) 认为它已经下载了更高分辨率的版本，因此它不会费心加载较小的版本。然而，具有较小版本的全部意义在于纵横比更适合移动设备（即纵横比较小）。我想强制加载较小的图像资源

有什么办法吗？

Answer 1

如果您要动态构建此 HTML，只需将 ?t=<current unix timestamp> 附加到每个图像的 URL。这样，浏览器每次都必须从服务器加载它们，因为 URL 总是不同的。

或者，您可以将您的 Web 服务器配置为在发送这些图像时发送 "don't cache" headers（但这可能更加困难且过于复杂）。

我确实质疑为此目的使用 srcsets。它可能有效，但我不确定 srcset 是否是完成这项工作的最佳工具，或者 srcsets 是否打算以这种方式使用。如果您要切换实际图像，似乎应该通过两个不同的图像标签来完成，每个图像标签都有自己的 srcset（您可以 show/hide 在不同的分辨率下），或者使用某种 JS 解决方案.

Answer 2

您不应该这样做。你想要的是艺术指导，你需要为此使用图片元素。您可以在那里使用具有媒体属性的源元素。

<picture>
    <source 
        srcset="/images/interface/banner-long@2x.jpg 2880w,
            /images/interface/banner-long.jpg 1440w" 
        media="(min-width: 800px)"
    />
    <img srcset="/images/interface/banner-short@2x.jpg 1439w,
            /images/interface/banner-short.jpg 720w" />
</picture>

使用 srcset 时如何强制加载低分辨率图像

How to force loading of lower-resolution images when using srcset

html

image

srcset