Image interpolation mode in Chrome/Safari?

Question

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?

Solution 1

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:

• http://vaughnroyko.com/state-of-nearest-neighbor-interpolation-in-canvas/
• Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

---

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.

Solution 2

I've just tried this:

img {image-rendering: pixelated;}

And it works great on Chrome 39.0.2145.4 dev-m

Comments

[Deniz Zoeteman]

I've seen somewhere that it was possible in HTML5 by putting canvases over the image or something along the lines of this?

[thirtydot]

I don't know anything about that. But even if that's true, it sure sounds like a lot of work to conditionally (if WebKit browser/Opera) use a canvas to render the image. You're also introducing a JavaScript dependency to switch out the <img> with a <canvas>.

[Deniz Zoeteman]

I'll check if my webhost has GD, if so I'll use that. Until I got confirmation of that I won't answer my own question.

[thirtydot]

The way I imagined it: <img src="upscale.php?image=the-image-filename.png&w=300&h=300" />. Or you could make a nicer URL with the help of .htaccess: <img src="the-image-filename.upscaled_300x300.png" />, or similar.

[Deniz Zoeteman]

This is the php i used: $srcp = imagecreatefrompng("test.png");$destp = imagecreate(150, 150);imagecopyresized($destp, $srcp, 0, 0, 0, 0, 150, 150, 8, 8);header('Content-type: image/png');imagepng($destp);, but the output is strange: craffy.gdscei.com/ppic.php

[thirtydot]

Take a look at the source code of that page. You're appending and prepending HTML.

[thirtydot]

I'm glad you got it sorted. If that script will be used a lot, you should consider caching the generated images.