Creating data URIs from images
One problem with PNG-based image sprites is that they are not resolution independent. With more and more HiDPI devices (Apple gives their HiDPI devices the 'retina' moniker) coming onto the market, that necessitates us creating at least two sprites to cover normal and HiDPI devices. That situation will only get worse as higher and higher DPI devices enter the market and I, for one, don't like repetitive work!
Furthermore, the spriting technique we have already looked at doesn't play particularly well with responsive designs (as currently, the Compass image sprite engine uses pixel-based, rather than proportional, positioning) so they have fallen out of favor with me of late.
Instead, where possible, I opt for SVG ...
Get Sass and Compass for Designers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
