If an image can be recreated using strictly CSS, is there still a purpose for that image?

Question

I previously had some images on my site in the form of simple pills with border and a background color. They act as login/register, add to cart, etc "buttons" that when clicked give an action.

Considering the simplicity of these images, they can be remade 1:1 in CSS quite easily. While the below snippet isn't quite 1:1, it's close enough to visualize how similar a purely CSS option can be. The second pill is the image the CSS is recreating.

.butt {
  border: 2px solid black;
  font-family: Raleway;
  font-size: 18pt;
  font-weight: 500;
  color: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: 7px;
  display: -webkit-flex;
  display: inline-flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  height: 50px;
  width: 150px;
  background-color: #cc5a5a;
  cursor: default;
}

<div class="butt">No Stock</div> <br/> <br/>
<img src="http://i.stack.imgur.com/hhjht.png" alt=""/>

A lot of sites I see still use sprites for rudimentary navigation, like chevrons or arrows for left/right, simple text as linked images to pages and more. I have to wonder why these are not done in CSS?

The way I see it, using CSS means it loads faster and is scalable. What benefit do sites gain from instead using images in place of things that could be done with CSS?

Answer 1

A benefit would be support for older versions of browsers. Most sites still want to support as many browsers and versions as possible. And not all browser versions support every CSS rule.

Answer 2

Compatibility, not all browsers support all kinds of css.

But other than that I think you've nailed it, CSS really is the way to go.

EDIT: It's fair to note some choose to use sprite sheets essentially loading one big picture and then cutting different images out of that sheet to gain a desired look.

Another benefit could have to do with breaking down jobs. For example an artist might be in charge of designing how images (or buttons or whatever) look and can easily upload and replace images where-as the programmer can place them where to go.

There are benefits to both but ultimately it's up to preference and circumstance.