Easy Retina Ready Images with SCSS

A critical thing to remember is that this can become very inefficient if you are using it in many places, as sass's implementation currently just pulls the media query repeatedly out of the current selector, rather than looking through and combining media queries into blocks for each resolution. The author left a super important comment on the article which you should use if you are actually planning on using this in production:

"You can get media query combining right now w/ sprockets using https://github.com/aaronjensen/sprockets-media_query_combine...

If the media query strings are repeated, wouldn't gzip handle most of that size hit?

When you say ineffecient, what is the performance penalty for wrapping hundreds of rules with their own media query for each? I would be surprised to see it make any noticeable difference at all when gzip is enabled.

I think -webkit-image-set is a much better approach.

Yeah lets fragment the web like it's 1999.

Apple did after all invent the HTML. Lets make it Apple-specific.

This works nicely for background images. For <img src="..."/> tags, I use srcset, and then shiv browsers with javascript:

https://github.com/jcampbell1/jquery-srcset-retina-polyfill