The Shape of Everything
A website mostly about Mac stuff, written by Gus Mueller
» Acorn
» Retrobatch
» Twitter
» Micro.blog
» Mastodon
» Instagram
» Github
» Maybe Pizza?
» Archives
» Feed
» Micro feed
April 29, 2020

I recently received a support question that basically went like this:

Why are screenshots pasted into Acorn twice the size as those pasted into Keynote? A screenshot on my MacBook Pro at 1000x500 becomes a 2000x1000 image in Acorn. If I paste that same captured image into Keynote, it comes in at 1000x500.

The screenshot is being taken on a @2x Retina display. These modern displays will show 4 pixels for every 1 square point on the screen. We call them @2x displays because the pixel count is twice as wide and twice as tall for the images being displayed. But really the pixel count went up 4x because we doubled in two directions.

So the display is cramming way more pixels into the same space, so the DPI (aka "resolution") of the is increased to make up for this. For @1x displays DPI has traditionally been 72, but on @2x displays it is 144. And when the screenshot is taken on a @2x display, a DPI value of 144 is added to the metadata of the image.

Acorn is a bitmap image editor and it will always show pixels at a 1 to 1 ratio to the screen pixels. This is standard behavior for every modern image editor when viewing your image unscaled. You can of course change the DPI of an image Acorn, which will be written to the image file when you save it. But when editing one image pixel is matched to one screen pixel.

Back to Keynote. When you paste an image into Keynote it'll read the DPI of the image before figuring out how much room the image should take up. Keynote will then scale the bounds of the image depending on what the DPI is set to. So a 1000px wide image from an @2x display will show up 500pts across. A 1000px wide image from a @1x display will show up 1000pts across.

You can do some fun tricks with this knowledge.

Take a @2x screenshot and paste it into a new image in Acorn. Open up Image ▸ Resize Image sheet and change the dpi to 72. Then copy and paste the image into Keynote. It's twice as big now. Go back to Acorn and change the dpi to 36, and repeat. It's @4x now! Go back one more time and change the DPI to 288. Now the image is @.5x now.

The number of pixels in the image never changed, but the way Keynote treated the image did. (TextEdit will also look at the DPI when figuring out how to show it).