在网站上，加载图像更快还是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的说法，最佳做法是最小化HTTP请求 ：使用CSS精灵，避免CSS图像，合并文件等。

最后，总体目标应该是优化页面权重。

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

CSS的解决方案可能会报复，如工具小FormatCSS和微小 。

45KB听起来非常大，甚至不必要。 还可以考虑优化图像 。

Answer 2

这是何时使用的详细说明。 希望能帮助到你：

何时使用IMG和CSS背景图片？