CSS CSS CSS

Animated GIF For CSS Sprites

October 17, 2008 @ 8:49 am

In the post 10 Easy Steps to Great Website Optimization the Wojo Group mentions CSS sprites in #3 and it got me thinking. You should always use CSS sprites if you can and not just because they’re super cool in a nerdy sort of way. When people talk about sprites though they often only talk in terms of server load. That is of course the biggest advantage of sprites in my opinion but what about the ability of a CSS sprite to save you time and energy? I’d like to show you one of the more bizarre cases I’ve implemented in my own work and talk about how that saved time. An animated GIF for a CSS sprite.

So They needed an animated bullet icon that flashed from a circle with an icon in the center to a circle with a number which can be 1 to 10 and then loop back to the icon state and continue. Not only were there 10 number states but also 3 colors of backgrounds and 2 different types of icons. Luckily there was only 1 icon per color so 3 color sets of 10 or 30 icons total.

Something like this:

To create them the normal way it would take 30 separate animated GIF images. By the time you saved all 30 separate files you’d probably have a problem. What problems, right? Oh, the font size isn’t right. The blue isn’t the blue we need. That red looks like the Devil and sends the wrong message. The image loops too fast. Now the image loops too slow. Turns out we need double the number of bullets. You get the point, right? Thats a rapidly growing number of changes and file saves and a shrinking number of hairs on my head falling out from stress.

I wanted a way to be able to manage just a couple of files and apply changes in mass without the nightmare situation above. Enter CSS sprites. What some people may not consider is that you can use an animated GIF for a sprite as well as you can a single layer PNG/GIF/JPEG.

Here is what I came up with:

So there you have 3 files for animated bullets. I went with a single file per color because the colors weren’t going to always be used together so I didn’t see a need to load all colors every time if only 1 color was used. Notice that all 10 icons are on a single horizontal line. I horizontally align the icons just because I could but you may find when you create sprites that vertical aligning pieces of the sprite works better in many cases.

Here is an example of the bullet implemented:

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  Cras felis. Aliquam mattis scelerisque elit. Vestibulum faucibus rhoncus ipsum. Cras congue est quis velit. Vivamus quam dui, scelerisque in, euismod vel, lacinia et, diam. Vivamus aliquet turpis a lectus. Sed in libero non mi condimentum consectetuer.

• Vivamus eu erat. Maecenas augue mauris

  Ultricies porttitor, eleifend a, consectetuer nec, risus. Pellentesque sollicitudin, mi sed malesuada malesuada, tortor dui lobortis enim, in varius ipsum dui a velit. Nunc sollicitudin, nibh et placerat fringilla, neque erat fringilla magna, nec eleifend magna sapien eget lorem.

See the “ul.aniBullet” section inside my examples.css file for more info.

Some problems solved by using sprites instead of separate files:

Easy Changes: When They come to you for a change you don’t have to make the change and save 10-30 optimized images.

Loop Synchronization: They wanted the icons to loop in unison. If they looped at different times the site would be very busy and distracting to users. A bullet is just an accent and shouldn’t distract from the content. When you use a separate file for each bullet icon then they will load at different times sometimes and the loop will not be synchronized. The sprite loads all states at once because it’s a single HTTP request and is much more likely to cycle at the same time.

HTTP Requests: Obviously 3 HTTP requests are better than 30. Say you only get 1000 hits a day and counting only 1 sprite that saves you about 9000 HTTP requests a day or about 250 thousand saved HTTP requests a month just for that one file. Imagine if you had 100 thousand hits a day? That’s about 2.5 million fewer requests a month. Yikes.

File Size: When I save just a single icon the file size is about 2KB. The sprite of all 10 icons is about 7KB. That means using 3 files instead of 30 saves us about 39KB. When we think in terms of the HTTP requests daily and monthly that’s a pretty big cut in KB.

14 Responses to “Animated GIF For CSS Sprites”

1. Nacho Says:
   October 19th, 2008 at 1:45 pm

   I like the way you used the img tag, as the tag where the sprite is going to load. I never thought of that, I always used divs, or other things.
   I think It will be something I will definetly start using

   Thank you.

2. Adam Says:
   October 19th, 2008 at 2:19 pm

   The IMG tag was the only thing I could get to line up correctly without having to float the object. I used SPAN at first but you can’t size a SPAN without it being set to “display: block” and that messed with the text. I hate having to use the clear image but really overall the design is simple so I just went with it. Thanks for your input and welcome to the site.

3. roman Says:
   October 20th, 2008 at 12:38 am

   You can’t use here couse this stuff is only for decorative purpose. in this case use , what trouble to set background to ? lol

4. CSS-Sprites Quellensammlung Says:
   April 14th, 2009 at 2:21 am

   [...] Animated GIF For CSS Sprites Auch animiert lassen sich die Sprites einsetzen (.en) [...]

5. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CSS | Smashing Magazine Says:
   April 27th, 2009 at 11:21 pm

   [...] Animated GIF For CSS Sprites This article discusses one of the more bizarre uses of CSS sprites: as an animated GIF. [...]

6. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials 於囧 Says:
   April 27th, 2009 at 11:53 pm

   [...] Animated GIF For CSS Sprites This article discusses one of the more bizarre uses of CSS sprites: as an animated GIF. [...]

7. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials Says:
   April 28th, 2009 at 12:56 am

   [...] Animated GIF For CSS Sprites This article discusses one of the more bizarre uses of CSS sprites: as an animated GIF. [...]

8. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Feed Reader Says:
   April 28th, 2009 at 1:09 am

   [...] Animated GIF For CSS Sprites This article discusses one of the more bizarre uses of CSS sprites: as an animated GIF. [...]

9. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Design Blog Says:
   April 28th, 2009 at 1:41 am

   [...] Animated GIF For CSS Sprites This article discusses one of the more bizarre uses of CSS sprites: as an animated GIF. [...]

10. Video | ClickLogin Web Design Says:
    April 28th, 2009 at 3:41 am

    [...] Animated GIF For CSS Sprites This essay discusses a singular of a some-more weird uses of CSS sprites: as an charcterised GIF. [...]

11. f-j-k Says:
    April 28th, 2009 at 10:48 am

    pretty kool. thanks for that.

12. Dave R. Says:
    April 28th, 2009 at 5:49 pm

    I’ve always used a transparent img to hold my CSS sprites, because I’m rubbish at Potatoshop and CSS. I feel both more knowledgeable and less of a n00b after reading this. Big up the Ducker!

13. Roln’s Blog » 解密CSS Sprites：技巧、工具和教程 Says:
    April 30th, 2009 at 1:48 am

    [...] Animated GIF For CSS Sprites [...]

14. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Designurimagination Blog - Let Your Imagination Fly Says:
    May 1st, 2009 at 3:27 am

    [...] Animated GIF For CSS Sprites [...]

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website