Achieving desired resolution of UIImage issue - ios

Question

I am trying to create a custom annotationView.
I have a base.png image with the following parameters 60x100 pixels with 72pixels/inch resolution.
In my custom Annotation object I set annotationView's image with the following method:
-(MKAnnotationView *)annotationView
{
MKAnnotationView *annotationView = [[MKAnnotationView alloc] initWithAnnotation:self reuseIdentifier:#"MyAnnotation"];
annotationView.image = [UIImage imageNamed:#"base.png"];
return annotationView;
}
Everything is working as desired except for resolution of the custom annotationView. It looks like this:
Although, original image looks like this:
As you can see it looks over sized with pixels clearly noticeable. I don't have any front-end experience to speak of and I don't understand much about resolution and how UIImage sets it's image under the hood by calling imageNamed method.
What is the issue here? Do I need a higher resolution image to begin with or different size image or something else??? How does iOS translate the original .png image (it's size, resolution etc.) to the image that is actually displayed on the device?

Answer 1

Have a look at Apple's high resolution resources webpage.
Essentially, there are two parts to this.
Are you using #2x images for retina? You should have a double resolution copy of your image (in your case, 120 x 200) named base#2x.png.
You UIImageView will automatically take the size of its image property unless you specify a frame.
It looks like your pin and your coffee cup are two different images. I'd start by making that base#2x.png image at double resolution. When you write your code, you don't actually specify the #2x version of your image. You code as you did, and iOS will look for the Retina resolution copy and magically load it instead of the standard resolution. You'll need both images, like so:
Make sure to add both of them to your project. In code, you'd write [UIImage imageNamed:#"base.png"] and on retina devices, you'll get the sharper version of the picture.
As for the offset of the coffee on the pin, you need to play with the frame (or constraints, if you're using auto layout) of that view a bit.