Gzip compression and CSS sprite issue left

[lena]

Hi daniel,

(12-16-2012 10:52 AM)daniel2008 Wrote:  2. CSS sprite to those images
They are background images need x-expand but can't be used in sprite;
or they are encoded in the way of <img src="..."> which I have no idea to add and specify their position in a sprite image.

Your second best option to images sprites is CSS sprites [these ones allow x-expand edit: whatever that is, but you might consider stacking the images vertically or diagonally to build an image sprite, no?]. What you are doing in the second case is serving several background images embedded in only one CSS file. The way of doing it is constructing a second CSS file with only the background images embedded with data URIs. Call this file img.css. You can find a discussion here:

http://stackoverflow.com/questions/52580...ata-base64

IE6 and IE7 do not support data URIs, but there's a work around using mhtml to embed the background images. Call that file img-ie.mht. You can find a discussion here:

http://www.phpied.com/mhtml-when-you-nee...and-under/

Then what you need to do is using the following code [assuming that you are using html5]:

Code:

<link rel="stylesheet" href="path-to/general.css">
<!--[if lte IE 7]>
<link rel="stylesheet" href="path-to/img-ie.mht">
<![endif]-->
<!--[if gt IE 7]><!-->
<link rel="stylesheet" href="path-to/img.css">
<!--<![endif]-->

The conditional comments are used to prevent unnecessary downloads.

The .mht file must be served with the correct mime type, otherwise it wont work, cf.:

http://www.phpied.com/the-proper-mhtml-s...ment-78586

As a second order optimization, you might try to join the general.css and img.css files to see if it is quicker.