Resizing Image Techniques

Tram Ho

  • Search for the question “How do you resize an image?” On Stack Overflow, we will find a lot of code samples as well as different solutions. To summarize, we will learn about 5 different techniques to resize images in iOS (macOS, as well as the appropriate conversion between UIImage -> NSImage ). More importantly, find solutions that are appropriate for each case.

When and why do we scale images?

  • We need to resize the image when the image we have is much larger than the image we can display.
  • UIImageView automatically scales and crop images in the order that was predefined by contentMode property and in the case. scaleAspectFit,. scaleAspectFill , or. scaleToFill .

  • To illustrate in detail, I can view the earth photograph from space . In this high resolution, the photo reaches 12000px and takes up 20MB . You may think it is not a problem compared to current hardware, but remember it is just the amount of compression. To display it, UIImageView needs to decode this JPEG file into a bitmap . If you have set this fullsize image, your app memory will be up to a hundred megabytes and that won’t benefit the user.
  • By resizing for this image, we can save a lot of RAM :
  • This technique is known as downsampling and it can greatly improve the app’s performance in case of using it. If you are interested in the information of downsampling and image exercises, check out the great lectures from WWDC-2018 .
  • Nowadays, some apps can load large images that are not different from the original photos we received from designers. To do that, let’s take a look at some resizing methods!

What techniques resizing images?

  • Here, size is how to measure point-size instead of pixel-size . To calculate pixel-size for scale, resizing size we use the scale of UIScreen :

  • If you are loading asynchronously 1 large image, use a transition to get the previous blur image in the imageview. Example:

Use UIGraphicsImageRenderer.

  • Highest-level API supports resizing in the UIKit framework. The UIImage allows you to draw in UIGraphicsImageRenderer context to render and minimize the image:

  • UIGraphicsImageRenderer is a relatively new API introduced in iOS10 to replace the UIGraphicsBeginImageContextWithOptions / UIGraphicsEndImageContext APIs. You build UIGraphicsImageRenderer with point-size. The method image will create a closure and return the results of the bitmap from the closure. In this case, the returned result is the original image that is scaled within the specified limit.
  • UIGraphicsImageRenderer is useful in minimizing the original image size to match the displayed frame without changing the original aspect ratio. A VMakeRect (aspectRatio: insideRect 🙂 is a function in AVFoundation that calculates this calculation for you:

Digital Transformation – Digital conversion and trends in 2019 and more
WebP Image in Android project

Use Core Graphics.

  • Core Graphics / Quartz 2D is a lower-level API that allows us to have more personal customization.
  • We will have CGImage, a temporary context bitmap used to render scaled images with the draw (_ in: …) method:

  • CGContext initialization requires several arguments to create the context, including size and memory capacity parameters for each channel with color spaces. In this example, the parameters are taken from the CGImage object. Next, setting interpolationQuality property to .high to interpolate for the pixel display pixel truthfully, Method ** draw (_: in **) will redraw the supplied image size and position, allowing the image to be crop and cut the edges to fit the required display characteristics. Finally, the makeImage () method will pass the information from the context that has just rendered it to CGImage.

Use Image I / O.

  • Image I / O is a powerful framework for working with images. It works independently of Core Graphics , it can read and write between different formats, different types of photo data, and processes common image processing methods. This framework enables the fastest encoder and decoder forms with advanced caching mechanisms, even the ability to load step-by-step images.
  • An important note is that CGImageSourceCreateThumbnailAtIndex provides a brief API with different options that are more useful for things provided in CoreGraphics.

  • We have CGImageSource to be able to set the options, func CGImageSourceCreateThumbnailAtIndex ( :: _ create a thumbnail of the image so we can preview. Resizing is completed by kCGImageSourceThumbnailMaxPixelSize with the maximum size used to divide the scale image with the original image With the setting of kCGImageSourceCreateThumbnailFromImageIfAbsent or kCGImageSourceCreateThumbnailFromImageAlways , Image I / O automatically cache and scale the results for the next use.

Use Core Image.

  • Core Image is built on functions by filtering the CILanczosScaleTransform with the same name. Although UIKit is arguably the more advanced API, the use of key-value coding in Core Image makes it difficult to use.
  • The process of creating filters to transform, config, and render images is not different from those of other APIs:

  • Core Image filtering parts with the CILanczosScaleTransform name in the parameter are inputImage , inputScale and inputAspectRatio . More interesting is that a CIContext used to create UIImage with an intermediate representation is CGImageRef . With UIImage (CIImage 🙂 not usually working as expected, creating CIContext is an alternative. The cache is used many times in resizing.

Use vImage.

  • The final technique is the image scale with vImage with functions to scale images. These lower-level APIs promise high performance compared to the few required stages. Except that you have to manage the manual caching:

  • Accelerate APIs used here are difficult to use in deployment compared to other rezising methods. Ignoring difficult-to-read row and variable names you’ll see this implementation method, this approach is also worth exploring.
    • First: create a cache for the image.
    • Second: create paths for these cache memory.
    • Third: divide the data ratio for the image in the buffer to the specified path.
    • Finally: Reattaching a photo with data results in the source buffer.

Performance Benchmarks ???


  • UIKit , Core Graphics , Image I / O all work well on scaling methods in most images. If you use IOS, UIGraphicsImageRenderer is the first choice you should consider.
  • Core Image is a good choice for performance. In fact, according to Apple’s Best Practices section of the Core Image Programming Guide , you should use CoreGraphics or Image / IO to crop or downsampling instead of using Core Image .
  • Unless you are really ready to cope with vImage , additional tasks to be able to use the API are not necessary in most cases.
Some popular Refactoring techniques
Mobile First in Responsive Web Design
Share the news now

Source : viblo