| 34 | Spriting |
Spriting is a process by which many small icons or pictures are turned into one larger one for use in a website. The one larger file is not the direct sum of its parts—its file size is a lot smaller than the separate images combined. This is of supreme importance in the age of the mobile web, where every KB counts.
Creating a sprite image file for incorporation into your site is incredibly simple with Compass. We used to have to stitch together all the images using Photoshop and then define each image by its location in pixels. Compass does this all automatically for us.
We have to make sure all our images are in one folder—for example, icons. Then we @import the icons from the folder.
Compass makes the link.png, movie.png, and
Get Pragmatic Guide to Sass 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.
