Photoshop and Mac Retina Display

This is a very confusing topic, and it’s getting more confusing because a lot of the info on the web is out of date by many years.

For print, it should be much simpler now. Photoshop added the View > Actual Size command, and if you choose that, your Photoshop rulers (and document size) should match a real world print.

For web, mobile, and video, Actual Size doesn’t work because it has to refer to the document ppi resolution, which doesn’t apply to web/mobile/video. And 100% magnification doesn’t work well for web design on Retina displays, because 100% means one display pixel to one screen pixel (in any photo editor, not just Photoshop). That is not how web browsers and mobile device screens work; they show 100% image size at one image pixel equals one device independent pixel, which is 2x on a Mac Retina (or Windows HiDPI) display. In other words, if you upload your 450 x 156 px banner to a web browser on a Mac Retina display, take a screen shot, and measure the banner in the screen shot, it will say it’s 900 x 312 px (2x what you expected), due to the web browser enlarging the image 200% to compensate for the Retina display’s double pixel density.

If you are designing for web/mobile and want to see an “actual size” magnification in Photoshop, using 200% magnification works well (choose View > 200%), and you can map a keyboard shortcut to it (such as Command-1). That does the same thing the web browser does: Blow up the image 200% to compensate for the 2x pixel density of a Retina/HiDPI display.

What is incorrect about it?

Photoshop 100% zoom is not a physical size but means 1 image pixel mapped onto 1 screen pixel. That is it.

Many browsers scale the image on retina screens (i.e. use 4 screen pixels to represent 1 image pixel). If you want to simulate that, just use 200% zoom.

Dave