Recently the retina MacBook Pro was released at WWDC 2012. It has a resolution of 2880 by 1800. This makes websites look really bad if they haven't been optimized for the new high-res display, as noted by Marco Arment. What are some thing I need to do to optimize my website for retina displays?

  • For one, make sure you are drawing the objects on a scale-based system (not pixel-based). It should be the same ratio for small/large browser resolutions. Images... include decent-resolution images. You could get fancy and display versions of the site based on the resolution (it can be detected using JS: pageresource.com/jscript/jscreen.htm)
    – ionFish
    Commented Jul 19, 2012 at 3:28

1 Answer 1


You'll need to mix high resolution graphics, css and things like @font-face, obviously if you create a website specifically for retina displays it will create a lot of data to download with larger images etc, but what you can do is using CSS create optimised verstions for retina and non-retina visitors.

There are some great tutorials online including these:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.