#43: How to Use CSS Sprites

CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page by combining images and reducing that number of requests. In this screencast I'm going to show you how to do exactly that, by taking what would be 8 different images and combining them into one. As an added bonus, we then expand the idea with jQuery and build ourselves a little accordion widget.

Links from video:

Comments

  1. User Avatar
    someone out there
    Permalink to comment#

    I can't believe people complain about a service that they are getting for free. If you don't have time to watch 1min intro that has been designed for various reasons (i.e Branding) than you can fast forward it. You get intros even with purchased DVDs.

  2. User Avatar
    crypta
    Permalink to comment#

    really beautiful!!

    I love it

  3. User Avatar
    chriscoyier
    Permalink to comment#

    I have added the Demo & Download links to this page, as well as the Downloads section. Have fun!

  4. User Avatar
    Scottgm
    Permalink to comment#

    Thanks again Chris =]

  5. User Avatar
    Jon
    Permalink to comment#

    Nice work, today i watched 12, 13, 14 and this one, and I always wish at the end of your cast you would show the final version of all your scripts. I know i can go back and hunt around in the video, but it would be useful. or allow us to download the files you used for the cast as well?

    Anyway your intro is good, not too long with some nice graphics, and that's pretty much all you could ask for in an intro.

  6. User Avatar
    JonRWilson
    Permalink to comment#

    Was that download files there before? maybe i had gone delirious last night, but if not thanks! i guess thanks either way.

    Also, I think the one remaining thing to do is show us how to do the three way toggle. I've tried this without the java script back from 12,13,14 but they never showed how to keep the white state open. I was thinking that it could be seporate .html's but that doesn't really make sense because we're using css. Your site does this, and apple (as someone mentioned above) and almost everyone else, but is it css or javascript? I tried the a:active and it didn't work as you can see at my site where i struggle jonrwilson.com

  7. User Avatar
    chriscoyier
    Permalink to comment#

    I just added the download files this morning. Took me a little time to get it together with new artwork that wasn't based on a client job =)

    To learn about that active state thing, check out the video "Three State Menu" which goes into that.

  8. User Avatar
    john
    Permalink to comment#

    very nice intro chris and thanks for css sprites

  9. User Avatar
    koew
    Permalink to comment#

    Another example of good sprite use is Ask.com:
    http://sp.ask.com/sh/i/a11/hp/hp_sprite.png

    Also, if you check out Ask.com through the wayback-machine you can even get a page with even bigger sprite-usage.

  10. User Avatar
    John Downey
    Permalink to comment#

    Awesome intro!

  11. User Avatar
    Valdemar Junior
    Permalink to comment#

    awesome! congratulation. Very good videoCast!

  12. User Avatar
    Alex
    Permalink to comment#

    Hey Chris, another great screencast. I wrote an article earlier that week that I posted on the same day but you win with the video cast :( haha- link is here – http://www.lightpostcreative.com/image-sprites-tu

  13. User Avatar
    Sean
    Permalink to comment#

    This was very interesting. I just watched this one and the latest psd to html screencast.

    Thanks for your hard work.

  14. User Avatar
    Ryan
    Permalink to comment#

    Great tutorial! I hope you make more simple jQuery tutorials in the future.

  15. User Avatar
    James L
    Permalink to comment#

    Great Video. You've definitely got something here. I look forward to checking out more of these.

  16. User Avatar
    anjum
    Permalink to comment#

    hey very good SC man thanks for that technique

  17. User Avatar
    Gabriel Rodriguez
    Permalink to comment#

    Awesome article. I had read a couple of articles about css sprites before, and gotta say this is the best by far. You really explained the point of using sprites and used an excellent example.

    Thanks Chris, I really enjoy your tutorials and screencasts. CSS Tricks is top among my favorite sites. btw, the new intro is really cool.

  18. User Avatar
    dnnsldr
    Permalink to comment#

    I thought the video was great. I have been using CSS sprites for awhile for hover and active states. Didn’t realize how easy it was to add the jquery. Thanks for this video and all the others that you take time to produce. This is one of the sites I recommend for anyone looking for help with CSS.

  19. User Avatar
    juan ramos
    Permalink to comment#

    Hi Chris, Tricks the best Tutorials on the web for the web! Keep on good health, nothing more nothing less. All the best the 2009 right up to 2999, we leave something for the negative margins. Chao amigo!

  20. User Avatar
    AWDAbraham
    Permalink to comment#

    Hey man, this video is great, thanks for your time!!
    and yeea, the new intro is awsome !!

    And I want to say…”Congratullations” for you new Web Re-Design.
    Iam a new user of this site!!

    Saludos desde Mexico!

  21. User Avatar
    Himanshu Kapoor
    Permalink to comment#

    love the screencast. thanks for coaching me on positioning. I always used to struggle with the negative value positioning.

  22. User Avatar
    KB
    Permalink to comment#

    It was good and I got to know few good things.
    I have also created a CSS sprite for my site at: http://kunals.com. Here, you can see an image on top left..here I have used this CSS sprite as painting.

    One can move cursor over this image and it will turn into colored picture.

  23. User Avatar
    Jordan Munson
    Permalink to comment#

    Really helpful video, especially for a beginner jQuery user with intermediate CSS skills. Thanks!

  24. User Avatar
    jl
    Permalink to comment#

    How do I call the Organic Tab plug-in on my WordPress page?
    Thanks.

  25. User Avatar
    0guzhan
    Permalink to comment#

    Fascinating tutorial about css sprite, very well done! Thx

  26. User Avatar
    Mulegoat
    Permalink to comment#

    Hi Chris,

    I’m trying to implement this accordion on a page which also contains an AnythingSlider and OrganicTabs (all awesome plugins btw) – everything works perfectly in FF and Chrome, but IE (in this case 8 but could also be in other versions) fails badly. An example of the page can bee found at:

    http://www.mularam.com/client/aphebe/results.php

    Also, the over state on the icons doesn’t work on my wamp server (but for some reason it works perfectly when I run it on my local SQL server? Weird

    I should probably mention that the html generated in this page is output from an XSL transformation (server side) – not sure if this is significant at all but IE handled the other plugins without any problems however the Sprite Accordion is nested within a UL that is referenced by the OrganicTabs script, are there any known conflicts in combining these plugins?

    Any help you be great!

    Many thanks in advance

  27. User Avatar
    Graeme
    Permalink to comment#

    Thankyou!
    A really clear and useful tutorial. Okay, a bit too much “extraneous” information (unscripted asides), but the essential content was greatly helpful to me and I will certainly check out your other tutorials.
    Thank you again.
    Graeme

  28. User Avatar
    Livia

    I have a question. I implemented sprites into a website I am working on and I tested both before and after and I didn’t find that it loaded faster… in fact, the added size of the CSS file and the single larger image file for the sprite seem to offset the speed I may have possibly gained from less server calls.

    I don’t disagree that the code is cool, but I’m not sure I understand the benefit.

    Am I looking at this incorrectly?

  29. User Avatar
    Wesley

    Love it,
    Thanks!!

  30. User Avatar
    Kiran
    Permalink to comment#

    Could sombody explain how to you css sprite for Non fixed width and height please.

    Regards!!

  31. User Avatar
    ofcyln
    Permalink to comment#

    If someone needs to convert image to CSS this link can help them:

    Base64 CSS Generator
    Online base64 css, dataURI generator. Convert your images easily to base64 CSS, Data URI, XML.

    http://www.base64css.com/

  32. User Avatar
    ofcykn
    Permalink to comment#

    If someone needs to create CSS sprite as retina or standart, I think this link will be helpful:

    Retina CSS Sprite Generator
    Generate retina and standard sprite images online with diagonal, left-right, top-down algorithms. Get your retina ready CSS codes instantly.

    http://www.retinaspritegenerator.com/

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag