Explore related tutorials & articles
30
Replies
When I view at 200% the dimensions are correct
By 7billionbuddhas
The dimensions aren't actually "correct" - they just agree with the automatic scaling to 200% that all web browsers and consumer-grade photo viewers do when they detect a high density display. This uses four screen pixels to display one image pixel.
This automatic scaling is the industry standard workaround to ensure that the same material can be used regardless of what screen technology the user happens to have. Without this scaling, we'd need two separate internets.
Photoshop can't do any automatic scaling - it's used for a whole lot of other purposes than web. But you can call that scaling if you want to see it the same way as web browsers/photo viewers display it.
As I'm sure you know, a digital image doesn't have a "size". It only has pixels. The correct way to display an image is one image pixel represented by exactly one physical screen pixel.
I'm reposting the screenshot I posted earlier in this thread:
FWIW, I'm ancient, I started my career with Photoshop 5.0. I understand pixels and screen resolutions etc.
By 7billionbuddhas
I'm ancient too…and that’s part of the problem. A perfect understanding of how pixels and screen resolutions worked in 1998 (the year Photoshop 5 was released) does not account for how that all changed after 2012, when Retina/HiDPI display settings doubled pixel density much closer to what it is for print. How resolution worked on screen had to be changed so that increasing screen resolutions would not make everything too tiny to read. The concept of the scale factor was introduced. Legacy displays were 1x, current Retina/HiDPI desktop displays are 2x, some phones are 3x.
With the scale factor, size can be kept constant as display resolutions change. If we have an image of 300 x 200 px designed for a 1x display, but we want that to appear the same size on a display with 2x pixel density, the math is easy, the pixel dimensions have to be 2x: 600 x 400 px at 2x pixel density appears the same size as 300 x 200 px at 1x.
This is not an exotic concept. It works the same familiar way that print has for decades, where we know a 4-inch-wide image doesn’t get tinier when you increase the print DPI. The image stays the same constant 4 inches wide, but can reproduce more detail due to the increased pixel density.
Note: The reason this is not a Photoshop bug is that it has nothing to do with Photoshop. For example, if someone gets angry enough at Photoshop about this that, in protest, they switch to any other photo editing application by any other company, they are going to find that all other photo editors on macOS, Windows, etc. handle 1:1 view magnification the same way as Photoshop. There will be no escape from having to understand how resolution really works today.
I want to see the image clearly at it's correct dimensions. How is this done? Is this a MacOS setting or a PS setting?
By 7billionbuddhas
This is made harder for us users because the Photoshop commands 100%, Actual Size, and Print Size do not mean the same thing and can be media specific, and lots of people get confused about that.
The answer to your question depends on what media you are delivering images for, because that defines what “correct dimensions” are. Do you mean:
Size in a web browser. In Photoshop, choose View > 200%. (I assigned a keyboard shortcut to this command.) Why: On Retina/HiDPI displays, web browsers default to showing images at 2x their native pixel width and height, so to match web browsers you must also view at 2x in Photoshop. This is because of the 2x pixel density of Retina/HiDPI displays. If web browsers displayed images at 1x, most images would appear 50% too small on Retina/HiDPI displays. Web browsers don’t have to do this 2x hack for web sites with code that properly detects screen pixel density and can show an image with the appropriate number of pixels, such as a 300 x 200 px image for a 1x display and a 600 x 400 px image that takes full advantage of the detail that a 2x Retina/HiDPI display can show. As in print, both images would appear to be the same size, only the pixel density changes.
People continue to deny that web browsers do this, but it’s easy to prove: Create a 300 x 200 px image, and open it in a web browser on a Retina/HiDPI screen. Take a screen shot of that and measure the dimensions of the graphic in the screen shot. It’s probably going to be 600 x 400 px, or 2x the actual image dimensions in pixels…because the web browser scaled it up 2x.
Size in print. In Photoshop, choose View > Actual Size. Why: This is an up-to-date command where Photoshop queries the OS and display hardware to figure out the PPI value of the screen, and uses that to correct the display so that 1 inch on the on-screen ruler lines up with a real ruler held up to the screen. (However, some have noticed that on some computer/display combinations this is slightly off, but it’s close.) You can also use View > Print Size, but that’s a much older command that is harder to work with because you have to pre-enter the resolutions yourself, or use the script that Stephen Marsh posted earlier in this thread.
Important: View > Actual Size must not be used to match actual size in any form of on-screen design. The feature is coded for the actual size of print only, where dimensions are inches/cm, not pixels. So the way Adobe worded the Actual Size and Print Size commands is confusing.
Size in a video editor. No special action needed. Video editors work the same way as Photoshop: At 100%, one image pixel is mapped to one screen pixel, so 100% in Photoshop should equal 100% in a video editor no matter what display you’re on.
My solution is to continue to create artboards at 144dpi
By 7billionbuddhas
That's irrelevant in this context. The ppi value isn't used on screen. It could be 1 ppi or 1000 ppi and it would display identically.
Pixels per inch, ppi (not dpi!) is a simple formula to translate pixels to a physical size where that's needed. It's not needed on screen. It's needed for print, and a few other things that involve physical units like font sizes. But not screen.
Do not upsize your images. The browser will do it atomatically anyway. If you send 2x, it will ultimately display as 4x.
There are ways to code websites to allow for high resolution images to display at native size on high resolution displays - in other words, they are coded to override the automatic scaling. But that's not something you can rely on.
AdChoices