on website, is loading image faster or css code?

Question

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>

madr · Answer 1 · 2015-03-20T08:14:19.900

2

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.

edited Mar 20 '15 at 08:14

answered Mar 20 '15 at 08:09

madr

655
4
16

Thanks for your response. What about if the image is 4kb? – conan Mar 20 '15 at 18:01
4KB is still larger than 2KB and will still add another HTTP request. – madr Mar 21 '15 at 20:31

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

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

When to use IMG vs. CSS background-image?

edited May 23 '17 at 12:22

Community

1
1

answered Mar 20 '15 at 07:16

darkknight

363
1
8

on website, is loading image faster or css code?

2 Answers2