

Easy Retina Ready Images with SCSS - guptaneil
http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss

======
jenius
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...](https://github.com/aaronjensen/sprockets-
media_query_combiner)

~~~
cmwelsh
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.

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

------
josteink
Yeah lets fragment the web like it's 1999.

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

------
jcampbell1
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>

