| 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
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