Getting Web Browsers Not To Blur Images on Retina Screens

Unfortunately this must be set by site, but on retina screens on MacOS, many browsers blur small images, such as 88×31 buttons.

You can overcome this, at least for the images on your site, by adding this CSS to your site:

img, div {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

You should add any element that might have a CSS background image property to that selector. In this case I have added <div> because I have many divs with background images on this site.

This tip is from https://stackoverflow.com/questions/31908444/fix-for-blurry-images-on-browsers-used-by-a-mac-retina