CSS Spriting is a skillset in the web design field gaining lots of credibility. We initially saw these techniques applied to high-traffic websites such as Yahoo! and Google. Over time even smaller-scaled web apps began applying sprites to their front end design specs.

We’ll be going over some of the major benefits towards using sprite images in your website designs. The benefits can be found universally in icons, graphics, background patterns and so much more. There are also many unrecognized tools to aid in frontend sprite development and shave time off projects.

So Why Use Sprites?

As a brief description of spriting it’s understood easiest as a front end development technique. Instead of saving button states and icons as separate images you should combine all images into a single file and use CSS positioning to move between them. As an example a button design may have all 3 states – standard, hover, and click – added into a single file spaced between each other.

The benefits should be obvious as they all point towards site optimization. To download a single sprite image takes less time and only requires a single HTTP request. This may not seem like much with 100 visitors daily, but over time you will recognize huge performance benefits.

This same idea can be applied to not just buttons but most nearly any graphic. Background images used in forms and page elements are the most graceful. Sprites can also account for many in-page icons such as alerts and information blocks.

How to Implement Styles

The steps are fairly simple to implement a general sprite image. The first chain in the process is figuring out what images should be included in your sprite graphic. This is most notably a .png file with the exact width/height required to fit each icon within the image.

You could add extra padding between elements if you find the process easier. Extra white space generally won’t add much to the image file, though for full optimization it’s best to cut corners wherever possible.

If you are a meticulous designer and have time to check out fine details it’s recommended to play around with your core file. Many designers call this object your master image. Try processing each icon in graphics software such as Adobe Photoshop to check on file sizes. In some cases the combined total of each individual icon file will be less than holding one master image.

At this point you’d want to focus on applying each image into your page. This can be done with CSS’ background property and url() method. Below is an example applying the same image into a number of elements.

.logo,
.facebook,
.google,
.app,
.linkedin{
background: url('../imgges/sprite.png') no-repeat;
}

From this we have applied the same background image into many different classes. From here we can assume what each of these would be used to display as a representative icon. Now this doesn’t help us much, though, since all we get is the same piece of our graphic playing over and over. CSS also has the background-position property to move around icons and page elements.

.logo{ background-position: 0 -20px; }
.facebook{ background-position: 0 -40px; }
.google{ background-position: 0 -60px; }

With the example code above we have 3 of the classes mentioned before. All we’ve done is move the positioning of the image relative with each class’ icon. This particular graphic has each icon positioned underneath one another and spaced vertically by 20px each. This is the reason we continually move down by 20px in position each time.


8 thoughts on “CSS Sprite Tips and Techniques”

新作アイテム激安 . February 12, 2014 at 6:21 pm

I liked up to you’ll obtain performed proper here. The caricature is attractive, your authored subject matter stylish. nonetheless, you command get got an edginess over that you wish be turning in the following. in poor health definitely come further until now once more since precisely the same nearly very steadily within case you protect this increase.

Sherin Shalu . February 16, 2014 at 10:23 am

You are posting useful information with easily understandable…
All the Best Bro..

    kepmadmin . February 16, 2014 at 11:38 am

    Thank you…

Mojo . February 16, 2014 at 11:25 pm

It’s actually a great and useful piece of info. I’m glad that you shared this useful information with us. Please stay us informed like this. Thanks for sharing.

Anonymous . February 18, 2014 at 7:50 pm

You really make it seem really easy along with your presentation however I to find this topic to be really one thing that I believe I would never understand. It seems too complex and extremely wide for me. I am having a look forward in your next put up, I will try to get the hang of it!

michael kors . April 25, 2014 at 2:32 pm

Pretty nice post. I just stumbled upon your weblog and wanted to say that Ive truly enjoyed browsing your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again very soon!

Lonchamps Sac Pochette . May 8, 2014 at 1:09 pm

You are extremely cool! I dont suppose I’ve read something similar to this before. So good to search out somebody with authentic applying for grants this subject. I genuinely appreciate starting this up. Your website is 1 region that is required on the net. Entirely a valuable project for bringing new items for the web!

michael kors designer purses . May 15, 2014 at 1:46 pm

Thanks, what a good post and informative blog, I will bookmark this blog. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

16 + seventeen =