Wayne Pan » css http://waynepan.com tech | js | ui | ajax | mobile Mon, 17 Oct 2011 20:52:54 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Easy as Pie CSS Sprites http://waynepan.com/2007/09/28/easy-as-pie-css-sprites/ http://waynepan.com/2007/09/28/easy-as-pie-css-sprites/#comments Fri, 28 Sep 2007 17:50:24 +0000 Wayne http://waynepan.com/2007/09/28/easy-as-pie-css-sprites/ Continue reading →]]> css_sprites.png
CSS Sprite Generator

A very useful tool has just been released by the guys at website-performance.org. It’s web app that generates a png and CSS rules for easy CSS sprites. What’s a CSS sprite? Best explained below.

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

In other words, take all those small icons on your website that are individual files, zip them up, use CSS Sprite Generator, download 1 .png and apply some CSS rules. This reduces the amount of requests to your server.

]]> http://waynepan.com/2007/09/28/easy-as-pie-css-sprites/feed/ 1