{"id":7059,"date":"2010-08-12T08:42:54","date_gmt":"2010-08-12T15:42:54","guid":{"rendered":"http:\/\/css-tricks.com\/?p=7059"},"modified":"2021-12-03T08:08:27","modified_gmt":"2021-12-03T16:08:27","slug":"css-sprites-workflow","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-sprites-workflow\/","title":{"rendered":"CSS Sprites Workflow"},"content":{"rendered":"\n

When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites<\/a>.<\/p>\n\n\n\n\n\n\n\n

  1. Ignore sprites entirely. Make every background image its own separate image and reference them as such in the CSS.<\/li>
  2. When you are reasonably sure the design is “done,” use the SpriteMe bookmarklet to create the sprite. UPDATE: SpriteMe page is dead, but I’ve archived a working version of it here<\/a>. <\/li>
  3. Comment out (not delete) the old background properties in the CSS and add in the new Sprites-based version: 
    #logo {\n  \/* background: url(images\/logo.png) no-repeat; *\/\n  background: url(images\/sprite.png) -10px -579px no-repeat;  \n}<\/code><\/pre> <\/li>
  4. Don’t worry about the comments bloating your CSS, you should compress your CSS<\/a> before serving it on live sites anyway which will remove those.<\/li><\/ol>\n\n\n\n
    Now if you find yourself needing to update the images inside the sprite, the process can be:<\/p>\n\n\n\n
    1. Update individual images.<\/li>
    2. Comment out Sprited CSS background images and uncomment regular background images<\/li>
    3. Remake sprite with SpriteMe, replace<\/li>
    4. Swap comments again<\/li><\/ol>\n\n\n\n
      One of the complaints about working with sprites is that it makes updating images harder. I think this process makes it much easier. I guess an even easier process would be to have a PSD of your sprite so you can update that directly without touching CSS. If you can pull that off, great. I personally feel more organized having individual graphics. SpriteMe also gives you CSS with the locations of all the sprites, so if you needed to change the size of images or add\/delete them, you’ll get those new numbers automatically.<\/p>\n\n\n\n
      If you have your own workflow for working with sprites, please share!<\/p>\n\n\n\n
      Related:<\/strong> Setting up sprites diagonally<\/a> is rather clever. The idea is then you can use the sprite as a background image of a larger box without fear of other graphics in the sprite showing up. This is at the cost of a larger sprite file size because of the extra white space.<\/p>\n","protected":false},"excerpt":{"rendered":"
      When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":158,"url":"https:\/\/css-tricks.com\/css-sprites\/","url_meta":{"origin":7059,"position":0},"title":"CSS Sprites: What They Are, Why They’re Cool, and How To Use Them","date":"October 24, 2009","format":false,"excerpt":"This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015. What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. I wish.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300115,"url":"https:\/\/css-tricks.com\/freak-flags\/","url_meta":{"origin":7059,"position":1},"title":"Freak Flags","date":"December 11, 2019","format":false,"excerpt":"I don't see image sprites used that much anymore, but it's still a good technique for reducing downloaded decorative image assets when you have multiple on a page. The big idea is combining all the graphics into one and then shifting around the size and background-position to reveal one at\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/flag-sprite.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":187526,"url":"https:\/\/css-tricks.com\/svg-fragment-identifiers-work\/","url_meta":{"origin":7059,"position":2},"title":"How SVG Fragment Identifiers Work","date":"November 3, 2014","format":false,"excerpt":"I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG defined elsewhere and draw just that part somewhere else. That ability allows you to build a whole system out\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":195227,"url":"https:\/\/css-tricks.com\/spriting-img\/","url_meta":{"origin":7059,"position":3},"title":"Spriting with <img>","date":"February 6, 2015","format":false,"excerpt":"Sprites aren't limited to background-image, as with the object-fit and object-position properties we can nudge an inline image around its content-box to act just like a sprite. For example, let's say we want the image below to be added to our HTML page like a regular ol' image: Sprite Then\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16026,"url":"https:\/\/css-tricks.com\/spriteright-giveaway\/","url_meta":{"origin":7059,"position":4},"title":"SpriteRight Giveaway","date":"January 17, 2012","format":false,"excerpt":"There is a new Mac app called SpriteRight for doing CSS sprites that is pretty darn nice. I'm a fan of both SpriteCow (beautiful interface, design your own sprite) and SpriteMe (automatic combining of sprites, gives you real CSS). I feel like SpriteRight hits the nail on the head by\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/spriteright.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":152879,"url":"https:\/\/css-tricks.com\/interview-questions-css\/","url_meta":{"origin":7059,"position":5},"title":"Interview Questions and Exercises About CSS","date":"October 14, 2013","format":false,"excerpt":"If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to ask on-the-fly. I thought I'd think up and round up some ideas for reference. Exercises To Do Seeing people's actual work is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/thebox.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7059"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=7059"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7059\/revisions"}],"predecessor-version":[{"id":358370,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7059\/revisions\/358370"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=7059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=7059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=7059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}