响应式图像、浏览器和网络速度？答案

【问题标题】：Responsive images, browsers, and network speed?响应式图像、浏览器和网络速度？
【发布时间】：2018-11-15 11:59:05
【问题描述】：

我有一张目前只有一种尺寸的图片 (600px x 300px)，我使用 CSS 来确保它响应视口宽度。在600px 下它的宽度是100%，在600px 上它固定在600px。

我现在想使用：

<img src="" srcset="" sizes="" />

...实现响应式图片，希望移动用户可以下载较小文件大小的图片。

很快我就遇到了“小屏幕与网络速度”的问题。

我可以提供多种图像尺寸，但某些手机上的像素密度意味着有时手机需要比台式机大得多的图像。我面前有两个连接互联网的设备：

Windows 桌面、宽屏显示器、极快的网络连接、像素密度 x1。
iPhone X，3G 连接，375px 视口，像素密度 x3。

使用srcset 和sizes 意味着桌面下载600px 图像，iPhone 下载1125px (375 * 3) 图像。

问题：

浏览器是否会考虑网络速度（我的 iPhone 在慢速 3G 连接上会从srcset 中选择较小的图像，还是总是我们1125px）..？

我在网上搜索了答案，但我找不到任何东西，我很高兴通过链接指向正确的方向。

【问题讨论】：

标签： html image browser

【解决方案1】：

我认为这还不可能。但是，有一个Network Information API from the W3C 的提案（草案），旨在提供一种在连接更改（蜂窝、WiFi、以太网等）时通知脚本的方法。

与此同时，也许您可以使用lazy-loading 按需加载图像资源。并不能真正解决您所描述的问题，但它确实减轻了设备上 Web 应用程序的初始网络负载。

更新：好的，所以根据Pete LePage，这还不可能：

Last I heard, it does not. It's not out of the question for the future, check http://crbug.com for a feature request, and if there isn't one, file it!

【讨论】：

谢谢胡安！我已经懒加载了（lazysizes）。我没有看到那个提案草案，谢谢。我的问题更多涉及到，当 浏览器 决定使用哪个 srcset 图像时，是否考虑网络速度，或者仅考虑来自 sizes 的逻辑。
@StephenLast 也许您可以联系Pete LePage 或Ilya Grigorik，他们都是Google Web 团队的开发者倡导者。 Pete 有很多文章描述了如何使用srcset 属性。也许他们可能知道这是否可能。