8

I have a website that pops-up animated icons when you mouseover them

But i think that maybe it could result in poor graphical performance from the browser. I could put animated icons in a sprite, and not-animated icons in another, but what is the point? in that way sprites stop being useful. Do you recommend using a script that animate the icons placed in the sprite manually? What is your recommendation? Since i need a good performance.

yukatta
  • 505
  • 2
  • 7
  • 16
  • 1
    Yes, I can't imagine any conflicts here. – alt Jan 16 '13 at 23:45
  • It's all about size. How much does the size increase (absolutely, and in percentage) when you go from a static sprite to a sprite with animated parts? – Šime Vidas Jan 17 '13 at 00:58

3 Answers3

5

Don’t guess, test! Seriously. As long as the animated gif is of reasonable dimensions, I doubt it’ll be a big problem. However, the best way to find out is to try it. Try using Chrome or Safari’s Web Inspector to profile page load times with the various strategies (no animation, animated icons in a separate file, everything in one image), and see which performs the best. If there’s not much difference, choose the easiest one. You can always change it later if performance becomes an issue.

marcus erronius
  • 3,613
  • 1
  • 16
  • 32
2

The gif compression format is a tricky one because all of the blank space isn't treated like it would be in a jpg or png (bitwise). However as the number of animations increases and the number of colors increases, the gif format will begin to break down. What you should do is test the individual sizes against the size of the sprite image. The performance of moving the sprite shouldn't really be an issue at all, but as other answers have said you'll have to test it with different browsers and form factors.

Joel Etherton
  • 37,325
  • 10
  • 89
  • 104
1

The support for animated GIF is present in all majors browsers since nearly the beginning of the World Wide Web (www); 2 decades ago. I would be very surprised if they were of any concern for any modern browser excerpt for those who don't support graphics like Lynx.

You might have a problem with some browsers if the frame rate is too high but this clearly not the case for these icons that you are showing us.

SylvainL
  • 3,926
  • 3
  • 20
  • 24