The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions.

image-rendering.css

/*
Chrome appears to render pixelated images in the same way that Firefox and Safari will render images with crisp-edges.
Reference:
https://css-tricks.com/almanac/properties/i/image-rendering
https://developer.mozilla.org/en/docs/Web/CSS/image-rendering
*/

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  
  /* Global values */
  image-rendering: inherit;
  image-rendering: initial;
  image-rendering: unset;
}

img.cros-browser-best{
  /* Webkit color separated image looks best with pixelated, but others look best with auto. */
  image-rendering: pixelated;
  /* Opera */
  image-rendering: -o-crisp-edges;
  /* Best on Firefox and Safari, put this on bottom, webkit will ignore. */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* IE */
  -ms-interpolation-mode: nearest-neighbor;
}

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
  image-rendering: -moz-crisp-edges;         /* Firefox */
  image-rendering: -o-crisp-edges;           /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

.bicubic {
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
}
.nearest {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: optimizeSpeed;
}