<p>The issue is the difference between pixel and point sizes. On macOS and other Apple platforms, the user interface is measured in points, which don’t necessarily map one-to-one to pixels; on a Retina screen like the one you’re using, 1 point is 2 pixels. Since there’s no way for the system to know whether your image’s scale is the same as the screen’s, it’s assuming that each pixel in your larger image is meant to be one point.</p>

<p>One way to resolve this would be to explicitly set the <a href="https://developer.apple.com/documentation/appkit/nsimage/1519987-size" rel="nofollow noreferrer"><code>size</code></a> property on your NSImage to the point size your image is supposed to be drawn at, i.e. 19×19; you’d have to handle loading different images for 1x and 2x screens on your own, though, which is inconvenient. A better way would be to use an <a href="https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/AddingImages.html" rel="nofollow noreferrer">asset catalog</a> in your project, which will let you specify assets for 1x and 2x screens and allow you to load the appropriate image by name.</p>

<p>As Simon F pointed out, future questions in this vein probably belong on <a href="https://stackoverflow.com">Stack Overflow</a>—it’s more about API usage than graphics concepts.</p>

CC BY-SA 4.0
2018-11-02T14:56:02.850Z
thats a good note and clear explanation, Noah. thanks for this.
mirageglobe
CC BY-SA 4.0
2018-11-01T20:54:22.970Z
2018-11-01T20:54:22.970Z
Noah Witherspoon
<p>Wonder if anyone has experienced this. When generating png image icons for macos. its recommended at 19x19 pixels. However, based on that, the icon (shield) that is generated is pixellated compared with the next in line. I have tried using 38x38, which effectively doubles the pixels. It looks much finer in preview but when attached, it because a large icon cropped off the bottom. Are there are specifics to generating a retina compatible icon for mac status bar?</p>

<p><a href="https://i.sstatic.net/658Ge.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/658Ge.png" alt="screenshot of menu bar"></a></p>

CC BY-SA 4.0
2018-10-30T08:23:47.043Z
Sounds like a UI programming question
Simon F
CC BY-SA 4.0
2018-10-30T17:21:12.067Z
hmm I did think it was but the issue is more on resolution of the image?
mirageglobe
<image-processing>
Resolution issue of generating a PNG icon for macOS menu bar
mirageglobe
# Resolution issue of generating a PNG icon for macOS menu bar

(Asked by: username_0 on 2018-10-29)

Wonder if anyone has experienced this. When generating png image icons for macos. its recommended at 19x19 pixels. However, based on that, the icon (shield) that is generated is pixellated compared with the next in line. I have tried using 38x38, which effectively doubles the pixels. It looks much finer in preview but when attached, it because a large icon cropped off the bottom. Are there are specifics to generating a retina compatible icon for mac status bar?

[![screenshot of menu bar](https://i.sstatic.net/658Ge.png)](https://i.sstatic.net/658Ge.png)

**Tags:** image-processing

> **Comments:**
> **username_1**: Sounds like a UI programming question  
> **username_0**: hmm I did think it was but the issue is more on resolution of the image?  

---

## 1 answers

### Answer by username_2 on 2018-11-01. Score: 4 | Accepted answer

The issue is the difference between pixel and point sizes. On macOS and other Apple platforms, the user interface is measured in points, which don’t necessarily map one-to-one to pixels; on a Retina screen like the one you’re using, 1 point is 2 pixels. Since there’s no way for the system to know whether your image’s scale is the same as the screen’s, it’s assuming that each pixel in your larger image is meant to be one point.

One way to resolve this would be to explicitly set the [`size`](https://developer.apple.com/documentation/appkit/nsimage/1519987-size) property on your NSImage to the point size your image is supposed to be drawn at, i.e. 19×19; you’d have to handle loading different images for 1x and 2x screens on your own, though, which is inconvenient. A better way would be to use an [asset catalog](https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/AddingImages.html) in your project, which will let you specify assets for 1x and 2x screens and allow you to load the appropriate image by name.

As username_1 F pointed out, future questions in this vein probably belong on [Stack Overflow](https://stackoverflow.com)—it’s more about API usage than graphics concepts.

> **Comments:**
> **username_0**: thats a good note and clear explanation, username_2. thanks for this.  

---

