CSS Images

[mouseclock]

Currently, my website has tons of images and really that slows my website. I have tried using CSS sprites but failed to comprehend. Here's the CSS code and I wait for your suggestions on how to improve things.

.header_left {
	background:url(../images/header_left.png) repeat-x 0 0;
	height:64px;
	width:51%;
	position:absolute;
	left:0;
}
.header_right {
	background:url(../images/header_right.png) repeat-x 0 0;
	height:64px;
	width:51%;
	position:absolute;
	right:0;
}
.new_menu li a.new_active{
	background:url(../images/menu_newactive_right.png) no-repeat 100% 0%;
	color:#474747
}
.new_menu li a.active span span{
	background:url(../images/new_menu_active.png) repeat-x 50% 0%;
}

[LearningCoder]

Why not try to scale your images down so it decreases the file size. That's my only possible suggestion. And I don't know if it's a correct solution at that.

Could always give it a go though. See what happens.

Regards,

LC.

[mouseclock]

Originally Posted by LearningCoder

Why not try to scale your images down so it decreases the file size. That's my only possible suggestion. And I don't know if it's a correct solution at that.

Could always give it a go though. See what happens.

Regards,

LC.

That is already done using techniques like yahoo smush. The individual file sizes is already optimized. But there are many individual files, which is the real issue.

So many images ( with each around 300 bytes) and thus many requests. I want to lower those number of requests. So any ideas?

[tracknut]

Are these images things that could be done with CSS or text? It's hard to tell without a link to the page or links to the images. If you can create the visual with CSS, that's always best.

But if all the images are necessary, then yes sprites are the only solution I'm aware of.

Dave

[mouseclock]

Originally Posted by tracknut

Are these images things that could be done with CSS or text? It's hard to tell without a link to the page or links to the images. If you can create the visual with CSS, that's always best.

But if all the images are necessary, then yes sprites are the only solution I'm aware of.

Dave

The thing is I am struggling with sprites as well.

They don't seem to work on those kind of repeated images or round corner images. Based on the css code shown above, I am just unable to get it right. So I need help on CSS Sprites more than anything.

[tracknut]

I would be doing rounded corners with css at this point, not images. If that's what these are, get rid of them!

Dave