As far as I know, web browsers display images at 96 PPI.
And at least on my Mac, the screenshots created using the Screen Capture app are 144 PPI.
So, if I created a screenshot on my Mac and I want to upload it somewhere so that people will see it in the same size in which I see it on my Mac, I need to resize it at 66.6%:
[aside] Why 66.6? Here are my calculations: (96 / 144) * 100 = 66.6… Be aware that I’m not strong in math at all.
[aside] Here I use ImageMagick. The easiest way to install ImageMagick on Mac is brew install imagemagick
But in fact resize66dot6.png, if opened in a web browser (at least in Safari), is larger than it should be.
And to make the screenshot to be displayed in web browsers in the correct size, it seems I need to resize it to 50% or something very close, for some reason:
magick original.png -resize 50.0% resize50.png
From top to bottom: original.png, resize66dot6.png, resize50.png, and the actual UI element:
What you’re seeing is that you have a Retina screen, so macOS is doubling the pixel density of the UI. When you take a screenshot, it captures all of those pixels. The browser renders images to be as wide as they would look on a non-retina screen of the same size, so each pixel takes up twice as much width as the macOS UI pixels.
PPI/physical screen size/resolution don’t matter, just that macOS pixel density is 2x retina. If it were 3x, the screenshot in browser would look 3x as wide as the macOS UI.
Hello. Well, thank you. But what I still don’t understand:
Do I need to resize screenshots before uploading so that other Mac users see them at the correct size?
Do I need to resize screenshots before uploading so that other non-Mac users see them at the correct size?
If the answer to any of the first two questions is “yes”, then what percentage should I change them to: 50% or 66.6% or another, and what are underlying calculations?
I personally wouldn’t worry about that; I think people are used to seeing blown-up screenshots. Plus, as you can see in your screenshot, when you reduce the width it looks blurry compared to the retina UI; I don’t think that is helpful.
But if you were to resize, you’d resize to 50%, and the only calculation is that you screenshotted a 2x retina screen so would halve the width to compensate for the resolution being double.
No and no. No such thing as a “correct size” exists in the visual screen-viewing world. Folks can magnify or shrink images to their heart’s content. Let alone that they view on a screen with 72 ppi versus 96 ppi or other resolution. When your aim is to assure a one-to-one calibration of a certain physical dimension on your screen to be viewed at the same size on someone else’s screen, you should include a calibration bar on your image, for example as below.
You only need to resize screenshots when you want to reduce the time needed for a browser to upload your image from the storage location and for the user’s computer to display it (render it) on their screen.
Thanks, cornchip! But is there a reference for this 2x? I do see it is briefly mentioned here: https://developer.apple.com/design/human-interface-guidelines/images, but maybe you know a more elaborative source? Something like an article or technical specification that clearly says something like “for Retina screens, images must 2x larger, because <…>”.
You can find a list from Apple here of all retina iPad and iPhone displays. Note that for each display they list the display’s points (“pts”) followed by the actual physical resolution in pixels (“px”) and whether that is 2x, or 3x. Note that for 2x, the number of pixels is double the number of points, while in 3x the number of pixels is 3 times the number of points. Apple uses points to specify object size on screen. depending on the specific hardware of the device, those points are translated to actual pixels on screen based on whether the device is a 1x, 2x or 3x display. In their marketing materials, Apple seems to list their 2x displays as “retina” and their 3x displays as “super retina.” Of course, as noted in the page you linked to, Macs have only ever supported 1x and 2x, but not 3x. Therefore, all retina Macs use 2x.
Of course, the points system is used for Apple development (building native apps) not web development. In a quick search, I found this page, which explains how to translate that to web pages and ensure that 1x, 2x and 3x images render at the same size. In short, for a 1x image, display the image at full size, for a 2x image, display it at half size (set the display width to half of the pixel width via CSS), and for a 3x image, display it at a third size.
In the above example, the filenames indicate the actual pixel size of each image for illustrative purposes. Note that there is no need to edit the image. Just set the width that the browser is to render the image at.
This really is the “solution” - there is no solution - like @DrJJWMac has explained so nicely:
There is no way to create an image that is being displayed “in the correct size” on a screen. Images will be displayed differently depending on the screen, depending on the app and whatever else. If you want to control the look of an image in a browser, you need to control the website where the image is being displayed. This is where CSS comes into play. And even with CSS: you still may be surprised… The 1x, 2x or 3x dance feels weird to me these days. That was a “hack” when the first “retina screens” entered the stage. Nowadays there are so many different screens from Apple and everybody else… Today it is all about vector images for logos instead of this hack and for raster images stuff like responsive webdesign (fluid, fixed, elastic), breakpoints, media queries, and … and …
But the OP also asked for more explanation and the article I linked to is a good, brief, backgrounder. It may be old (2017) but some folks have been struggling to understand retina Mac screens since Apple’s first in 2012:
These two are saying the same thing. There is no standard for “HiDPI” across all platforms and applications. Heck, try copying text between different Microsoft applications and they won’t even come out the same size. Even font size is not rooted in any physical world any more.
