I just changed my avatar on SE, and noticed that it's quite blurry in answer boxes:
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.)
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.
And for reference, here's the original image downscaled to 64px with cubic interpolation, and the original image sized with the
width attribute of
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.)