It seems to me that browsers (Chrome, Safari, Firefox) on my retina Macbook Pro do not render any pictures at native pixel density. For example, when I open an image from google images and then download that same image and open it in preview, that same image is smaller and more dense in Preview than it is in my browser. This seems to suggest that there is a discrepancy in pixel scaling between the two applications. Can this be fixed for the browser?


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.

  • but on chrome everything looks ok, on all other browsers it looks blurry – JOKe Sep 13 '18 at 11:31

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .