Image interpolation mode in Chrome/Safari?

Deniz Zoeteman picture Deniz Zoeteman · Mar 23, 2011 · Viewed 18.8k times · Source

I need to have an image render with nearest-neighbor resizing and not the bicubic way that is currently used. I currently use the following:

ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;

This works in IE and Firefox, but not in Chrome and Safari. Are there any webkit alternatives or any other way to achieve this effect?

Answer

thirtydot picture thirtydot · Mar 23, 2011

Edit: It's now possible with image-rendering: -webkit-optimize-contrast;.

https://developer.mozilla.org/en-US/docs/CSS/image-rendering#Examples

This doesn't work in current versions of Chrome, here are some useful links:


I didn't think there was a way.

And some quick Googling all but confirms it; the top Google result for webkit image interpolation is:

http://code.google.com/p/chromium/issues/detail?id=1502

Reported in September 2008, and still not resolved.

Also: https://bugs.webkit.org/show_bug.cgi?id=40881


If I needed this, I'd probably write a PHP script to dynamically scale images up using nearest neighbour.

This will work in every browser, but then you have all that extra processing and transfer overhead.