CODEWITHSUNDEEP
cssperformanceimageloadsprite
willthefirst
willthefirst

Reputation: 1619

Is animating a small image contained in a CSS sprite as efficient as animating just that image?

I'm about to go through my CSS and compile images into sprites, and I'm wondering what will be the most efficient approach. Currently, I've got a bunch of tiny, ~10x10 px images that need to be animated. I'm wondering if adding these images to a sprite with much larger dimensions (~1000x1000px), and then animating them will cause any difference in CPU load/performance. It's the difference between animating a small div or animating a giant div where only a small part (the specified background position) is visible.

Upvotes: 0

Views: 83

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

An animated GIF is handled at a lower level than JavaScript, even if you're just swapping class names. Animated GIFs don't suffer from garbage collection delays and take less overhead.

Go with the animated GIF over the sprite. The file size won't differ much anyway.

Upvotes: 0

easwee
easwee

Reputation: 15905

It is better to animate a sprite.

1 server request for all images and once it is cached it's no problem.

What I would take care is the ammount of animation effects you intend to put in since doing to much could result in running slow (specially css3 3d transforms).

Have you thought of using canvas for animation instead of a container div?

Upvotes: 1

Related Questions