Sprites with html and css

Question

I've got some code that uses sprites, this is designed to look like a horizontal navigation bar. My question is: for my code shown below, does this method actually cause the end user to download the png image 8 times or just the once.

And if it is actually once, is there a better method to do this?

CSS Code

#facebook, #twitter, #linkedin, #googleplus {
    width: 64px;
    height: 64px;
    display: inline-block;
}

#facebook {
    background: url("images/sprite.png") 0 0;
}

#twitter {
    background: url("images/sprite.png") -64px 0;
}

#linkedin {
    background: url("images/sprite.png") -128px 0;
}

#googleplus {
    background: url("images/sprite.png") -192px 0;
}

#facebook:hover {
    background: url("images/sprite.png") 0 -64px;
}

#twitter:hover {
    background: url("images/sprite.png") -64px -64px;
}

#linkedin:hover {
    background: url("images/sprite.png") -128px -64px;
}

#googleplus:hover {
    background: url("images/sprite.png") -192px -64px;
}

HTML Code:

<nav>
    <a id="facebook" href="https://www.facebook.com"></a>
    <a id="twitter" href="https://www.twitter.com"></a>
    <a id="linkedin" href="https://www.linkedin.com"></a>
    <a id="googleplus" href="https://plus.google.com"></a>
</nav>

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-12 21:14:29Z

4

The request will happen only once and the image will be cached. The image will be redrawn again, but not by requesting the server. It requests the server only once. But it is always a good practise to have the url() in the master class or a single instance:

#facebook, #twitter, #linkedin, #googleplus {
  background: url("images/sprite.png");
}

Moreover it is better to use background-position alone, instead of background, also you don't need to reuse the background: url() again in :hover.

answered Dec 12, 2015 at 21:14

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smally Over a year ago

Thanks this makes the code look much neater. Now I've made your suggested changes, when you say the image will be redrawn again, I'm just curious does this mean the entire sprite image is drawn or loaded 4/8 times, or drawn once and the other bits outside the shown area are just hidden from view.

Praveen Kumar Purushothaman Over a year ago

@smally Well, every rendering process is a redraw right, I meant that. The main thing is that, the browser will not request for a new image from the server. Take in this way, when the image has changed at the moment, browser has requested fro the first three url()s and when the fourth one is parsed, new image will not be displayed.

Community · Accepted Answer · 2017-05-23 11:52:17Z

4

It'll be downloaded only once, and this is the main reason to use CSS sprite sheets, it will be downloaded once only and with only one HTTP request instead of 8 HTTP requests if you provide an image for each icon with normal and hover states.

And no, this is how it is implemented and you're doing it correctly.

Resources:

Edit: As Praveen Kumar mentioned you only write the url() once for all corresponding rules and with background-position shift the image either horizontally or vertically depending on your image

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 12, 2015 at 21:14

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

7 Comments

Mi-Creativity Over a year ago

I didn't quote anything from anywhere I just wrote what I've read few years ago and I put w3schools as a second link but didn't quote anything, Also I know some people are anti-w3schools and in some cases they're right but that doesn't mean that ALL info from w3schools are wrong!

Praveen Kumar Purushothaman Over a year ago

Okay. Cool. Still, it is better to avoid the use of that site.

Mi-Creativity Over a year ago

He's free to choose from resources I've posted

Praveen Kumar Purushothaman Over a year ago

My humble request is please don't guide people by showing links to W3Schools. I do understand they are good in a few. Still.

Mi-Creativity Over a year ago

You welcome, before on some w3schools webpages there were wrong or misleading information and developers started warning others about them, although things have been changed since then, w3schools still has bad reputation, read answers in here meta.codereview.stackexchange.com/questions/4975/… and this

|

Collectives™ on Stack Overflow

Sprites with html and css

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related