6

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?

aNewStart847
  • 1,066
  • 7
  • 15
  • The term you're looking for is anti-alias. – MicronXD Apr 03 '13 at 18:18
  • 2
    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

2 Answers2

10
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) */
MicronXD
  • 2,128
  • 16
  • 24
1

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.

Developer Esparza
  • 13
  • 2