Image Scaling

Visualize ASImageNode.image’s pixel scaling

This debug feature adds a red text overlay on the bottom right hand corner of an ASImageNode if (and only if) the image’s size in pixels does not match it’s bounds size in pixels, e.g.

CGFloat imageSizeInPixels = image.size.width * image.size.height;
CGFloat boundsSizeInPixels = imageView.bounds.size.width * imageView.bounds.size.height;
CGFloat scaleFactor = imageSizeInPixels / boundsSizeInPixels;

if (scaleFactor != 1.0) {
      NSString *scaleString = [NSString stringWithFormat:@"%.2fx", scaleFactor];
      _debugLabelNode.hidden = NO;
}

let imageSizeInPixels = image.size.width * image.size.height
let boundsSizeInPixels = imageView.bounds.size.width * imageView.bounds.size.height
let scaleFactor = imageSizeInPixels / boundsSizeInPixels

if scaleFactor != 1.0 {
      let scaleString = "\(scaleFactor)"
      _debugLabelNode.hidden = false
}

This debug feature is useful for quickly determining if you are

• downloading and rendering excessive amounts of image data
• upscaling a low quality image

In the screenshot below of an app with this debug feature enabled, you can see that the avatar image is unnecessarily large (9x too large) for it’s bounds size and that the center picture is more optimized, but not perfectly so. If you control your own endpoint, make sure to return an optimally sized image.

Usage

In your AppDelegate.m file,

• import AsyncDisplayKit+Debug.h
• add [ASImageNode setShouldShowImageScalingOverlay:YES] at the top of your AppDelegate's didFinishLaunchingWithOptions: method

Make sure to call this method before initializing any ASImageNodes.

Edit on GitHub