What is slowest to render, separate images drawn in via absolute positioning, or a complete image?

Question

I have on my site a bunch of "cards" that are just jpg images right now, but I'm thinking of switching this out for a html/css rendered solution, which would require me to position a lot of small icons on a background and then add some stylish text on it.

The problem is, I don't know how to measure which method is faster for the client or the server.

I threw together an example to illustrate (yes it's ugly).

Full image (111kb):

Rendering via html/css:

https://jsfiddle.net/u5osqyfy/1/

<div class="wrapper">
  <img class="background" src="http://i.imgur.com/qCxyd9v.jpg">
  <img class="icon one" src="http://i.imgur.com/c5Qx3x7.png">
  <img class="icon two" src="http://i.imgur.com/4G8xUeM.png">
  <img class="icon three" src="http://i.imgur.com/9Kips1U.png">
  <img class="icon four" src="http://i.imgur.com/0utE9VD.png">
  <img class="icon five" src="http://i.imgur.com/Ej7w0pA.png">
  <img class="icon six" src="http://i.imgur.com/9EdnWnW.png">
  <div class="text">
    How do I measure how much "juice" this takes to render?
  </div>
</div>

.wrapper {
  position: relative;
}
.icon {
  position: absolute;
}

.icon.one {
  left: 10px;
  top: 20px;
}

.icon.two {
  left: 140px;
  top: 20px;
}

.icon.three {
  left: 270px;
  top: 20px;
}

.icon.four {
  left: 400px;
  top: 20px;
}

.icon.five {
  left: 140px;
  top: 150px;
}

.icon.six {
  left: 270px;
  top: 150px;
}

.text {
  position: absolute;
  left: 120px;
  top: 350px;
  font-size: 24px;
  color: white;
  text-align: center;
  max-width: 300px;
}

The background is 73 kb and the images are 7kb each for a total of 73 + 42 = 115 kb.

But sometimes a few of the icons are the same as each other, which would bring down the total in terms of raw kbs, so then it becomes a question of how much the positioning costs...

How do I go about actually measuring what's best? Because I imagine this is a question with no set answer but rather something that needs to be reviewed on a case-by-case basis.

So, 1) How do I measure this?

or

2) Can it be stated directly that it doesn't much matter?

Answer 1

Multiple http requests will generally always be slower than using one request. Try using an image sprite - only one http request then using css to position on the page. You can even use build tools like Grunt or Gulp to automate this piece for you too, including reducing the image file size with losless compression tools like TinyPNG.com (these can also be included as API calls in your grunt/gulp tasks) - one stop automation.

Answer 2

Here is a screenshot of my measurement on your fiddle using Chrome Dev Tools.

As you can see, fragmenting the image in separate assets is a good solution because it results in many concurrent http requests, which is generally better at the same bandwidth.

By the way, it's hard to define a thumb rule in such cases, you'll have to decide on case-by-case basis.

In this particular scenario, I'll suggest the "many-assets-via-css" approach.

Answer 3

Answer 1: You can measure any website load if you have an inspector to do so. I would suggest going into Google Chrome, opening the inspector and clicking on the "Timeline" tab. Once there, Either refresh the page (Or press record in the top left corner of the window, then refresh) and it will show you the load times for various items.

For example, this page loads in 2.72s. 77.11ms Loading, 456.61 Scripting, 191.89 Rendering, 162.97 Painting, 163.16 Other. This way you can see what the biggest pain points of your page are. In this example loading this page, the biggest pain point is the Scripting - but honestly, it's only half a second, so there's nothing to worry about.

Answer 2: Your file sizes are so small. Assuming you don't need to load a lot of the same example and this is the only thing loading on the page - No, this does not matter. 115kb + CSS size (usually tiny also) is far too small to notice a difference in loading time on most modern machines. If you have more images than the example above, the problem gets exponentially more problematic. So then it depends on how many unique images you're calling and how many duplicates you're calling. If it's still a lot of images, you may want to start combining images and saving them properly (at a small size) so it is less calls to a server.

UPDATE Here's an ugly example of using a single icon with CSS to determine the diamonds: https://jsfiddle.net/g4stvufk/

Of course the icon should have the diamond shine included to look like yours

HTML

<div class="diamond">
    <img src="http://i.imgur.com/PWeXerY.png">
</div>

css

.diamond {
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
}
.diamond:after {
    content: '';
    position: absolute;
    left: -65px;
    top: 65px;
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-top-color: red;
}
img {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

The best advice I can give is "Reuse, Reuse, Reuse" Whatever you can find to reuse (like the icon and the shine), reuse it.