The initial page works perfectly fine as it is. I chose it, however, because the design called for several features that are doable via pure CSS, but are effects that we have traditionally done via images, including:

• background gradient
• border-radius
• box-shadow

Using CSS3, CSS3 PIE, and IE Filters, I was able to remove all design images within the main content area.

Samples from Practical CSS3-ified CSS

.archive .more a .plus{float:left;width:14px;height:14px;margin-left:3px;padding-top:1px;background:#8c8c8c;color:#fff;font-family:'Trebuchet MS',sans-serif;font-size:16px;line-height:11px;text-align:center;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
}
.archive #leftColumns .wrapper{float:left;width:994px;
	background:#151515;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717), color-stop(.15,#2f2f2f));
	background:-moz-linear-gradient(0% 0% 270deg, #0D0D0D, #2F2F2F, #171717 70%);
	-pie-background:linear-gradient(0% 0% 270deg, #0D0D0D, #2F2F2F, #171717 70%);
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
}
.archive #leftColumn{float:left;display:inline;overflow:hidden;width:177px;margin-top:13px;padding:26px 0 186px;position:relative;z-index:2;background:#262626;border:1px solid #454545;border-left:0;
	box-shadow: 3px 0 10px #000;
	-moz-box-shadow: 3px 0 10px #000;
	-webkit-box-shadow: 3px 0 10px #000;
	border-radius: 0 12px 12px 0;
	-moz-border-radius: 0 12px 12px 0;
	-webkit-border-top-right-radius: 12px;
	-webkit-border-bottom-right-radius: 12px;
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
}
.archive #middleColumn .col .imgcont a img{border:1px solid #fff;
	box-shadow: 3px 4px 0 #E3E1E1, 6px 8px 0 #adadad;
	-moz-box-shadow: 3px 4px 0 #E3E1E1, 6px 8px 0 #adadad;
	-webkit-box-shadow: 3px 4px 0 #E3E1E1, 6px 8px 0 #adadad;
	-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color='#E3E1E1',offX='3',offY='4')", "progid:DXImageTransform.Microsoft.DropShadow(color='#adadad',offX='6',offY='8')";
	filter: progid:DXImageTransform.Microsoft.DropShadow(color='#E3E1E1',offX='3',offY='4',positive='true'), progid:DXImageTransform.Microsoft.DropShadow(color='#adadad',offX='6',offY='8',positive='true');
}
.archive #middleColumn .col .imgcont a:hover img{border-color:#FDF89B;
	box-shadow: 3px 4px 0 #E3DA5A, 6px 8px 0 #ADA845;
	-moz-box-shadow: 3px 4px 0 #E3DA5A, 6px 8px 0 #ADA845;
	-webkit-box-shadow: 3px 4px 0 #E3DA5A, 6px 8px 0 #ADA845;
	-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color='#E3DA5A',offX='3',offY='4')", "progid:DXImageTransform.Microsoft.DropShadow(color='#ADA845',offX='6',offY='8')";
	filter: progid:DXImageTransform.Microsoft.DropShadow(color='#E3DA5A',offX='3',offY='4',positive='true'),positive='true'), progid:DXImageTransform.Microsoft.DropShadow(color='#ADA845',offX='6',offY='8',positive='true');
}
.archive .modal{position:absolute;top:-9999px;left:-9999px;z-index:3;padding:9px;width:498px;height:504px;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	background:rgba(207,207,207,.25);
	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3FCFCFCF,endColorstr=#3FCFCFCF);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3FCFCFCF,endColorstr=#3FCFCFCF);
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
	zoom:1;
}
.archive .modal h3{float:left;padding:0 0 0 15px;width:483px;font-size:17px;line-height:38px;font-weight:bold;color:#f1fcff;text-transform:uppercase;
	border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ED1B23), to(#BF161C), color-stop(.55,#ED1B23));
	background:-moz-linear-gradient(0% 0% 270deg, #ED1B23, #ED1B23 55%, #BF161C 55%, #BF161C 100%);
	-pie-background:linear-gradient(0% 0% 270deg, #ED1B23, #ED1B23 55%, #BF161C 55%, #BF161C 100%);
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
	zoom:1;
}
.archive .modal .close{position:absolute;top:18px;right:24px;width:64px;font-weight:bold;font-size:10px;line-height:17px;color:#fff;text-transform:uppercase;text-decoration:none;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background:#D17D80;
	background:rgba(190,190,190,0.6);
	box-shadow:-2px 3px 3px rgba(100,100,100,0.3);
	-moz-box-shadow:-2px 3px 3px rgba(100,100,100,0.3);
	-webkit-box-shadow:-2px 3px 3px rgba(100,100,100,0.3);
	text-shadow:0 0 2px #fff;
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
	zoom:1;
}
.archive .modal .close span{float:left;margin-right:4px;width:14px;line-height:14px;font-family:Verdana,Tahoma,sans-serif;text-align:center;border:2px solid #fff;
	box-shadow:0 0 6px rgba(0,0,0,.3);
	-moz-box-shadow:0 0 6px rgba(0,0,0,.3);
	-webkit-box-shadow:0 0 6px rgba(0,0,0,.3);
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
	zoom:1;
}
.archive .modal .content{clear:both;float:left;border-width:30px 15px 15px;border-style:solid;border-color:#2C2B2B;width:468px;height:422px;overflow:hidden;overflow-y:auto;background:#2C2B2B;
	border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	behavior: url('../../wp-content/themes/practicalcss3/css3-pie.htc');
	zoom:1;
}
				

The Results

Average after 5 loads with cleared cache and no ads:

	Requests	Kb	Seconds
Before	48	418.1	2.84
After	42	390.2	2.45

Obviously no huge savings anywhere in the results, thanks to the efficiency of the initial code, but if those numbers are multiplied by the 30-40k times that page is viewed each month, it could be meaningful. Additionally, if we were asked to, say, change the color of the drop-shadow effect on each of the images, it would be a simple CSS change as opposed to finding the sprite PSD, making the changes, then waiting for the image to clear cache on Akamai.