How to prevent blur on image resize in Chrome?

Question

The images are really blurry if you use resize an image, for example showing a small image with resized dimensions, like;

<img src="largeimage.jpg" width=30 height=30 \>

Its not blurry in other browsers, but in Chrome, its so blurry. I have looked at in www.twitter.com , their new design has lots of resized images and somehow, they have managed to clear blur in resized images. I have tried these;

image-rendering: crisp-edges;
image-rendering: pixelated;

But unfortunately, it doesn't solve the problem.

Below is a comparison. On the left, you can see that it is quite blurry, compared to that on the right:

What is the correct way to do that ?

Answer 1

Have you tried this? :)

filter: blur(0);
-webkit-filter: blur(0);
transform: translateZ(0);
-webkit-transform: translateZ(0);

Answer 2

I've noticed that Chrome does a better job when you resize an image at a certain percentage. For example, if you resize a 375px image to 100, it gets blurry, but if you resize 200 to 100, it does a better job because it's a nice even 50% scale.

Without an editable test environment, I'm not sure if that would fix it for you, but it's worth a shot.