Apple watch image asset resolution

Question

TL;DR How to prepare images for apple watch?

There are 2 types of resolution for apple watch:

1. 38mm: 272x340

2. 42mm: 312x390

If I have an image 136x108 (the image above) for WKInterfaceButton/WKInterfaceImage, how can I make sure it looks good on both watches?

I've set the storyboard to Any Screen Size, Height is set to "Size to fit Content" and width is set to "relative to container

Question: 1) Is the resolution of the image too low (136x108)? How should I measure the height and width? e.g. height of the watch - height of the button (how to get this height) = ?

2) What should I set for the size width and height property?

a) Size to fit, relative to container, or fixed?

3) For the Images.xcassets, what's the resolution needed for each @1x @2x and @3x

Answer 1

You don't have to find a solution to work on both sizes. The size class feature gives you the capability to provides separate layouts and image assets for each size respectively.

To answer your questions:

1. It's too small. Prepare the images that exactly match the display size on each size of the watch.

2. You can use relative to container for width but fixed for height – set the precise height for each size.

3. Don't use the universal image asset type. Use Apple Watch specifically. Then you will have the ability to provide separate images for each size. And only @2x images are needed.

Answer 2

This will do the trick:

+ (UIImage*) resizeImage:(UIImage*)original withWidth:(float)newWidth withHeight:(float)newHeight{
    UIImage * originalScaled = [UIImage imageWithCGImage:original.CGImage scale:[UIScreen mainScreen].scale orientation:original.imageOrientation];

    CGSize newSize = CGSizeMake(newWidth, newHeight);

    UIGraphicsBeginImageContextWithOptions(newSize, // context size
                                           NO,      // opaque?
                                           0);      // image scale. 0 means "device screen scale"

    CGContextRef imageContext = UIGraphicsGetCurrentContext();
    CGContextSetInterpolationQuality(imageContext, kCGInterpolationHigh);
    [originalScaled drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

Your image should be in a high resolution because converting it to a retina image will make it smaller. You are making it retina by doing this:

scale:[UIScreen mainScreen].scale

So if your image is 136x108 you should instance the image and pass that width and height to the method. It will look good on the watch.