IOS UIImageView scaling image down produces aliased image on iPad 2

iosipadobjective cuiimageview

I am using UIImageView to display thumbnails of images that can then be selected to be viewed at full size. The UIImageView has its content mode set to aspect fit.

The images are usually scaled down from around 500px x 500px to 100px x 100px. On the retina iPad they display really well while on the iPad2 they are badly aliased until the size gets closer to the native image size.

Examples:

Original Image

Original Image

Retina iPad 100x100

Retina iPad rendering at 100px x 100px

iPad 2 100x100

iPad 2 rendering at 100px x 100px

The difference between iPad 2 and new iPad might just be the screen resolution or could be that the GPU is better equipped to scale images. Either way, the iPad 2 rendering is very poor.

I have tried first reducing the image size by creating a new context, setting the interpolation quality to high and drawing the image into the context. In this case, the image looks fine on both iPads.

Before I continue down the image copy/resize avenue, I wanted to check there wasn't something simpler I was missing. I appreciate that UIImage isn't there to be scaled but I was under the impression UIImageView was there to handle scaling but at the moment it doesn't seem to be doing a good job scaling down. What (if anything) am I missing?

Update: Note: The drop shadow on the rendered / resized images is added in code. Disabling this made no difference to the quality of the scaling.

Best Answer

Another approach I've tried that does seem to be improving things is to set the minificationFilter:

[imageView.layer setMinificationFilter:kCAFilterTrilinear]

The quality is certainly improved and I haven't noticed a performance hit.

Related Solutions

Ios – How to get the size of a scaled UIImage in UIImageView

Objective-C:

-(CGRect)frameForImage:(UIImage*)image inImageViewAspectFit:(UIImageView*)imageView
{
    float imageRatio = image.size.width / image.size.height;
    float viewRatio = imageView.frame.size.width / imageView.frame.size.height;
    if(imageRatio < viewRatio)
    {
        float scale = imageView.frame.size.height / image.size.height;
        float width = scale * image.size.width;
        float topLeftX = (imageView.frame.size.width - width) * 0.5;
        return CGRectMake(topLeftX, 0, width, imageView.frame.size.height);
    }
    else
    {
        float scale = imageView.frame.size.width / image.size.width;
        float height = scale * image.size.height;
        float topLeftY = (imageView.frame.size.height - height) * 0.5;

        return CGRectMake(0, topLeftY, imageView.frame.size.width, height);
    }
}

Swift 4:

func frame(for image: UIImage, inImageViewAspectFit imageView: UIImageView) -> CGRect {
  let imageRatio = (image.size.width / image.size.height)
  let viewRatio = imageView.frame.size.width / imageView.frame.size.height
  if imageRatio < viewRatio {
    let scale = imageView.frame.size.height / image.size.height
    let width = scale * image.size.width
    let topLeftX = (imageView.frame.size.width - width) * 0.5
    return CGRect(x: topLeftX, y: 0, width: width, height: imageView.frame.size.height)
  } else {
    let scale = imageView.frame.size.width / image.size.width
    let height = scale * image.size.height
    let topLeftY = (imageView.frame.size.height - height) * 0.5
    return CGRect(x: 0.0, y: topLeftY, width: imageView.frame.size.width, height: height)
  }
}

Ios – UIImageView missing images in Launch Screen on device

Turn if off and then on again.

Seriously, restart the device — that’s what fixed it for me.

Here’s what didn’t work:

Cleaning DerivedData
Cleaning the project
Uninstalling the app from the device
Restarting Xcode
Restarting the computer

Older observations:

Just like the others, it:

Works fine in the Simulator
Used to work on the devices (iPhone 5S, iPad Air)
No code changes (verified via git reset --hard HEAD), yet stopped working.

What I remember triggering the first build where it stopped working was unplugging the iPhone while it was runnning. (Not sure if it’s related.)

However, the git reset not fixing it (combined with all the clean steps not working) tells me it this must be getting cached somewhere else. Quite possibly in one of the .gitignored files? (I’m using Git ignore file for Xcode projects)

One workaround that worked for one UIImageView (in the UIView that has three) but not for the others was putting the image into an .xcassets file. Reverting to the plain image file did not undo the fix. (Really feels like a caching error.)

UPDATE: See top — restarting the device is what fixed it. I get the feeling the wrong bitmap data is being cached on the device itself.

Radar: http://openradar.appspot.com/23534818

Related Topic