3 ms·
Easy Retina Ready Images with SCSS
- colmvp 14y agoThis changes the background image source but what about cases where you need to swap a <img> source?
- jenius 14y agoA 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_combiner https://github.com/aaronjensen/sprockets-media_query_combine...
- jacobr 14y agoIf the media query strings are repeated, wouldn't gzip handle most of that size hit?
- cmwelsh 14y agoWhen 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 14y agoI think -webkit-image-set is a much better approach.
- josteink 14y agoYeah lets fragment the web like it's 1999. Apple did after all invent the HTML. Lets make it Apple-specific.
- jcampbell1 14y agoThis 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 https://github.com/jcampbell1/jquery-srcset-retina-polyfill