Published: 2nd May 2017 | Words: 804 | Reading Time: 5 minutes


CSS sprites and SEO

CSS sprites are a great option if you want to increase the page loading and performance of your website. On your web page you may have a few different background images and each of these images has to be requested from a server when the page loads. A lot of images can mean a lot of requests and this in turn can slow down your page loading. CSS sprites are a way to combine your images into one image. Every time you want to show one of the individual images that are part of the CSS sprite you simply use CSS to work out the position of the part of the CSS sprite you want to show. It’s like positioning a small box within a big box to isolate a particular section.

Building CSS sprites

If you have good planning before you build a site you can plan out your CSS sprites in detail or you can build a sprite file and just add new images as you go. The only real downside to this method is you may not use some images within your sprite in the final website. What this means is you can end up removing parts of your sprite and having to reposition everything. A handier way can be to combine everything at the end of the project. This also gives you the opportunity to go through your images folder and clear out unnecessary files.

Optimising CSS sprites

As with normal images you can also optimise your CSS sprites to bring down the file size. If you are using PNG32 files you can look at converting them to PNG8 files if they would still look okay. For JPEG's acting as CSS sprites you can bring down the quality also to a point where the file size is fairly small but they are still of good quality. Google Page Speed can be used to scan your website and it will give you the option to download any images and CSS sprite images that are not optimised.

When to use CSS sprites

There are a few considerations with sprites. For instance you don’t want to make absolutely huge CSS sprites. If you think the file size is getting too big you may consider making two or more CSS sprites but keep related images grouped if possible to save you headaches. Also CSS sprites are not meant to be really used for everything. You should use them for any layout and styling images you have but not images that are part of your page content. For instance things like textures, patterns, and buttons should be combined into CSS sprites. These images are usually backgrounds on div tags, tables, form elements etc. In terms of SEO they serve no useful purpose and they are there just to make the page look good. Images that are part of your content however should be left as separate images as they can be indexed separately for the Google image index. It is possible to crop images in img tags just like cropping CSS sprites in div’s but as stated before the best option is always to keep images that are used as content separately.

Repeating CSS sprites

The only real issue with CSS sprites to look out for is repeating backgrounds. If you have a repeating background using an images deep within a CSS sprite it won’t actually repeat the way you want it to. If you want a CSS sprite image to repeat horizontally, the image will have to fill the complete horizontal length. Also if you want a CSS sprite image to repeat vertically it will have to fill the entire vertical length of the sprite. Unfortunately a full X and Y repeat won’t work.

CSS sprite hover effects

CSS Sprites are handy for solving issues with hover effects. Generally if you have an image as a hover effect the image is not called and loaded until the user hovers over the element which the hover effect is on. This leads to a noticeable jump between when the user hovers and when the image for the hover effect is loaded. There are solutions to this problem such as using JavaScript to pre-load images but CSS sprites solve this issues and can save you coding. If you have your images in a CSS sprite the hover effect will be perfect because you can have the original image and the hover effect as part of the CSS sprite and both will be loaded when the page loads.