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 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access