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):
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.