Why do browsers not render pictures in native pixel density on retina display?

Solution 1:

This is intentional. Most websites aren't designed for retina displays and only have 1x assets. If these 1x assets were drawn at native resolution on a retina display, they would appear at one quarter the size (half the height, half the width). That would obviously be impractical: it would be like browsing the web with your browser's zoom level set to 25%.

To get around this, the browser simply draws everything at 2x (retina) by default and then upscales any 1x assets to match. This way, websites appear at the same physical size on a retina display as they do on a non-retina display.

Solution 2:

I think this is not a problem in the browsers themselves (at least it should not be a problem in Safari). The problem is lack of website support for HiDPI displays. I guess the majority of websites don't support Retina Displays yet. See Developing a responsive, Retina-friendly site for more info.

If non-retina-ready websites were rendered at Retina resolution, the images would look twice as small and the layout of the site would be broken (as non-image elements don't generally care about retina and thus would not scale).

See this Macrumors Forum thread for some websites that do support Retina Displays.