@media for bandwidth

Currently, a website can serve up different content based on a visitor’s screen resolution with @media queries in CSS. This idea has been recently extended so that a site can also deliver different images depending on pixel density using the <picture> tag and/or the srcset attribute. Have a fancy phone? We can send you all the pixels. If not, receive only what you need.

What if you have limited bandwidth or can only afford to use data a few days each month?

Can we extend these tools to include bandwidth? People with limited data or bandwidth could view quick pages to get the job done. The browser and site could deliver image placeholders — tap one to load that image if you need it, save your costly data if you don’t.

In practice, it might look something like this:

@media ( low-bandwidth ) {
img { display: placeholder; }
header .logo { display:block; }
}

<img src="pic.png" srcset="placeholder@0x.png 0x, pic@2x.png 2x" >

<picture>
<source media="(high-bandwidth)" srcset="large.jpg">
<img src="small.jpg">
</picture>

1 problem8 site prompt

Props to @humphd and @gesa for pointing me toward srcset and picture.

See more on the background of this idea and the design.

One Response to @media for bandwidth

  1. Pingback: Monday Sparks: AfricaCom, Phillipinen, Firefox Developer Edition | Firefox OS und Ich

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.