CSS Size Greatly Inflated with Embedded Images

I have found the following:

Base64-encoded data: URIs are roughly 33% larger in size than their binary equivalent.

But even that doesn't seem to explain the difference.

I'm using Yslow, so I don't think browser cache is causing the problem.

All my images are mostly rounded corners and gradients, and I compressed them using ImageOptim

It appears to be with the IE6 and IE7 compatibility.

Attached are my before and after css with CSS Embedded Images 6.x-2.x-dev.

Also is an html file with my Diff of the two files. Just remove the .txt that I needed to add because d.o doesn't allow css or html files to be attached.

I think the problem is you are using a very inefficient IE hack:

* html div.ctools-ajaxing,*+html div.ctools-ajaxing
{
	background:url(/sites/all/modules/ctools/images/status-active.gif) center center no-repeat;
	float:left;
	width:18px;
}

* html span.ext,*+html span.ext
{
	background:url(/sites/all/modules/extlink/extlink.png) right center no-repeat;
	padding-right:12px;
	zoom:1;
}

* html span.mailto,*+html span.mailto
{
	background:url(/sites/all/modules/extlink/mailto.png) right center no-repeat;
	padding-right:12px;
	zoom:1;
}

First, you are duplicating properties, such as "padding", "width", and "float". Shouldn't these hacks only have "background-image" property.

Also, why not create a special css file for IE6 and IE7 using conditional comments:

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" media="all" href="ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" media="all" href="ie7.css" />
<![endif]-->

Removing all the IE hacks changed my optimized CSS file from 124.536KB to 105.472KB saving 15%.

This is still high compared to not embedding the images. The file size of that CSS is 47.578KB.

Attached is the file with no IE hacks

I created a separate issue to deal with IE conditional comments: #745520: Use Conditional Comments for IE6 and IE7 Instead of Hacks

Let's continue figuring out how 5.5K turned into 50k by embedding it.

I deleted all CSS that didn't have an image in it. I'm left with the attached file.

The problem appears to be that, I have many more images in the CSS than are being used on a regular basis.

Now I'm wondering the best way to work around this issue.

Perhaps we can implement a special code that tells CSS Embedded Images not to process certain images.

Will something like this work:

div {
   background-image:url(/misc/menu-collapsed.png); /*no-embed*/
   margin:0;
   padding:0;
}

But do comments get stripped out before CSS Embed works?

Wow, I just counted my css images. There are 79!!! I'm guessing less then 30 are typically used on a single page.

There are 3 solutions I've come up with to help resolve this issue:

1. Comment Out Unused Style from Theme - I removed comment, poll, and forum styles because I don't use those modules.
2. Hide Authenticated User Styles from Anonymous Users - My users don't login to use my website, so I moved all warnings and edit tabs styles to admin.css and added the following to my themes page.tpl.php just after <?php print $styles; ?>:
   

     global $user;
     if ($user->uid) {
       echo "<link type=\"text/css\" rel=\"stylesheet\" media=\"all\" href=\"/sites/all/themes/THEME_NAME/admin.css\" />";
     } 

3. #745520: Use Conditional Comments for IE6 and IE7 Instead of Hacks

Without the solutions #3, I've reduced my CSS file to 116.5K. I expect as savings of around 15K with conditional comments. So my CSS should be around 100K.

After considering comment #9 you can probably change this issue to fixed. I think the suggestion in comment #9 might be a good option, because there could be background images that are used on 1 or 2 pages that shouldn't be embedded in CSS.

Fixed in Issue #745520: Use Conditional Comments for IE6 and IE7 Instead of Hacks