How to prevent Chrome from blurring small images when zoomed in?

By sahibjot | Latest Topics

Why images are blurry on some screens?

For website, using pixel perfect images are as important as having good content and good SEO. But after introduction of retina screens, it has been difficult to maintain the image quality on the website.

Same image on standard looks pixel perfect and on a retina screen it looks blurry.

The reason behind that is:

Apple's retina screens have decoupled the actual pixels of the screen from the pixel dimensions of the image.

Prior to retina screens, an image loaded in a web browser that was 100px x 100px would take up exactly 100x100 screen pixels.

Retina screens (which is just Apple's term for super-high-resolution screens) had a problem where if they rendered images and text at 'actual pixel size' everything would be way too small to be legible. As such, retina screens attempt to render content at the same size as non-retina screens, but use more pixels to do so.

So for easy math, let's say a retina screen is twice the resolution of a standard screen.

If you create a 100x100 image and view it on a normal screen, it will look sharp as each image pixel uses one screen pixel.

On a retina screen, however, that 100x100 image will take up 200x200 screen pixels. The browser translates the 100 virtual pixels into 200 real pixels. To do so, it has to make up all the missing pixels via interpolation which causes the blur you see.

No more blurry images

Use the following different methods to prevent images from getting blurry. There are various methods that we can implement. Try these and see which one works for you.

1. The first fix is to make your images 200x200 actual pixels, then size them in your HTML or code to render at 100x100 pixels.
On a normal screen, it will look the same. The extra pixels are just thrown away. But on a retina screen, it will now look sharp as each image pixel is now using one screen pixel.

2. Add following CSS in your website to render sharp images

.sharp {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;

Add "sharp" class in your <img> tag and see the difference among your normal images.

Above solutions are tried and tested and have been implemented by thousands of web designers. It has been working well for them. Try it and let us know if it worked for you.


Leave a Comment:

(1) comment

Umang yadav February 19, 2019

This helped me alot ….thanks for giving a solution

Add Your Reply

Leave a Comment: