Again, if it were easy to feature-detect reliably and only serve the bigger assets up to people on retina devices, I might agree with you.
I've got a high-DPI device and I prefer fast-loading pages every day. If I want things to look incredibly crisp I'll zoom out. Text still looks great!
a) it's nowhere near 4x unless you are using uncompressed images. With something like PNG compression most of the difference is negligible and there've been some interesting experiments showing that with JPEG trading resolution for quality is roughly break-even: see e.g. http://alidark.com/responsive-retina-image-mobile/
b) Even on mobile, latency is WAY more of a factor than bandwidth. If pages load slowly, it's almost always the case that reducing the number of CSS / JS files will help significantly more than reducing image sizes.
c) One of the approaches for dealing with DPI variance is to replace images with vector / webfont / CSS alternatives which don't require scaling. If you do that, you're also going to significantly reduce the total asset size for the page which is going to help everyone get a faster time to paint.
Pages still load as they normally would, and then become progressively clearer. Set a cookie, and all subsequent loads can be sent with only retina quality images.
A little fragile, but it works.
I'd love to see a JavaScript library that does this; I've never run across one.
You can at least detect the 'device pixel ratio', which seems to be > 1.0 for Retina devices, so that's something:
http://stackoverflow.com/questions/11722442/is-there-a-way-t...
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5/1),
only screen and (min-resolution: 144dpi),
only screen and (min-resolution: 1.5dppx) {
width: 260px;
}