在网站上，是加载图像更快还是css代码？

Question

我的代码如下。它有几个div和css代码。图像pic大小约为45kb，体积小。所以，我想知道，我应该直接使用img还是使用下面的代码。哪一个在页面加载时速度更快。欣赏。

＆＃13;

＆＃13;

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);		
		}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据YSlow，Minimize HTTP Requests是最佳做法：使用CSS精灵，避免使用CSS图像，合并文件等。

但总体目标应该是优化页面重量。

由于在这种情况下图像是45KB，我会推荐CSS解决方案 - 它是2148个字符，即2KB。如果所有CSS都在一个文件中，那么CSS解决方案将为您节省43KB和1个HTTP请求。

使用FormatCSS和minification等工具，CSS解决方案可能会变得更小。

45KB听起来像一个非常大的文件，甚至不必要的大。 Optimize Images也可以考虑。

Answer 2

以下是对什么时候使用的详细说明。希望它有所帮助：

When to use IMG vs. CSS background-image?