Skip navigation

I was recently at wit’s end with what seemed like it should be a non-issue: I had taken a screenshot of my iPhone, cropped the image down to a single button, and was then trying to display it as the background image on a UIButton. The problem was that the image would appear twice as large. After stepping through the code, I realized that the UIImage object had a scale value of 1.0f instead of 2.0f like it should (I have an iPhone 5 with Retina Display). After some snooping around in Apple’s UIImage reference, I realized the fix was simple: I just had to add “@2x” to my image’s filename.  BUT there is one caveat:  when referencing the image’s filename in your code, do NOT add the “@2x”.

For example, if your image filename is “HelpIcon@2x.png”:

INCORRECT (image has scale factor of 1.0f and is too large)

[button setBackgroundImage: [UIImage imageNamed:@"HelpIcon@2x.png"] forState:UIControlStateNormal];

CORRECT (image has scale factor of 2.0f)

[button setBackgroundImage: [UIImage imageNamed:@"HelpIcon.png"] forState:UIControlStateNormal];

Leave a Reply

Your email address will not be published. Required fields are marked *