CSS Image Sprites – SEO Tutorial

What are CSS image sprites?

This simply means that a collection of images displayed on a webpage are combined into one image. This reduces the amount of HTTP requests that are needed to load a page. Image sprites make sense for certain images on a page that are static or irrelevant to the content. This may include the background images for example. Images that are relevant to the content should not be combined with sprites for improved SEO and search engine find-ability.

CSS image sprites work by firstly combining images into one file and secondly by reassigning the image locations and positions within the CSS.

How to combine images with sprites?

spriteme.org can combine your images using sprites in 9 steps.

1. Simply visit there website and drag the ‘Sprite Me’ link onto the browser tool bar.

2. Visit any webpage and click on the ‘sprite me’ tab. A side bar will open displaying sprite suggestions.

3. To build a sprite click on the ‘make sprite’ button and wait a few seconds for it to build.

4. Next click on ‘export CSS’. A new tab will open displaying a link to the new image sprite. It will also display the images that have been combined and their location and positions within the CSS.

5. Download the image and then upload it to a websites image folder or media library.

6. Copy the URL link address to the new image sprite.

7. Go back to the sprite me tab with CSS image locations and use Command or Control F to search within the CSS to find each image location.

8. Replace each image URL with the new image sprite URL and add a new line of code with the position that is shown on the sprite me tab page.

9. Repeat steps seven and eight until all images within the sprite are updated in the CSS.

How do image sprites affect SEO?

Many images within a website will be relevant to the content and should not be combined with sprites. Images that are combined will not be easily edited or have independent titles, image ALT tags, captions or file names. This can make a big impact on website find-ability within the top search engine indexes. Combining images with sprites can really make sense especially within a competitive online market place, where every little SEO technique adds up to give a website a ranking a boost in the search results. The SEO best practice is to keep HTTP requests to around or ideally below twenty. Using image sprites can help to achieve this along with improving user satisfaction and engagement. Fast loading websites convert traffic into sales and image sprites is one of many SEO techniques that will help to improve rankings and bring in lots more site traffic.