Blurry reaction icons

[Vikestart]

The reaction icons are a bit blurry. It's quite off-putting actually >_>

I'm using the newest version of Chrome.

[Morrigan]

They look clear to me. Are you talking about here or on your own site.

The actual image is this here:

[Jed Rosenzweig]

Blurry in Chrome, fine in Safari.

[Vikestart]

22 minutes ago, Morrigan said:

They look clear to me. Are you talking about here or on your own site.

The actual image is this here:

They are a bit sharper when you mouse-over them, but blurry when not.

I think the issue lies with the chosen widts and heights.

Images become blurry if you don't downsize them to a value that is the original size divided by 2 or 4, etc.

The icon images are 120px right? So they are sharp as long as they are downsized to 60px or 30px, and not 20px or 35px, etc.

[Morrigan]

It looks not blurry to me. However I don't know if this will change overall as you can upload whatever size you want of an image. I think one of my reaction icons (when I uploaded it) was 512x512.

[Vikestart]

3 minutes ago, Morrigan said:

It looks not blurry to me. However I don't know if this will change overall as you can upload whatever size you want of an image. I think one of my reaction icons (when I uploaded it) was 512x512.

Here's a comparison:

Feels like I need to put on a pair of glasses

[Makoto]

Yes. They are blurry for me in Chrome too.

@Rikki there is a simple CSS trick to prevent blurring images like this when downscaling,

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }

Before:

After:

[Morrigan]

Mine shows up like number two no matter what. I am not using Chrome though.

[Vikestart]

1 minute ago, Makoto said:

Yes. They are blurry for me in Chrome too.

@Rikki there is a simple CSS trick to prevent blurring images like this when downscaling,

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }

Before:

After:

YES!

This solves it

[Makoto]

8 minutes ago, Morrigan said:

Mine shows up like number two no matter what. I am not using Chrome though.

Safari and other browsers might interpolate images differently by default. The Chrome specific adjustment in the sceenshot above is -webkit-optimize-contrast though; the others (for Firefox, Opera, and IE) may not be needed, or might even make them worse, so testing would be needed to be sure.

[Morrigan]

Yeah I tried it @Makoto (just to see) it causes things to pixelate in Firefox. I'll use the Chrome one for the massive amount of Chrome people out there.

[Makoto]

Yeah, I've never actually used the others either. They are completely different interpolation methods actually (nearest-neighbor I'm pretty sure would make images look worse in IE as well, it's a cheap but ugly interpolation method), so the optimize contrast tweak is probably the only one that should be used for Chrome.

Not sure why the others were listed in that example. I just quickly copy and pasted from memory ¯\_(ツ)_/¯

[Wonster]

Didn't had this problem before, i guess it's the latest google update

On Firefox, images are pretty clear

[Makoto]

17 minutes ago, amator said:

This is a problem with the last IPS update. before 4.1.19.4 downscaled images were not blurry 

 

It's not specific to any update. It's just how Chrome renders images.

Actually, the same CSS rule can improve quality when applied to avatars, gallery thumbnails, and so on. I have it as a universal CSS rule on img {} because I don't think Chrome's cheap image resampling techniques are necessary or worth the quality loss anywhere.

Safari appears to use higher quality downsampling by default. Other browsers probably do too. It's just something Chrome does to try and make things marginally faster, at the cost of quality.

It's just very noticeable with reaction images, because they are an extreme case. The original images are actually pretty huge and they are downscaled significantly. The more an image is downscaled, the more apparent the loss of quality is.

Ideally, you should always avoid needing to downscale images in the browser anyways, but that's not always practical (especially with responsive images). I have a PageSpeed filter on my server which tries to automatically scale images to match the browsers rendered dimensions to partially negate this requirement, but it's far from perfect.