Blurry downscaled images in Chrome

html css google-chrome firefox gravatar
NoDisplayName picture NoDisplayName · Jun 19, 2016 · Viewed 37.2k times · Source

I am using gravatars and it's rather often when I downscale them with css, and I believe Google Chrome used to do it properly until recently ( I may be wrong, not sure when exactly the problem started to occur ) but now, images get blurred when downscaled, and that happens only in Chrome, FF downscales pretty good. I tried using image-rendering but it doesn't solve the problem. Can someone give me a hint what is the best way to go about it?

The example can be found here, open it in Chrome and then in FF, it should be way more blurred in Chrome than in FF.

Thank you

Answer

pastullo picture pastullo · Feb 14, 2017

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;

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Problem with absolute positioning in Firefox and Chrome

I don't understand why FF and Chrome render my page differently. Here's a screenie of it in firefox: firefox example http://grab.by/65Bn and here's one in chrome chrome: chrome example http://grab.by/65BB fieldset has a relative …

Read More
Line-height issue with firefox

I have a problem trying to make a search button looking fine on firefox. It's an input submit made with an iconic font, a white background and a border-radius like this: display: block; width: 60px; height: 60px; line-height: 60px !important; …

Read More