Come On and Sprite for your Website

Come On and Sprite for your Website

« Skeleton .htaccess file for Powweb HostingFirefox Adsense WordPress Plugin »

Notice any familiar images from my website? Real special huh? Hah, maybe.. No, let’s not be silly, let’s get to it. Get ready to save some bandwidth

CSS Sprites- What you say?

Css sprites sound tough but they aren’t, not here, not in this article. I want you to make one, I want a faster technorati, I want a faster hypem.com! Just one. Now your website visitors only have to download 1 image instead of 3-15! I do that for you guys and girls, won’t you return the favor?

Image Sprite before XHTML

• Go to you site and pick out 3-15 images that are on almost every page.
• Now create a new image with all of those images side by side, it will make things easier to have each image be at the very top, so they aren’t on top or above each other.
• Then make the background white and save the file.

That’s it! Your own Image Sprite!

Just a couple images pasted together in a photoshop file. Now that we understand the simplicity of a sprite, lets focus on using one, and making that as easy as possible, none of that tricky CSS stuff that I love.

XHTML before CSS

Ok before you have CSS, you have XHTML. This is the XHTML that IS my askapache logo at the top left of this screen. It is conveniently a link to my home page. All you need to notice from this example is the id="apache". That is how we can control that particular tag from within CSS.

<a id="apache" href="http://www.askapache.com/" title="AskApache.com Logo"></a>

CSS and We’re spent

Whew, that was an exhausting couple minutes right? Ok did you take a water break? You ready go? Lets do it. Time to pay a little back to our Internet.

This css explains that the background-image to be displayed for the #apache link element is exactly 160×27 pixels and is 81pixes in from the left of the image css-sprite.

#apache {width:160px; height:27px; background:url(http://z.askapache.com/i/css-sprite.png) -81px 0 no-repeat;
margin:0; padding:0; overflow:hidden;display:block; position:absolute; top:10px; left:10px; }

Dancing the Sprite Dance

Ok so that should get you started, or if that makes you happy enough you are good to go!

Using CSS Sprites for image elements

See now why I said it would be easier if you keep your images all aligned at the top? This way you only have to figure out the distance from the left as well as the actual image dimensions. But as my sprite example shows, you don’t have to do it the easy way, but just coming this far you’ve accomplished more than you realize, and probably gave you an advantage most of your competitors don’t have. No doubt. Congratulations.

But, what if you are a stickler for semantically ideal coding guru and you don’t like using background-images on an a element without using an image element? First, chill :p

I experimented a little bit on this awhile ago, and discovered a simple but IMO very elegant solution. To get it to work, use a 1×1 transparent .gif image and set that as the source of your image, everything else discussed above will then work.

Caveats

Not many. Because you should only use this for your most requested images that are more design elements than something like a photo of your dog.

• Use the overflow:hidden css to prevent overlapping.
• For list elements like li, ul, dt, etc.. follow this article and align the elements vertically.
• Dont become a SNOB!

« Skeleton .htaccess file for Powweb Hosting
Firefox Adsense WordPress Plugin »

MP3 Caper