I design detailed maps which are posted on my website, and I’m noticing that, at least on my machine, the maps display crisp and sharp on Firefox but are slightly blurry on Chrome. This isn’t the issue people talk about with Chrome being blurry in general, because it’s just the images. Surrounding text is sharp on both browsers.
I suspect this is about display scaling on Windows 10 for higher-resolution screens (i.e. it scales things up so they’re not too small on the screen), but I’ve already taken that into account by uploading 200%-sized images and scaling them down in the browser – this solved the problem in Firefox, but for some reason Chrome is still doing it.
Now, I realize there may be some setting in Chrome that would fix this, but that’s not what I’m after. I need to know, as a web designer, what I can do about this so that other people with Chrome and Windows 10 and high-resolution screens (a.k.a. the majority of desktop users) won’t see my maps as blurry. I’ve of course tried Googling this, but it’s very hard to find the right search terms, and what I’ve found mostly suggests things I’ve already done.
Any ideas? Screenshots below – I realize the difference is a little subtle, but I think as picky designers a lot of you will understand. 😉 In case anyone wants to see the code, here’s the link that the screenshots below were taken from.
P.S. Please try not to laugh at the overall design of the website, which started out as a Blogspot blog – I know it needs a major makeover. :-p
Screenshot from Firefox
Screenshot from Chrome