Blurry downscaled images in Chrome

It seems that transform: translateZ(0); does not work anymore.
The only property I found which had any effect was image-rendering: -webkit-optimize-contrast; (note: this has a much different effect on iOS safari, where it makes the image very pixelated, so you'll only want to enable it on chrome and edge)

Here is a comparison using this image: <img src="https://i.stack.imgur.com/acaio.jpg" style="width: 244px; height: 244px;"> (on windows 10) And a close-up of the text on the sign: I think firefox's rendering is significantly better, but optimize-contrast does help.

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;

i find used transform: translateZ(0); is work.

by the similar question：How to prevent blur on image resize in Chrome?