I never used Chrome before but after upgrading my MacOS, I started trying Chrome. I created my personal blog using Hugo. The thing is, when I viewed my site using Chrome on my Mac, all images are so blurry. I tried again on Safari, things were fine; I tried it in Chrome on a Windowns PC, things were also fine.
While I was scratching my head, I came across this answer by pastullo on Stackexchange.
The fix was really simple: I only added this following single line of CSS in my style sheet, as pastullo suggested:
body {
image-rendering: -webkit-optimize-contrast;
}
This fix literally saved my day. Thanks Stackexchange.
From below you can see the change.
Before
After
Last modified on 2021-10-05