CODEWITHSUNDEEP
htmlcssperformance
conan
conan

Reputation: 1337

on website, is loading image faster or css code?

I have code below. It has several divs and css code. The image pic size is about 45kb,small size. So, I want to know, should I use img directly or use the code below. Which one has the faster speed when page loading. Appreciate. 

div.smileyface {
	width: 300px;
	height: 300px;
	position: relative;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	display: block;
	background: #ffe632;
	background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e));
	background: -moz-linear-gradient(top,  #fffe8d,  #f6d23e);	
	box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6);
	}
	
p.eyes {
	width: 50px;
	height: 80px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: 40px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}	
	
	p.eyes.lefteye {
		left: 75px;
		}
		
	p.eyes.righteye {
		right: 75px;
		}
		
div.smile {
	width: 200px;
	height: 70px;
	border: 10px solid #222;
	border-top: 0;
	background: rgba(0,0,0,0);
	-moz-border-radius: 0 0 120px 120px / 0 0 90px 90px;
	-webkit-border-radius: 0 0 120px 120px 0 0 90px 90px;
	border-radius: 0 0 120px 120px / 0 0 90px 90px;
	position: absolute;
	bottom: 50px;
	left: 38px;
	box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	-moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8);
	}
	
div.corner {
	width: 10px;
	height: 30px;
	background: #222;
	border-radius: 100px/160px;
	-webkit-border-radius: 100px 160px;
	-moz-border-radius: 100px/160px;
	position: absolute;
	top: -12px;
	-webkit-transform: rotate(65deg);
	-moz-transform: rotate(65deg);
	left: -12px;
	}
	
	div.corner.right {
		left: 202px;
		-webkit-transform: rotate(-65deg);
		-moz-transform: rotate(-65deg);		
		}
<div class="smileyface">
    <p class="eyes lefteye"></p>
    <p class="eyes righteye"></p>
    <div class="smile">
        <div class="corner"></div>
        <div class="corner right"></div>
    </div>
</div>

Upvotes: 0

Views: 81

Answers (2)

madr
madr

Reputation: 665

According to YSlow, it is a best practice to Minimize HTTP Requests: use CSS sprites, avoid CSS images, combine files etc.

The overall goal should in the end be to optimize page weight, though.

Since the image is 45KB in this case, I would recommend the CSS solution - it is 2148 chars, which is 2KB. If all CSS is in one file, the CSS solution will save you 43KB and 1 HTTP request.

The CSS Solution might get even smaller with a tool such as FormatCSS and by minification.

45KB sounds like a very big file, unnecessary big even. Optimize Images could also be considered.

Upvotes: 2

darkknight
darkknight

Reputation: 372

Here is a detailed explanation of what to use when. Hope it helps:

When to use IMG vs. CSS background-image?

Upvotes: 1

Related Questions