如何让 srcset 识别图像不会在小显示器上以全尺寸显示？答案

【问题标题】：How to make srcset recognise that an image will not be displayed at full size on small displays?如何让 srcset 识别图像不会在小显示器上以全尺寸显示？
【发布时间】：2019-06-12 20:26:03
【问题描述】：

我的图像以 100% 的视口宽度显示，最大宽度为 960 CSS 像素。我正在使用srcset 将每个图像的 960 像素宽版本提供给常规显示器，并将 1920 像素宽的版本提供给具有高像素密度的显示器。

问题在于，当视口小于 960 像素时，图像会缩小以适应。这会导致窄视口获得比所需分辨率更高的图像，因为srcset 没有意识到这些图像不会以 960 像素宽显示。

我希望避免使用服务器端脚本，但如有必要，可以使用轻量级（无 JQuery）客户端脚本。最好使用纯 HTML/CSS 解决方案。

编辑：

按照建议，我整理了一个示例。您最好将其复制到本地文件：

<picture>
    <source type="image/webp" srcset="https://dummyimage.com/960x540/000/fff, https://dummyimage.com/1920x1080/000/fff 2x">
    <img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/960x540/000/fff" width="960" height="540" alt="">
</picture>

要了解我的意思，请尝试以下操作。如果您的 PPI 显示较高，请适当调整这些数字，如果在开发者工具中禁用缓存的情况下使用 Chrome（Ctrl+F5 不会重置加载的图像！），请在每一步之前进行适当的刷新。 Firefox 似乎会根据缩放级别自动切换：

从 100% 缩放开始。应该会加载 960 像素的图片。
从 200% 缩放开始。应该会加载 1920 像素的图片。
从 200% 缩放开始，视口尽可能窄。 1920px 仍在加载！

我知道 CSS 媒体查询可用于为不同的视口大小设置不同的规则，但肯定有更好的方法让浏览器决定而不依赖于为视口范围设置显式规则。

另一个修改：

使用sizes 和w 执行以下操作看起来很有希望：

<picture>
    <source type="image/webp" sizes="(min-width: 960px) 960px, 100vw" srcset="https://dummyimage.com/960x540/000/0f0 960w, https://dummyimage.com/1920x1080/000/0f0 1920w">
    <img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/480x270/000/0f0" width="960" height="540" alt="">
</picture>

但是，它总是返回它可以在移动设备上找到的最大图像（是的，当确保第一张图像的分辨率至少设置为设备的分辨率时），所以这不是一个选项。

【问题讨论】：

您能展示一下您当前的代码在图像中的样子吗？
@sean 我现在已经包含了一个示例。

标签： html css image srcset

【解决方案1】：

嗯，我已经考虑过这一点，截至 2019 年，似乎在 CSS 中没有合适的方法来做到这一点。媒体查询是可能的，但只能获得视口大小（以 CSS 像素为单位）和像素密度 - 而不是原始分辨率 - 因此需要考虑的组合数量不合理。

我将包含一个其他任何人都可以使用的杂乱示例，包括我自己。它只有这两种分辨率，但您始终可以添加更多尺寸以适应常见的水平分辨率，例如 720px、1080px 和 1440px。

<picture>
    <noscript>
        <source type="image/webp" sizes="(min-width: 960px) 960px, 100vw" srcset="https://dummyimage.com/960x540/000/fff">
        <img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/960x540/000/fff" width="960" height="540" alt="">
    </noscript>
    <script>
        document.write('<source id="myImage" type="image/webp" sizes="(min-width: 960px) 960px, 100vw" srcset="https://spacergif.org/spacer.gif"><img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/960x540/000/fff" width="960" height="540" alt="">');

        var screenWidth = window.screen.availWidth * window.devicePixelRatio;
        var imageWidth;

        if (screenWidth <= 1080) {
            imageWidth = 960;
        } else {
            imageWidth = 1920;
        }

        document.getElementById("myImage").srcset = "https://dummyimage.com/" + imageWidth + "x" + imageWidth * 0.5625 + "/000/fff";
    </script>
</picture>

首先，我们有无 JS 后备，它总是 960 像素宽。然后 JavaScript 写了很多相同的东西来确保非 JS 用户不会得到它——或者你可能只是使用<noscript>ed CSS 对非 JS 用户隐藏它——但使用间隔 GIF 作为源。您可能想要使用 base64 间隔 GIF 来保存 HTTP 请求。然后将源替换为 960px 或 1920px 版本，具体取决于网页的原始分辨率。请记住，这还包括 Chrome 中的开发人员工具使用的空间。

【讨论】：