Don't blur images when magnified

Question

This is not a answer which will get one right answer, but I'll ask it anyways:

Is it possible to maginify or enlarge an image so that it does not blur?

For example this should not happen, the pixels should not blur into each other, but should magnify with enlarged block pixels. Is there something like maginification: block; or anything like that in CSS or HTML or maybe a JS polyfill?

Answer 1

image-rendering: pixelated;

But it's not supported yet:

https://developer.mozilla.org/en-US/docs/CSS/image-rendering#Browser_compatibility

these currently work, but only for downscaling:

    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

Answer 2

It depends on the resolution of the image. If you enlarge the image more than what the resolution is, it will blur. One workaround is to use a very large image, but display it as a smaller image. So when you zoom in, it maintains it's quality (up to a point). This jQuery demo show's what I'm trying to explain:

http://webdesignfan.com/demos/imagezoom.html - image display size: 640x511

http://webdesignfan.com/demos/image.jpg - actual image size: 1712x1368

This example allows you to zoom by over 2.5 times without blurring.

Hope this helps. Thanks.