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

Question

我正在使用像<img src="converter/500w/picture.jpg">这样的URL动态调整服务器端图像大小。这意味着我可以提供几乎无限量的图像尺寸。现在我使用<img srcset="...">（以及<picture>标签）来提供各种或多或少随机选择的图像大小。然而，这导致了很多标记，并且不是很灵活。

1. 是否有可能使用srcset（或其他HTML标记）告诉浏览器如何请求任意大小的图像？如果没有，是否有可能在所有浏览器中可靠地使用JavaScript/jQuery？

2. 是否有可能在你的srcset中包含什么尺寸的智能，或者你应该只包含5-10个分辨率，从小到大/原始？我认为与你的断点有关的宽度将是很好的候选者，但这不包括高DPI设备。

我意识到“无限”srcset会有成本。服务器上的处理可能很繁琐，尽管这很大程度上取决于您的访问者（屏幕规格的数量和变化）。磁盘空间也是一个问题，但可以通过垃圾收集来缓解（尽管这会增加首要关注的影响）。不过，我想知道是否有可能，如果没有，还有明智的决议选择。

Answer 1

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

东西，你可以用客户端来为你做的工作，将下面的脚本： https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/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>