Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
Online CSS compressors
Dave writes in on CSS optimization. I won’t get into the discussion on whether the optimization compression of CSS files is actually worth the effort or not; instead I’ll try to make a comparison of online tools that do this. The article I linked to (well, more the comments on it) contains some good links. I went and used my current CSS as a 10,241-byte test file. Most tools allow you to set some options, such as readability (i.e. compression rate) and whether or not long hex codes should be shortened if possible. I didn’t enable options just for the sake of it — only those I would use in a real-life situation.
| Tool | Compressed file | Size (bytes) | Compression rate | UTF-8 support | Extras |
|---|---|---|---|---|---|
| Flump’s Online CSS Optimizer | flump-css-optimizer.css |
8,926 | 12.84% | Yes | Option to convert absolute values (px & pt) into relative values (em) |
| CSS Optimizer | css-optimizer.css |
7,716 | 24.66% | No! | None, except for the lack of user-friendliness |
| CSS Formatter and Optimizer | formatter-optimizer.css |
7,548 | 26.30% | Yes | Option to reorder file alphabetically by selectors and properties |
| Icey’s CSS Compressor | icey-css-compressor.css |
5,800 | 43.36% | Yes | Compression statistics galore! |
When someday I’ll decide to optimize
my CSS, I’ll probably first sort the file alphabetically by selector names, and then run it through Icey’s compressor, which turns out to be the very best. However, every tool has its pros and cons, as you can see. That is, except for the CSS Optimizer, which doesn’t quite have any pros. And the fact that it doesn’t handle UTF-8 characters properly[1] is remarkable, to say the least. In my opinion it could use an update.
If you know of another online CSS compressor to add to the list, please do let me know.
Note: Does anyone know how to read a file line by line through fgets() in PHP without messing up special UTF-8 chars? Because that’s where this tool fails…
Comments (6)
Listed below are the responses for this entry.
Trackbacks & Pingbacks (2)
Listed below are resources on the web that mention this article.
-
- If..Else Log: CSS Optimization:
CSS Optimization
Dave Shea writes an entry on CSS optimization. Mathias also has a comparison of various CSS compressors.- Trackback made on September 18th, 2005 @ 5:12 pm
-
- ZOOB: Заметки веб-разработчика: CSS оптимизаторы:
[…] Выискалась целая пачка CSS-оптимизаторов. […]
- Pingback made on September 26th, 2005 @ 10:24 am
http://dev.wp-plugins.org/wiki/css-compressWrote that a while ago. Someone ought to update it to use the Icey code base. Quite impressive stuff.
I was actually planning on including CSS Compress in the list, but since the old links didn’t work anymore I thought you abandoned the project. It’s nice to know you haven’t! Isn’t there a test file somewhere on the web (e.g.
http://domain.ext/tools/compress-css?cssfile=http://blah.foo/style.css) like there used to?I think zipping works a lot better. The CSS file of overheid.nl for example is, when saved on disk, 22,7 KiB. Online it is 3,7 KiB.
Maybe this one is nice to add to the list:
http://www.automotivecenter.nl/diversen/utility/csscompressor/CSS Tidy is the best I’ve found so far. I was having trouble finding an online copy of it so I put up my own:
http://freshstart.promotionsickness.com/css-compress/My favorite feature is the merging of selectors that contain the same properties. Really cuts down on the file size.
I have found a method of automatically compressing your css at runtime using some simple php, you can check it out here:
PHP CSS Compressor