Working With Screenshots Made on a Retina Display, DPI Problems


#1

Hi,
If I take a screenshot on my MacBook Pro, I get a rather large PNG.

When I drag and drop it into Omnigraffle, the program is smart enough (somehow) to know that I’m working with a screenshot from a high, retina resolution monitor. Other Mac applications have gotten pretty good at this too–maybe they pay attention to the PNG’s “144 pixels/inch” DPI.

Anyway–I do my mark ups of the image, I export a 72 dpi image, and I’m good to go… except that the image looks blurry. It looks blurry on both my MacBook’s display AND on a non-retina display.

HOWEVER, if I plug a non-retina monitor into my MacBook, and put the application on THAT screen, and take my screenshots, drop them into Omnigraffle, and do my markups, everything works much better. Sharp lines, image looks good everywhere.

I’d like to be able to take screenshots and work wherever I am, without an external monitor. Those screenshots must present the UI I’m doing a screenshot of sharply, whether the reader is using a retina display (or other ultra-high resolution tech, I think Retina is an Apple name?) or a more standard monitor.

Recommendations?
-D


#2

I wouldn’t think the screen shot would be dependent on the monitor use but could see how it would be. What version of ScreenShot are you using (under 10.13 and prior or 10.14 and up)? Does it make any difference if you are zoomed in (image takes up entire screen) or not (portion of the screen)? Just spit-balling here…


#3

Part of the problem is likely that the image is not placed pixel aligned on the OmniGraffle canvas. If you set your canvas units to pixels, then either turn on snap to grid with a grid that’ll always snap to pixel boundaries, or make sure it’s positioned correctly using the geometry inspector. That will improve the export clarity. The other part of blurriness will come from taking 144 dpi source and exporting to 72 dpi. You can check if OmniGraffle is giving worse results than you think it should be by resizing the 144 dpi image with Preview down to 72 (Tools > Adjust Size, make sure resample image is checked). If you want the export to look the same as the source, you’ll need to export at the same dpi.


#4

PPI or pixels per inch is a measure of how many pixels a screen can display in an inch!