Sprite and benefits

Question

When to use sprites and when not to use it

I got 50 icons which i would make as a sprite but i got in doubt when i found out that i was needing 1-3 of the icons at one page load - and 1 icon have a size of 400-500 bytes and a total sprite have a size of 28kb

What is best for performance load them individual or in a sprite and how much do you save with the reducement of http calls?? (ofc its depending on how far you are from the server and such but is their an algorithm that i can put this into and calculate the cost benefit factor of my load)

besides doing a benchmark on the live server which is not posible in this case.

Answer 1

It totally depends on how your users behave, or rather how your average user (AU) behaves.

If AU goes to your site twice ever, it would be faster to just load the icons you need. If AU goes to your site a lot, and visits a lot of different pages (which require most of the images in your sprite) then it would be better to use a sprite.

Most browsers will cache your sprite so that it will only need to load once anyway. (which is also true of the individual images)

28 Kb is really not that big, so personally I would go the sprite route, unless you have a lot of low-bandwidth users.

Answer 2

My bad, i did not know you wanted to control your frames. With a .gif animation you can't control it, when it's loaded it just goes.
But as you said you can just make sprite of it, just use a background: url() image for this.
You might want to make a variation of sprites; for example: when you only need 3 frames, you could make a sprite of those 3 frames. Thus the size of the sprite the browser has to load isn't as big as the full sprite.

var frame = 1;

$('.back').attr("disabled", true);  

$(".next").click(function(e)         
{
    $('.back').attr("disabled", false);   
    $('.sprite').animate({backgroundPositionX: "+=-43px"}, 1);
    frame += 1;
    if(frame == 6)
    {
        $('.next').attr("disabled", true);   
    }
})

$(".back").click(function(e)         
{
    $('.next').attr("disabled", false); 
    $('.sprite').animate({backgroundPositionX: "+=43px"}, 1);

    frame -= 1;
    if(frame == 1)
    {
        $('.back').attr("disabled", true);   
    }
})

Now i only used the X-axis for this, so one line of sprites.

Here is an example.