Get in touch

Got a project you’d like us to help you with? We’d love to hear from you.
Use the contact form or drop us an email and we’ll get back to you as soon as we can.

Office open Monday to Friday, 9am – 5pm

Tel: 01461 205 437
Email: [email protected]

Out of hours support number: 01461 536 202
Please note: This number is for out-of-hours urgent support only.

Creatomatic Ltd
80a High Street
Annan
Dumfries and Galloway
DG12 6DW

Company number: SC422843
VAT number: 184828370

 
Close
One of our team will contact you within 24 hour of sending this form.
 
 
 
Home > Blog > How to > Easy WordPress sprites with CSprite
 
View all posts
 

Easy WordPress sprites with CSprite


People don’t like waiting, especially when it comes to loading websites. James, our lead developer has a solution.

 
 
 
James Hall
 

 

40% of people abandon a website that takes more than 3 seconds to load


You’ve probably heard that statement before. It’s taken from a report published in 2009 – so the chances are that user expectations are considerably higher as of 2014 – but it does make an important point: People don’t like waiting.

We want to on a site, access the information we need, and go back to our daily lives. If a site is taking to long to load or navigate, I will go back and click on the next site. I’m sure you will do this too. What’s worse is that search engines will  rank you lower down in their search results if your site loads slowly.

As a result, we’re constantly working on ways of reducing load times and slimming down content – which is why we’ve recently launched CSprite, our own image sprite generator plugin for WordPress.

What is an image sprite?

An image sprite is a set of icons or small images merged side by side into one single image. If you have a website with 20 graphics, your browser no longer needs to as the server for 20 images, just one! Image sprites are typically smaller than all the individual images put together too, which is an added bonus.

Take a look at the one Twitter uses (click to view a larger version):

sprite-detail

The technical stuff

The most common way to use a sprite is to insert a placeholder div with a class and use CSS’s background and background-position to extract the single image. The only problem with this is that it slow and tedious to position images and get their type out coordinates – it makes it even more of a pain to make image changes too.

This is where CSprite comes in. Simply drop all the images you your theme’s ‘csprite’ folder and the plugin will generate a sprite for you, and set up all the CSS classes into a included into WordPress.

Try CSprite now

Download it here.

 
 
 
 
 

More stories like this

 

 
View all posts
This site uses cookies.

This site uses cookies for marketing, personalisation, and analysis purposes. You can opt out of this at any time or view our full privacy policy for more information.

Read our privacy policy