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?

Here's a similar question. http://stackoverflow.com/questions/8597081/how-to-stretch-images-with-no-antialiasing/ — atw13, Apr 03 '13 at 18:19
How pixel-based enlargement is calculated depends on the algorithm chosen. If you interpolate the value of a pixel as an average color between original pixels, you get blur. If you set it equal to the closest original pixels, you get big squares of color. — kainaw, Apr 03 '13 at 18:19

MicronXD · Accepted Answer · 2013-04-03T18:26:04.273

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) */

score 1 · Answer 2 · edited Apr 28 '23 at 22:36

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 larger 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 shows what I'm trying to explain:

Thumbnail Image size: 320x215
Actual Image size: 640x429

This example allows you to zoom without blurring.

Don't blur images when magnified

2 Answers2