Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Question

I have an image that is 100x100 in pixels. I want to show it twice the size, so 200x200 and I want to do it by CSS and (explicitly) not by the server.

Since a few years, images get anti-aliased by all browsers instead of doing a by-pixel scale.

Mozilla allows to specify the algorithm: image-rendering: -moz-crisp-edges; So does IE: -ms-interpolation-mode: nearest-neighbor;

Any known webkit alternative?

Answer 1

WebKit now supports the CSS directive:

image-rendering:-webkit-optimize-contrast; 

You can see it working in action using Chrome and the last image on this page:
http://phrogz.net/tmp/canvas_image_zoom.html

The rules used on that page are:

.pixelated {   image-rendering:optimizeSpeed;             /* Legal fallback */   image-rendering:-moz-crisp-edges;          /* Firefox        */   image-rendering:-o-crisp-edges;            /* Opera          */   image-rendering:-webkit-optimize-contrast; /* Safari         */   image-rendering:optimize-contrast;         /* CSS3 Proposed  */   image-rendering:crisp-edges;               /* CSS4 Proposed  */   image-rendering:pixelated;                 /* CSS4 Proposed  */   -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */ }