Question

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

是否可以使用srcset（或其他HTML标记）告诉浏览器如何请求任意大小的图像？如果没有，是否可以在所有浏览器中可靠地使用JavaScript / jQuery？
是否可以明智地了解srcset中包含的尺寸，或者您是否应该包含5-10种分辨率，从小到大/原创？我认为与你的断点相关的宽度是很好的候选者，但这并不能说明高DPI设备。

我意识到＆＃34;无限＆＃34; srcset需要付出代价。服务器上的处理可能很重，但这在很大程度上取决于您的访问者（屏幕规格的数量和变化）。磁盘空间也是一个问题，但可以通过垃圾收集来缓解（尽管这会增加第一个问题的影响）。不过，我想知道它是否可行，如果没有明智的选择，那么。

Answer 1

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

您可以使用客户端为您完成工作的东西，将是以下脚本： https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias

如果您有这么多资源，我还强烈建议为视网膜设备提供更高的压缩图像。这可以通过上面提到的RIaS插件（参见文档）或使用＆＃34;压缩图片模式＆＃34;来完成：

<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>

＆＃34;无限＆＃34;或＆＃34; smart＆＃34;使用服务器端调整大小时的srcset？

1 个答案: