Current time: 03-05-2021, 09:04 PM Hello There, Guest! (LoginRegister)

Post Reply 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Gzip compression and CSS sprite issue left
06-30-2013, 12:06 AM (This post was last modified: 06-30-2013 02:32 AM by lena.)
Post: #3
RE: Gzip compression and CSS sprite issue left
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:

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:

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

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

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.:

As a second order optimization, you might try to join the general.css and img.css files to see if it is quicker.
Find all posts by this user
Quote this message in a reply
Post Reply 

Messages In This Thread
RE: Gzip compression and CSS sprite issue left - lena - 06-30-2013 12:06 AM

Forum Jump:

User(s) browsing this thread: 1 Guest(s)