使用服务器端调整大小时的“无限”或“智能”srcset？

Question

我正在使用服务器端的图像，通过<img src="converter/500w/picture.jpg">这样的URL动态调整大小。这意味着我有一个几乎无限的图像大小，我能够服务。现在，我正在使用<img srcset="..."> (以及<picture>标记)来提供各种随机选择的图像大小。然而，这会导致大量的标记，而且并不是真正的灵活。

1. 是否可以使用srcset (或其他HTML )告诉浏览器如何请求任意大小的图像？如果没有，是否有可能在所有浏览器上可靠地使用JavaScript/jQuery完成这一任务？
2. 在你的srcset中包含什么样的尺寸是可能的吗?还是应该只包括5-10个分辨率，从小到大/原始？我在想，与你的断点相关的宽度可能是很好的选择，但这并不能解释高点对点的设备。

我意识到“无限”srcset是要付出代价的。虽然这在很大程度上取决于您的访问者(屏幕规格的数量和变化)，但服务器上的处理可能很重。磁盘空间也是一个问题，但垃圾收集可能会减轻(尽管这会增加第一个问题的影响)。不过，我想知道这是否可能，如果没有，是否有明智的决心选择。

Answer 1

不，您不能告诉浏览器一个特定的模式来请求不同的候选人。我也怀疑产生无限数量的图像候选是有用的。

您可以使用客户端为您完成以下脚本：https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias

如果你有这么多的资源，我也强烈建议向视网膜设备提供更高的压缩图像。这可以通过上面提到的RIaS插件(请参阅文档)或使用“压缩图片模式”来实现：

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <source
        srcset="image-w1600-q50.jpg 1600w,
            image-w1440-q50.jpg 1440w,
            image-w1200-q50.jpg 1200w,
            image-w800-q50.jpg 800w,
            image-w600-q50.jpg 600w,
            image-w400-q50.jpg 400w"
        sizes="(your sizes), 100vw"
        media="(-webkit-min-device-pixel-ratio: 1.9),
            (min-resolution: 1.9dppx)" />
    <source
        srcset="w1600-q80.jpg 1600w,
                image-w1440-q80.jpg 1440w,
                image-w1200-q80.jpg 1200w,
                image-w800-q80.jpg 800w,
                image-w600-q80.jpg 600w,
                image-w400-q80.jpg 400w"
        sizes="(your sizes), 100vw" />
<!--[if IE 9]></video><![endif]-->
<img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    sizes="(your sizes), 100vw"
    alt="picture but without artdirection" />
</picture>