Images in NSButton and NSImageView are blurry

Question

I am completely at a standstill here; I have a series of small images that I work with and paste into buttons:

And as you can see, they are all decently clear and sharp, and keep it when I open png files in Preview and what not.

However, when I use them in NSButtons and NSImageViews in Interface Builder, set the Scaling parameter to None:

Images become terribly blurry. What am I doing wrong? I do not know where to start and what to try; should I go back to the icons and try to make them perfect pixels? Is it due to smoothing or something like that?

---

EDIT: For some reason, it seems that NSButtons and NSImageViews are loading high-resolution versions of images, even if I am on a normal display, which can be determined by the small blue stroke that I added to them. For some reason, Quartz Debug does not identify them as high-resolution images and there is no red tint. Removing links to @ 2x images fixes the problem ... but ...

Answer 1

If you test 245 at WWDC 2012 for Advanced Tips and Tricks for High Resolution on OS X in the first NSImage section, you'll find out why.

NSImage does not have the concept of high resolution - it just uses the smallest image with more pixels than the space it needs to fill, so if your NSImageView larger than your 1x image, it will use a 2x image since it has more pixels.

Answer 2

I have this problem before. It seems that if your DPI of the image is not 72, the image size will be wrong. You can get the actual size using the code below.

 NSImage *image = [NSImage imageNamed:@"image"]; NSBitmapImageRep *rep = [NSBitmapImageRep imageRepWithData:[image TIFFRepresentation]]; NSSize size = NSMakeSize([rep pixelsWide], [rep pixelsHigh]); [image setSize: size]; 

Answer 3

When specifying image names in Interface Builder and [NSImage imageNamed:] make sure to use foo instead of foo.png . Although iOS is smart enough to add @2x in a later case, Mac OS X is not. It will download an image without a retina in the latter case, but add @2x in the former case (if such an image is present).

Answer 4

Do you assign images to your Buttons in IB or in code?

If you do this in code, you might create a copy of the image (for example, [myImage copy] ), and assigning this copy to your button may solve this problem.

Answer 5

In my case (drawing icons in a custom NSOutlineView) I had to make sure that x, y origin drawRect is rounded to int values:

 NSMakeRect( round(NSMinX(cellFrame)-iconSize.width), round(NSMidY(cellFrame)-(iconSize.height/2.0f)), …); 

Answer 6

This is actually a response to a previous article on DPI, but I could not answer it directly. The code in this post gave me the true pixel sizes (that is, it did not indicate any problems). However, the DPI of the image was definitely the culprit in my case. Symptoms that I observed were:

• When my NSImageViews is set to No Scaling, the images will appear crushed.
• If my NSImageViews are mounted on the Independent axis, most images will display correctly if the NSImageViews were sized so that they fit the image exactly.
• However, even in this case, some images had strange artifacts in them that were not there when viewing the same image through Preview or in another place (or even through Interface Builder, for that matter - they appeared only at runtime).

Images that had problems had a DPI other than 72. When I recreated the images at 72 DPI, all of the above behavior disappeared.

It was a pretty tough problem - I hope this helps someone!

Answer 7

For me, I just needed to set the image scaling to none:

In the Builder Interface

In code

 NSImageCell *image; [image setImageScaling:NSImageScaleNone]; NSButtonCell *button; [button setImageScaling:NSImageScaleNone];