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

Question

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

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>

Answer 1

根据 YSlow , 最好的做法是 Minimize HTTP Requests : 使用 CSS sprites，避免 CSS 图像，合并文件等。

不过，最终的总体目标应该是优化页面权重。

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

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

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