带宽媒体查询

它们不存在。但如果存在会怎样呢？

例如，关于 正在讨论 的标记元素

<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

  <!-- Default -->
  <source src="small.jpg">

  <!-- Alternative if media query matches -->
  <source src="medium.jpg" media="(min-width: 400px)"> -->

  <!-- Alternative if media query matches -->
  <source src="large.jpg" media="(min-width: 800px)">

  <!-- Fallback -->
  <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

</picture>

我 100% 支持这个想法。让我们在声明的情况下提供我们想要的图像。但屏幕宽度是这里使用的正确指标吗？也许是，为什么一个 400px 宽度的屏幕需要一个大于 400px 宽度的图像？好吧，我认为某些新型设备上的视网膜显示器正在为我们解答这个问题。这些设备可能会响应某些宽度媒体查询，但实际上拥有两倍的可用像素，并且能够显示更清晰的图像。是的，我们也有 device-pixel-ratio 媒体查询，但我仍然认为我们在回避问题。

问题是：带宽。如果我在一个网速非常慢的地方/设备上，我希望能获得一个非常轻的网页，这样浏览速度仍然可以接受。如果我在一个网速非常快的地方/设备上，请务必将其提升到更高的水平，并为我提供更多内容。

例如

/* Fair warning: these aren't "real" */

@media (min-bandwidth: 25Mbps) {
  /* High bandwidth, bring it on! */
}

@media (max-bandwidth: 10Mbps) {
  /* This is only for the viewers with currently slow internet connection speed */
}

这并不意味着忽略屏幕大小。在布局方面，这显然是相关的。媒体查询的这种扩展将为我们提供一个更合适的工具，用于媒体在设备大小与带宽越来越无关的世界中。

所以我想知道：这可能吗？