4

I just changed my avatar on SE, and noticed that it's quite blurry in answer boxes:

from answer @2x

I opened the image in a new tab, and it looked a lot nicer. (It also looks like this on my non-Retina external display.)

from answer @1x

It looks like it's just downscaling to 32x32, and then upscaling again on Retina devices. This happens in both Firefox and Safari.

It looks far better on the top bar, even though it's (supposedly) a smaller image. My guess is that it's displaying at native resolution.

from top bar @2x

And for reference, here's the original image downscaled to 64px with cubic interpolation, and the original image sized with the width attribute of <img>.

original 64px

One solution to this, at least on Mac, is providing a 64x64 image, but telling the browser to size it 32x32. The browser will figure it out and display at native resolution. I used this for the high-resolution image above.

(Note: These were all upscaled to 256px using nearest-neighbor interpolation. This shouldn't affect what they look like, it just makes them easier to see. The top-bar image is 288px instead, since otherwise it wouldn't have been integer scaling.)

(I am using SE/Imgur-hosted images, not Gravatar.)

  • 1
    It seems like a bug in your web browser or operating system, because I use Edge on Windows with a high DPI setting and it looks just fine. – Sonic the Anonymous Hedgehog Oct 15 '18 at 18:09
  • 1
    It's not the browser, because it's happening in Safari as well. It might have something to do with the way OS X handles DPI scaling: apps that don't support Retina displays will think they're running at half the real resolution, then everything gets upscaled (and standard controls get rendered at native resolution!). But Firefox is displaying Retina images just fine, as evidenced by the last image -- the website isn't providing a big enough image in the profile box. – SilverWolf Oct 15 '18 at 18:12

You must log in to answer this question.

Browse other questions tagged .