Using Sprites in Web Design

Image wall with with icon sprites

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.

April 2017

Setting up a local WordPress environment

Everyone has their own method for building and hosting their WordPress site. One easy solution is building it locally then exporting it to your live server. Chris is going to show you a great solution for both Mac and PC, that lets you work locally and helps get your site up and running quickly and simply.

Here are the slides.


How to configure HTTPS on WordPress

How to Configure Https on Wordpress

So you’ve got your new Secure Layer Socket Certificate (SSL) from your trusted provider, like Comodo and your using a self hosted WordPress site. What do you do what steps are needed to implement this properly on your site.

In this article I will go through my setup on how to Implement the https component on WordPress.

Currently this article is not finished but published for a talk on SSL at Melbourne WordPress Meetup. Bookmark the page as I will be updating it in the next couple of days.

To Start here is some great code I’ve used for my htaccess file.

Where should I go to get more help for WordPress related queries?

This question was raised at the end of the session.

Here is my answer to the group.

For those of you who wanted some other places to hangout to find solutions to your WordPress problems, or to join in and help the community here is my list of places to go. Linkedin WordPress Experts with over 36,588 members.

WordPress Forums

WordPress Australia, (mentioned at the meetup.)

WordPress Stackexchange

If your using a multisite, then look at WPMUDEV

If you want to get your hands wet and have some free time, you can always offer some help on the support thread,


Feel free to add to the list.