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.
After reading BloggingPro’s article on CSS Optimization, I have decided to come up with my own study.
For this test, I sampled CSS from six sites:
I used the following CSS Optimizers:
The tests were done using the options that would yield the highest compression. Here are the results.
| Site | CSS Optimiser | Icey | Flumpcakes | Clean CSS |
|---|---|---|---|---|
| iBegin | 36.68% | 26.48% | 27% | 25.40% |
| CSS Vault | 16.33% | 36.32% | 17% | 35.10% |
| Teach Soapbox | 28.45% | 36.42% | 26% | 35.40% |
| Mashable | 21.46% | 30.32% | 22% | 29.80% |
| CNN | 8.54% | 31.44% | 15% | 26.10% |
| PayPal | 2.45% | 16.94% | 7% | 15.30% |
Based on these results, it appears that Icey produces the best compression results, followed closely by Clean CSS, then by Flumpcakes and finally by CSS Optimiser.
That being said, however, it is noteworthy to point out that optimizing CSS code involves many techniques such as stripping out of line feeds and empty tags, combining common elements, merging shorthand properties and more, such that it is possible for the resulting code to display differently when used on the actual site, which is why these CSS optimizers encourage CSS validation prior to any optimization.
Also, these optimization techniques are lossy. Once CSS code has been optimized there is no turning back, and it will be very difficult if not impossible to make changes to the optimized code by hand. Thus, it is always advisable to keep a backup of the original CSS code.
For non-lossy code optimization there is always server-size methods such as gzip, an Apache mod that compresses content at the expense of consuming server resources and is unsupported by older browsers,
and CSS-SSC, a server-side preprocessor which parses the original CSS file and serves a compressed version to the clients.
Taken from DrunkenFist.com: Basically inline-block does what it sounds like it does. It’s an inline element (it’s displayed within a containing block and flows in the same line) that behaves like a block (which in practical terms means it can have explicit height, width, padding and margins, etc.)
Display: inline-block is the bee’s knees. CSS 2.1
Very cool web-based tool that formats and optimizes CSS markup. Based on CSSTidy.
Code Beautifier: CSS Formatter and Optimiser
You are currently browsing the archives for the Optimization category.
