Bandwidth Media Queries

Chris Coyier //

They don't exist. But wouldn't that be nice?

Take for instance the markup being discussed for the element:

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

I'm 100% on board with this idea. Let's serve up images we want to under the circumstances we declare. But is screen width the correct metric to use here? Perhaps it is, why would a screen that is 400px wide ever need an image that is larger than 400px wide? Well I think the retina display on certain new devices are answering that question for us. Those devices may respond to certain width media query but really have twice the pixels available and be able to show much sharper images. Yes, we have device-pixel-ratio media queries for that as well, but I still think we're dancing around the issue.

That issue is: bandwidth. If I'm in a place / on a device that has super slow internet, I'd love to be served a very light web page so browsing is still acceptably fast. If I'm in a place / on a device that has super fast internet, by all means ratchet it up and deliver me more.

Something like:

/* 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 */
}

This doesn't mean ignore screen size. That's obviously relevant when it comes to layout. This extension of media queries would give us a more appropriate tool for media in a world where the size of your device is increasingly unrelated to its bandwidth.

So I wonder: is it possible?