Yeah, I see the problems you point out with Mashable's front page in Firefox at 500-1024px, and I agree with you that Mashable is doing it wrong. But those are fixable problems if only Mashable management had the sense to correct the design. You're not claiming that the very opportunity to do width transitions wrong justifies removing the media queries feature entirely, are you?
Anyway, badly done viewport width transitions are consistent with other problems I see on Mashable, such as that damn "infinite scrolling". I think infinite scrolling is a crock of $#!+ on desktop; the scrollbar control just wasn't designed for it. Give me defined pages any day of the week. Literally. Just give me a page for each date so that I can link to the collection of stories that the site ran on a particular day (or week or month for a less busy site).
Images themselves have no semantic value
I detect definition disagreement, and this thread can't usefully continue until we clear this up. I'm unfamiliar with the definition of "semantic value" that you're using. Is it from a standard? If so, which?
You wouldn't invent a redundant element for audio files
Except they did just that. The audio element allows specifying multiple otherwise equivalent sources, each in a source element, so that the browser can choose the most technically appropriate one. This allows letting the browser choose, say, an MPEG-family format if it's an Apple or Microsoft browser or a royalty-free format if it's a third-party browser.
Pixel density: Since user-agent has been available
A single combination of web browser and operating system can be used on both low DPI displays and high DPI displays. Consider, for example, Safari on a MacBook with a Retina brand high DPI display and Safari on a MacBook with a normal DPI display.
Window size: This is not something you should be using. That's something the browser uses to reflow properly designed content
So if the web page's style sheet specifies that a particular image shall be 50 percent of the width of the viewport, however wide the user might have chosen to make that, how should the server go about determining how many pixels that is in order to serve the correct amount of image detail?
Desktop screens have had two sizes in the past 10 years to my knowledge: 4:3 and 16:9
Display aspect ratios aren't "sizes". A 24" desktop display can show a lot more than a 10" netbook or tablet display, even if they're both close to 16:9.
Everything in the cookies, headers and your filesystem is available to you to make your decisions
Cookies don't exist for a first time visitor. And since when have HTTP request headers included window size and pixel density?