How to Fix Blurry Images in Mac Chrome

Hongtao Hao / 2020-05-14


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 2020-08-09