[TRICK] Using 1 image instead of 3

[Eihwaz]

Your shop probably uses headings for left and right column boxes. By headings I mean those little rectangles with rounded corners and nice web 2.0 gradients on which it is written what this box displays (Tags, Categories, Cart, etc.)
And you have 4 different images for them: default block heading (light gray), exclusive block heading (dark gray), my account block heading (kind of rosy, pink) and a special heading for cart box (dark gray with a little cart icon on it).
You can keep almost the same look by using 1 image only (or exactly the same look with 2 images).
The trick is to use semi-transparent png file with all those web 2.0 gradients and css's background-color property to, well, give it a color.
See the images I've attached.
How to make it work:
Find div.block h4 in your global.css file. Most probably you'll see this:

div.block h4 {
   text-transform: uppercase;
   font-family: Helvetica, Sans-Serif;
   font-weight: bold;
   font-size: 1.2em;
   padding-left:0.5em;
   border-bottom:1px solid #595A5E;
   padding-top:2px;
   line-height:1.3em;
   color: #374853;
   height: 19px;
   background: transparent url('../img/block_header.gif') no-repeat top left;
}

The line we're interested in is the last one: background.
Download the headingBg.png file I've attached to this post and put it to your theme's img directory, then change the above code to:
div.block h4 {
text-transform: uppercase;
font-family: Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1.2em;
padding-left:0.5em;
border-bottom:1px solid #595A5E;
padding-top:2px;
line-height:1.3em;
color: #374853;
height: 19px;
background: #D1D4D8 url('../img/headingBg.png') no-repeat top left;
}
[/code]
You can play with #D1D4D8 value to achieve the best results.
Once you're done find div.exclusive h4:

div.exclusive h4 {
   background: transparent url('../img/block_header_exclusive.gif') no-repeat top left;
   color: white;
}

Change to:

div.exclusive h4 {
   background-color: #8F939C;
   color: white;
}

Do the same for div.myaccount h4 (I found #BD005B color to match the default theme).
Now the cart block: I usualy just remove whole

#cart_block h4 { background-image: url('../img/block_header_exclusive_cart.gif'); }

line, this way css will apply default exclusive style to it (dark gray), or you can change cart's color to something else, like in the screenshot I've attached.
If you do need the cart icon on it, you're going to need another png image.
And there you have it: one image, less than 1 kilobyte vs 4, almost 6 kilobytes. But the most important thing is that we've optimized our theme to send less requests for images (sending those requests can sometimes take longer than actually loading the image itself).
Almost forgot (it's obvious, but anyway): the trick here is that our background image is black and white, but it has semi-transparent parts, and we can see the background-color through them.
Cheers!

[rocky]

Thanks for the tip. I can see how this would be useful on a website. You could even use this to allow the customer to choose whatever colour they want the site to be! It is unfortunate it won't work in IE6 though, since it doesn't support transparent PNGs. I think I'll have to wait until IE6 market share becomes negligible before using it.

[Eihwaz]

Well, yes, IE6 doesn't support png transparency directly, but there are hacks you can use to make it work, because IE6 can display semi-transparent png's using filters. I don't like the idea, however, because the more you support IE6, the longer it lives, but anyway...
In your global.css:

* html .g-png24 {
   behaviour:[removed]
       (!this.fixedPNG?
           (function(el){
               var fixSrc = "", sizingMethod = "crop";
               if (el.tagName.toLowerCase() == "img") {
                   fixSrc = el.src;
                   sizingMethod = "image";

                   el.style.width = 1;
                   el.style.height = 1;
                   el.src = "";
               } else {
                   var tmpImg = new Image();
                   tmpImg.src = el.currentStyle.backgroundImage.split('\"')[1];
                   if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled') > -1) {
                       sizingMethod = "scale";
                   }

                   fixSrc = el.currentStyle.backgroundImage.split('\"')[1];
                   el.className += " g-png-fixed";
               }
               el.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + fixSrc + ", sizingMethod='" + sizingMethod + "')";
               el.fixedPNG = true;
           })(this):''
       )
   );
}

Then you can use iepng class on elements that have pngs in them:

 
Block 

content 

Method 2:
You can also use jQuery plugin to display png's in IE6. There's no need to modify css or use classes on elements, it will work just fine.
Google jquery.pngFix.js, downalod it and copy this file to your shop's js/jquery directory. Then open your theme's header.tpl file and before </head> closing tag we'll use conditional statements to make IE6 do what we want it to:

       [There's more cod here that I've skipped]
       <script type="text/javascript" src="{$content_dir}js/jquery/jquery-1.2.6.pack.js"></script>
       <script type="text/javascript" src=";{$content_dir}js/jquery/jquery.easing.1.3.js"></script>
       <script type="text/javascript" src="{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js"></script>
{if isset($js_files)}
   {foreach from=$js_files item=js_uri}
   <script type="text/javascript" src="{$js_uri}"></script>
   {/foreach}
{/if}
       {$HOOK_HEADER}
       {* OUR CHANGES: *}
       <!--[if lte IE 6]>
           <script type="text/javascript" src="{$content_dir}js/jquery/jquery.pngFix.pack.js"></script>
           {literal}
           <script type="text/javascript">
               $(document).ready(function(){ 
                   $(document).pngFix(); 
               }); 
           </script>
           {/literal}
       <![endif]--> 
       {* END *}
   </head>

Notice

<!--[if lte IE 6]>

lte stands for "less than or equal", so the javascript code we're using will be loaded only on IE6 and below.
Have a nice day!

[timir]

Excellent, Just what I was looking for gonna try this , Thank you