You are currently browsing the Web Design category
-
January 14 2010 SpriteMe Makes Life So Much Easier
Every once in awhile you come across a web development tool that you can't believe you were living without. Think Firebug or CSSEdit, tools that work great and make building websites so much easier. Today I found the perfect tool for combining background images into CSS sprites. SpriteMe is awesome.
Background images have always been a quintessential aspect of website design. The problem is that each background image used on the page is an extra HTTP request, even if the images are just tiny rounded corners. Minimizing HTTP requests is Rule #1 when it comes to speeding up your website. Combining background images into a CSS sprite is the preferred method for reducing the number of image requests but creating sprites has traditionally been hard and usually requires lots of trial and error.
SpriteMe is awesome because it does all of the hard parts automatically. Specifically, SpriteMe will:
1. Identify all of the background images on the current page
2. Automatically group the images into a suggested sprite
3. Generate the sprite
4. Recompute CSS background-positions
5. Inject the sprite into the current page so you can make sure its pretty!
Once SpriteMe has done its magic, its up to the developer to save the sprite image and integrate the CSS changes back into code. The effort has basically been reduced to cutting and pasting. I love it! Finally free to reap the benefits of sprites without having to obsess about them along the way. Try it yourself, follow along with the SpriteMe demo.
Lou Mintzer
I'm Lou Mintzer, a web entrepreneur, programmer, designer and product builder. My blog is about website design and Internet technology.
Recent Tweets
Categories
Archives