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?

Duplicate of http://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges — Sprintstar, Jul 04 '12 at 09:44

score 15 · Accepted Answer · edited May 23 '17 at 12:25

15

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

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:

Reported in September 2008, and still not resolved.

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.

edited May 23 '17 at 12:25

Community

answered Mar 23 '11 at 10:47

thirtydot

I've seen somewhere that it was possible in HTML5 by putting canvases over the image or something along the lines of this? – Deniz Zoeteman Mar 23 '11 at 10:51
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 `` with a ` – thirtydot Mar 23 '11 at 10:56
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. – Deniz Zoeteman Mar 23 '11 at 11:03
The way I imagined it: ``. Or you could make a nicer URL with the help of `.htaccess`: ``, or similar. – thirtydot Mar 23 '11 at 11:15
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: http://craffy.gdscei.com/ppic.php – Deniz Zoeteman Mar 23 '11 at 11:30
Take a look at the source code of that page. You're appending and prepending HTML. – thirtydot Mar 23 '11 at 11:33
1

I'm glad you got it sorted. If that script will be used a lot, you should consider caching the generated images. – thirtydot Mar 23 '11 at 11:40

Omiod · Answer 2 · 2014-10-07T19:49:21.797

7

I've just tried this:

img {image-rendering: pixelated;}

And it works great on Chrome 39.0.2145.4 dev-m

edited Oct 07 '14 at 19:49

answered Sep 07 '14 at 08:02

Omiod

score 0 · Answer 3 · answered May 04 '21 at 07:16

0

You can now set the algorithm used when doing drawImage

   ctx.imageSmoothingQuality = "high"

answered May 04 '21 at 07:16

Tom Larkworthy

3 Answers3