Skip to content

Instantly share code, notes, and snippets.

@leonardfischer
Created June 28, 2017 12:28
Show Gist options
  • Save leonardfischer/0641e69c6c0287534d0f85a572d1a64d to your computer and use it in GitHub Desktop.
Save leonardfischer/0641e69c6c0287534d0f85a572d1a64d to your computer and use it in GitHub Desktop.
CSS class for disabling browser from blurring images when scaled
/* See https://stackoverflow.com/questions/14068103/disable-antialising-when-scaling-images */
img.pixelperfect,
.pixelperfect img {
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering: pixelated; /* Chrome */
image-rendering: optimize-contrast; /* CSS3 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment