How to Disable Image Smoothing in Modern Web Browsers
There used to be a time when images that were resized would retain their sharp edges, but several years ago web browsers began implementing image smoothing. I’ve always enjoyed being able to look more closely at the details in drawings online, but the experience is hampered when the pixels are blurred.
I’ve been looking for a way to eliminate this blurring effect that now commonly occurs when one zooms into images. Below is a comparison image, along with CSS that should work across all browsers to maintain crisp edges when images are scaled or the page is zoomed:
img { image-rendering: optimizeSpeed; /* FUCK 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: optimize-contrast; /* CSS3 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */}
This post is dedicated to Dragan Espenschied and Tom Moody.
This is real motherfucking shit.
