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?
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+ */
}