While working on the first version of Podium, a site that connects people with public talks happening in Toronto, we ran into some issues with retina displays. Specifically, some images weren't looking sharp.
This was due to the image being a specific size (eg. 24x24), but retina requiring one of higher resolution (specifically, twice as many pixels).
There are are multiple ways around this. One is to create a css rule that specifically targets retina displays, specifying an image with higher resolution. Another would be to include that image originally, and scale it down for non-retina based clients.
A problem I ran into this week was scaling down images in CSS with transparent PNGs.
If you have an image that is 48x48, with a white background, you can scale it down reliably to 24x24 for non-retina based clients.
However, if you have that same image with a transparent background, once you size it down using background-size, the pixels seem to dither. In short, the quality goes down.
I didn't know about this limitation, and presume it's related to browsers and their ability to resample/resize images dynamically which don't have a consistent background colour.
It was a surprise, so thought I'd write about it here. Heads up y'all!