As far as I know „Adaptive Images“ serves only one image and is therefore the best solution at the moment. I will try it myself in the near future but couldn’t get around to it, yet.
My problem with bandwidth detection is that it will never be really accurate. In its simplest case the browser would just send the speed of the network the user is currently on. However, I can be on 3G but since I am also currently updating a dozen of iPhone Apps, I donâ€™t really can surf using 3G speed. If the browser wants to detect the real bandwidth I currently have, it would need to download some Megabytes and measure how long it takes.
I would be perfectly happy if I could easily detect if the user is on a mobile network or on wifi. The point for me is not so much to serve a small image if the user has little bandwith left for browsing. I want to serve small images to mobile devices if they are not on wifi so my site doesn’t mess with their data limit.
So I could show a small image on an iPad 3 which is on LTE, but a big double sized image on an iPad which is on wifi.
But I can not see how this is ever going to happen. There is now way a browser can detect it. The solution in my opinion has to be on the other side. The device should send some information which the browser then could detect. Or something like that.
All that could be solved if we had super duper fast internet connection everywhere we go. So no one had to worry. Maybe out grand children can have this luxury.