Question

I want, in responsive design fashion, to make a single background image from a high-resolution master image, shrink it while maintaining aspect ratio just to where its bounding rectangle touches the image's bounding rectangle, and crop off the ends, leaving the image centered.

The approach I am taking to this is:

  1. Obtain the dimensions of the window, noting whether they match any last recorded dimensions and only proceeding if it's the first time this has been called or if the screen resolution has changed.
  2. Obtain the dimensions of the image, scaling the image down as necessary.
  3. Crop the image; I think https://developer.apple.com/library/ios/documentation/graphicsimaging/Conceptual/CoreImaging/ci_tasks/ci_tasks.html gives a CICrop method with explanation.
  4. Display the rendered image.

As I was doing research, I came to Any code/library to scale down an UIImage? , which posed a fly in the ointment: at least as of the posting (admittedly, 2009), it said that it took several seconds, possibly more than a minute, to rescale an image. Which looks like a fly in the ointment.

Is there an appropriate or standard responsive design approach to scale down and autocrop an image without degrading the user experience by taking seconds to think? If I want to bypass the IDE, I may be able to make a shell script that will run ImageMagick convert to make the equivalent of a primed cache, but that smells funny to me. It's the kind of solution I'd use as a last resort if I couldn't find something else that smelled less funny.

What is the preferred approach here? Does some form of responsive design work? Have processors sped up enough that resizing is not an expensive operation? Is there appreciable improvement if I first scale down the background so its height is at most the portrait pixel resolution in an iPad?

Was it helpful?

Solution

Processors have sped this up a lot, but it will depend on how big your source image is. As a data point, I use this same method to resize/crop camera photos in my app. On my iPad 2, this process is nearly instantaneous.

You could also try setting putting the original image directly into the UIImageView and set the appropriate contentMode (probably UIViewContentModeScaleAspectFill). This other question could be relevant if it looks jagged: iOS UIImageView scaling image down produces aliased image on iPad 2

All that said, in my experience, it's normal and usually easier to just generate and include separate images for iPad and iPhone in your project

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top