Is it somehow possible to enlarge an img-element, so that it still looks “pixelated”? As you can see in this sample ( http://jsfiddle.net/4qgSc/ ) all browsers I’ve tested use some “smoothing”-effect. Redrawing it in a canvas is not a possible solution, since i want to animate the enlargement.
Edit:
For now using a class with the following properties:
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
achvies the closes result. It works in all browsers except Chrome (16.0.912.75 m).
I think what you’re looking for is the CSS image rendering property.
http://jsfiddle.net/alpacalips/4qgSc/5/