Chat with us, powered by LiveChat
How to use CSS image sprites to save on network requests

How to use CSS image sprites to save on network requests

While average broadband speeds continue to rise in the UK, reducing the transfer of unnecessary data and network requests on your website is extremely important to make sure your website is as optimised as possible and provides your visitors with the best user experience. The savings you can make on bandwidth transfer and server resources from optimising your website are significant and are especially noticeable as your website becomes more popular.

In this article, we’ll focus on one topic that is so easy to do and yet can save on a ton of unnecessary separate network requests: image sprites. While not entirely self-explanatory, sprites allow you to add multiple graphics into one image and then only display the portion of the image on a particular HTML element using CSS. You can manipulate what portion of the image is displayed in CSS using the background-position property.

Why should I care about reducing the amount of network requests browsers make?

This is a very good question. First, the time it takes to make a network request is called the “round-trip time” (RTT). Browsers have to make several different network requests simply by visiting a website for the first time, and this does not take into account all the images used on your website which have to be separately requested by the browser.

Granted, the round-trip time for just one network request is within the milliseconds range, but when you add a huge bunch of network requests that a browser needs to make (CSS and JavaScript files, images, font files, etc.), it can all add up. For this reason, it is good web development practice to try and reduce the amount of network requests that need to be made.

Using CSS sprites

Sprites work when you have an HTML element that is an identical size to the graphic that is part of an image sprite. You would have a separate CSS selector that contains the image sprite itself as a background image, and then separate selectors which make the different sections of the image visible using the background-position property. Here’s an example:

eUKhost Sprite Image Example

The image above is one of the sprites we use on our mobile website (the social media icons are actually supposed to be white, but I’ve changed the colours of those above so they are visible). The HTML elements that make use of this same image have identical dimensions set in CSS, so we can use this sprite to save on what would otherwise be 8 separate network requests.

In my example below, I am displaying each social media icon in the sprite in each separate element:

eUKhost Sprite Image Example Result

Here is the CSS code to do this:

p.social > a {
display: block;
float: left;
margin-right: 20px;
width: 32px;
height: 32px;
background: url(‘images/header/header-footer.png’) no-repeat;
font-size: 0px; /* This prevents the text inside the anchor tag from being visible */
}

p.social > a:last-child {
margin-right: 20px;
}

/* Individual Icons */

p.twitter > a {
background-position: -80px -32px;
}

p.facebook > a {
background-position: -112px -32px;
}

p.linkedin > a {
background-position: -144px -32px;
}

p.googleplus > a {
background-position: -176px -32px;
}

/* End Individual Icons */

To view the full code (including the HTML), download it here.

Brief explanation on background-position

The background-position needs to be set a negative value in order for other parts of the image to be revealed. For example if you set p.twitter > a to have a background-position of 80px 32px you are effectively telling the browser to move the image to the right by 80 pixels and down by 32 pixels, so it will be out of view because of the 32px x 32px size of the HTML element. As you might expect, if you didn’t set a background-position then the default 0px 0px would simply show the first 32 pixels of the blue “Menu” icon in the sprite image used above.

Ben Stones

Sharing

Leave your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.