CSS Sprites have been around for a while now. Matter of fact, they have been around for over eight years. They allow for some great monetary and bandwidth optimizations for medium and large websites, and they allow for a better experience on the user’s side, since there is a reduction in load time.
For a lot of small websites, the extra layer of complexity that CSS Sprites brings to your assets was not always worth it. But with high-resolution screens, such as Retina Displays, becoming more and more prevalent, there is a new big reason to use them.
Optimizing for High-Resolution Screens
To optimize for high-resolution screens, you have to add a reference to a larger image asset within a specific media query. So for every image asset you have at a normal resolution (or
@1x) you have to add a high-resolution version (
@2x). This means double the amount of files, and double the amount of selectors and file references in your CSS.
@1xsprite file for all the selectors that include high-resolution assets.
In the next case we have four selectors with image assets. First, we have a snippet you would get use all of your assets would be separate. Then we have a snippet that uses a sprite of which the non-retina version is 200 pixels wide and 200 pixels high:
Sidenote: bear in mind that the example used is just a media query based on the guidelines of iOS and Retina MacBook Pro’s. Android actually uses different values
min-device-pixel-ratio, depending on the screen that’s on your device.
- Instead of referencing to all your assets as separate files, put them in a sprite.
- Create a
2xversion of your asset sprite that is exactly double the size, and has the different assets at exactly double the dimensions inside of the sprite.
- Gather all the selectors that reference the sprite, and reference them towards the
@2xsprite within the media query for high-resolution displays.
- Make sure you don’t forget to set the
background-sizeproperty to translate the dimensions of the
Mind you, this is just an example of three image assets. Now think about what this means when you extrapolate this over all of the assets on your website. Not only do you save network requests and stylesheet file-size, the whole process of creating retina assets gets way more efficient and cleaner code-wise.