CSS Zoom Not Blurry But Pixelated

CSS zoom not blurry but pixelated

You cannot (currently) use upscaling and specify that the browser should use nearest-neighbor zooming, neither with HTML images, upsized HTML5 canvases, using drawImage() on a canvas to draw the image larger, nor zooming up images on SVG.

Here's a solution (written for this related question) showing how to 'zoom' an image using nearest-neighbor pixelation by re-creating the image as rectangles in SVG: http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml

Here's another solution showing how to achieve this same effect using HTML5 Canvas (drawing rectangles on the canvas for the zoom):

http://phrogz.net/tmp/canvas_image_zoom.html

Why does this image get sharper after you click the zoom in button but blurrier on the default zoom.

The image gets sharper when you zoom in because the image takes up more pixels. The image gets more blurry when you zoom out because it takes up less pixels.

You can make the image sharper by:

1. Make the image file bigger.
   Open the image up in Photoshop or Paint.net and extend the image.

2. In HTML, make the image smaller then the actual dimensions.
   For example, if you saved the image as 1000px by 1000px, make the html like this:

   <img src="image.png" width="500" height="500" />

   As you can see, in the HTML I embeded the image with only half of its actual size. This means that the image will be forced to compress and maintain the high quality.

Don't blur images when magnified

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

How to fix blurry Image on transform scale

Try this, it's work fine for me!

img {
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
    transform: translateZ(0);
}

Blurry downscaled images in Chrome

I found the exact same issue on Mac: Firefox downscales the image really well, while Chrome makes it look blurry, which is very bad.
I couldn't care less about rendering time or speed, I need the logo to look GOOD!

I found the following CSS rule fixing Chrome for Mac

image-rendering: -webkit-optimize-contrast;

---

Related Topics