<form action="">
  <label>Image rendering:</label>
  <input type="radio" name="imageRender" id="renderAuto" value="auto" checked="checked" />
  <label for="renderAuto">auto</label>

  <input type="radio" name="imageRender" id="renderPixelated" value="pixelated" />
  <label for="renderPixelated">pixelated</label>

  <input type="radio" name="imageRender" id="renderCrisp" value="crisp-edges" />
  <label for="renderCrisp">crisp edges</label>

  <input type="radio" name="imageRender" id="optimizeContrast" value="-webkit-optimize-contrast" />
  <label for="optimizeContrast">-webkit-optimize-contrast</label>

</form>

<img class="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/pixel-art-small.png" alt="" />

Original image:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/pixel-art-small.png" alt="" />

.image {
  width: 600px;
  image-rendering: auto;
}

.crisp-edges {
  image-rendering: crisp-edges;
}

.pixelated {
  image-rendering: pixelated;
}

.-webkit-optimize-contrast {
  image-rendering: -webkit-optimize-contrast;
}

input {
  margin-bottom: 20px;
}

label {
  margin-right: 10px;
  padding: 20px 0;
  display: inline-block;
}

input + label {
  cursor: pointer;
}

body {
  padding: 10px 10px;
}

var image = document.querySelector(".image"),
  form = document.querySelector("form");

function removeClasses() {
  image.className = "image";
}

form.addEventListener("change", function (e) {
  var render = e.target.value;
  removeClasses();
  image.classList.add(render);
});