<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet"> 

<div class="wrapper">
  <h3>Original Image</h3>
  <p>
    This image contains many shades of red and the transition between the colors is smooth.
  </p>
  <svg width="500" height="335" viewBox="0 0 500 335">
  <image xlink:href="https://images.unsplash.com/photo-1507150080056-79542bdb9c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bf395c0219193d28341bc6ad9aba0500" width="100%" height="100%" x="0" y="0"></image>
</svg>
</div>

<div class="wrapper">
  <h3>Posterized Image</h3>
  <p>The number of shades of red in every pixel in this image have been decreased to three.</p>
<svg width="500" height="335" viewBox="0 0 500 335">
  <filter id="posterize">
      <feComponentTransfer>
          <feFuncR type="discrete" tableValues="0 .5 1"/>
      </feComponentTransfer>
  </filter>
  
  <image xlink:href="https://images.unsplash.com/photo-1507150080056-79542bdb9c59?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bf395c0219193d28341bc6ad9aba0500" width="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image>
</svg>
</div>

svg {
  display: inline-block;
  border: 5px solid #eee;
}

.wrapper {
  margin: 5vw;
  background: #fff;
  padding: 3vw 5vw;
  font-family: Quicksand;
}

body {
  background: #2c2c2c;
}