I think if you browse without JavaScript on, this information is not available to the sites you visit.
@media (min-width: 400px) {
.thing {
background-image: url(size-400.png);
}
}
@media (min-width: 401px) {
.thing {
background-image: url(size-401.png);
}
}
You could combine this with pixel density for even more specificity. @media(max-size: 200px) { #container { background: url(tiny_mobile.png); } }
@media(max-size: 400px) { #container { background: url(small_mobile.png); } }
@media(max-size: 800px) { #container { background: url(medium_tablet.png); } }
@media(max-size: 2000px) { #container { background: url(large_desktop.png); } }
@media(min-size: 2000px) { #container { background: url(retina.png); } }
Not always loading the same image is a good idea on mobile.People being smart is the horse, and programmers colluding with "advertisers and spies" in a massive fashion is the zebra.
There is a W3C TAG document that touches on this at
http://www.w3.org/2001/tag/doc/unsanctioned-tracking/
One problem is that there are so many ways of tracking user-agents in the web platform today that it can be hard to convince anyone that addressing one of them will improve the situation. :-(