Comments on: CSSEmbed – automatically data: URI-ize

By: Ruslan

Ruslan — Thu, 26 Nov 2009 16:12:28 +0000

You can use online generator of data:uri css sprites

http://duris.ru/lang/en/

Supports MHTML for IE<8 & data:URI for others browsers

By: Dmitry Chaplinsky

Dmitry Chaplinsky — Wed, 18 Nov 2009 21:49:03 +0000

Just finished very raw implementation of mhtml support for the tool:
http://github.com/nzakas/cssembed/issues/#issue/3

It was my first java work and I spent around hour or so, so it may looks awful but can provide general idea.

By: Dmitry Chaplinsky

Dmitry Chaplinsky — Wed, 18 Nov 2009 16:45:00 +0000

Aham, here is how it looks after enabled IE support:

4963 all-buttons-sprite.png
182 test.css
218 test.html
13635 test_new.css
5045 test_new.css.gz

Quite nice, if gzip enabled, of course.

By: Dmitry Chaplinsky

Dmitry Chaplinsky — Wed, 18 Nov 2009 13:39:48 +0000

Hi Steve.
I just performed small test using our sprite for buttons and small test CSS:
.button {
background: url(all-buttons-sprite.png) no-repeat 0 0;
}

#button1 {
background-position: 0 -20px;
}

#button2 {
background-position: 0 -40px;
}

$ java -jar ~/Downloads/cssembed-0.2.6.jar -o test_new.css test.css

Here is the file sizes:
4963 all-buttons-sprite.png
157 test.css
6777 test_new.css
4804 test_new.css.gz

So, after GZIP we have not only -1 request but also improvements in total size.

Unfortunately it seems that MHTML stuff will ruin down this good statistic.

By: Steve Souders

Steve Souders — Tue, 17 Nov 2009 17:24:49 +0000

@Bruno: An extra HTTP request adds 200+ milliseconds to a page (worldwide average). So the comparison is 30K & 200+ ms versus 40K. For most users, the 40K option is going to be better. Typically, the encoded data is going to increase 37%, but putting it in a stylesheet and gzipping might reduce that. This would be a good study for someone to do. ;-)

By: Bruno

Bruno — Tue, 17 Nov 2009 09:53:44 +0000

Hi Steve and thanks for sharing.

But after testing, I have a question about optimization with URI format.
While trying to see limits of this tool, I try to compress a twitter image on their homepage. Just with one (clouds.gif), the content downloaded has improve from 30289 to 40410 bytes. more than 10k for just one image…
Is this URI format really a good solution? Actually it depend on client connection speed and, I think, of server-side keep-alive activation, but I don’t really know what is the limit between using and not using URI format. In the case I expose, it’s sure we don’t have to… Any idea?

Thanks in advance,

Bruno