Using Sprites in Web Design

Have you seen the term sprite used in web design and ever wondered what it is and what its used for? Or how to use it in your next web project?

Well I have, and today I’m going to write about it as I learn what it is and how I can use it in my next theme build.

How many times have you uploaded all variations of your favicon icon to the root folder, or all the variations of social media icons to the WordPress media library, and found that sometimes a user might accidentally delete one of them, or you change designs and the icon you used doesn’t look fresh and up to-date, you then have to go back through and upload more variations, then you have to remember what you called them and change every line of code, etc. It can become quite time consuming. Well a sprite can be used in this situation to cut down on time spent loading individual images in your website, instead your website loads one image, and uses css to show only a portion of that image a location co-ordinate to the right icon in the right location.

I found this video great for showing how it can be used.

Of course some things can be done with just pure CSS, but for items that can’t like logos or unique images. Sprites can be a good way to accomplish this, also minimising the requests for files from the server.

Here is another video that goes into it.

Now you know this… should you set to work creating them from scratch?

Well you can if you really want too! But for most of the time, the hard work has already been done, you can simply head over to digital photo and graphic sites like Depositphotos, and pick your self up an icon set to use Here is some examples below.

Also, if you’re using WordPress, here’s a good tutorial that points you in the right direction, and some great resources for WordPress support if you get stuck.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Chris La Nauze