I love golf.
There aren’t many better feelings in the world than that of stepping up to an elevated tee looking over spectacular scenery and unleashing a perfectly arching shot that lands softly on the green just a few feet away from the pin.
I don’t get to experience that feeling very often, but I love golf nonetheless.
This week our local course, which has hosted a PGA event before, dropped their price of eighteen holes and a cart from $70 to just $10. I made several tee times.
So yesterday I was out hacking around with several buddies losing more balls than I care to admit when one of them asked me why it was so cheap?
I had talked to the guys in the pro shop and they told me they were not going to do any formal advertising this year and this was their way of getting the word out about the course. They wanted to get as many people as possible to play and then spread the word about how nice the course was.
My friend who is a small business owner thought this was a brilliant marketing strategy and asked:
Why have I never done something like this before?
It’s a question many people have asked throughout history as they stumble across a strategy or technology that has always been available to them, but for whatever reason they didn’t hear about it — or they did hear about it and chose to not follow up and learn more.
This has been my relationship to CSS sprites.
Even though CSS sprites have been around in concept since about 2003 — and have been in mainstream use since 2004 — I never got around to using them because I didn’t think they offered enough. I can now admit that I was wrong, and have found numerous benefits to using them in traditional web design and development.
A Primer on CSS Sprites
In case you’re like me and arrived late to the sprite train let me go over the basics with you.
A sprite is one image that is made up of lots of images. Look at the example below. On the Copyblogger site we use 35 different images that are not intended to be changed often. We could produce each of the images separately but for the reasons I’ll list below we’ve chosen to combine all 35 into one image.
So on the left side you’ll see the single image sprite and the right side is all 35 individual images.
The way we reference all the images is by calculating their position in the image and then using those numbers in the background-position property in our css.
For example notice the social icons for Facebook, Twitter and our RSS feed. Each of these have rollovers. In our style sheet we will define the initial position of the Facebook icon.
[css]
#social-icons .facebook {
background: url(images/sprites.png) -292px -301px no-repeat;
}
[/css]
Why are we using negative numbers?
When calculating the position of an image, the top left corner is always 0. Anything to the right and down is a negative number. In the image below you can see that the Facebook icon starts at 292 pixels on our horizontal axis or the “x” axis. And the image begins 301 pixels down on our vertical or “y” axis.
For our rollover we need to define the hover properties for our background-position element.
[css]
#social-icons .facebook:hover {
background-position-y: -317px;
}
[/css]
Notice that we only had to change the value for the vertical axis because the horizontal number never changes.
One more thing that is very important …
You need to define the width and height of the image or else your container will show as much of the sprite as its size allows. So our final css declaration ended up looking something like this:
[css]
#social-icons .facebook {
background: url(images/sprites.png) -292px -301px no-repeat;
display: block;
height: 16px;
width: 16px;
}
#social-icons .facebook:hover {
background-position-y: -317px;
}
[/css]
Advantages of Using CSS Sprites
Reduces the number of http requests
The main reason to use CSS sprites is to cut back on http requests. Every time a new visitor hits your site their browser will request each image from your server. If your home page loads up 35 different images that is 35 separate times the browser has to go back to the server and ask for one more thing.
This is kind of like forcing your mailman to deliver one piece of mail to your mailbox at a time and then making him go back to the postoffice to get the next one. After the 30th trip he’ll probably want to spray you down with his dog mace.
Improves SEO
This might seem strange to you but considering that google and other search engines are now ranking sites based on speed, every http request and kb matter. The faster your site performs, the higher search ranking you’ll receive.
Reduces overall image size
In most cases, combining all of your reusable assets into one file will be smaller than if you sliced them individually. As I stated above, on the Copyblogger site we use an image sprite that has 35 separate images. Combined together the file size is approximately 74kb. Sliced and individually saved, the file size jumps to over 100k.
Now those of you with fancy high speed connections may be scoffing at a paltry 30k but those people with mobile phones on slow connections are thanking us. As Kevin Durrant and Doodle Jump have taught us — every kb matters.
Hopefully you’re not like me and have been shunning the wonderful world of sprites all these years. If so, take heed to the immortal words of En Vouge and free your mind because the rest will surely follow.