이미지 리사이징 vs 이미지 다운 샘플링

안녕하세요! 지난 렌더링 관련된 포스팅에서 이미지 리사이징에 대해 간단하게 정리해 보았는데,

이번 포스팅에서는 이미지 다운샘플링까지 같이 정리해 보고 어떤 상황에 어떤 방법을 사용하면 좋을지에 대해 알아보겠습니다.

 

 

 

 

지난번에 정리했듯 이미지를 가져온다고 해서 바로 사용할 수 있는 것이 아닙니다. 이미지를 사용하기 위해서는 Load -> Decode -> Render의 과정을 거쳐야 하는데, 이 과정에서 디코딩과 렌더링 할 때 많은 메로리가 사용되게 됩니다.

 

만약 큰 이미지가 많은 서비스를 경우 메모리 부족으로 앱이 꺼져버리는 상황이 발생할 수 있습니다.

 

그렇기 때문에 개발자는 위의 두 과정을 통해 이미지의 크기를 줄일 수 있습니다. 우선 이미지 리사이징과 다운 샘플링의 개념과 차이에 대해  정리해 보겠습니다.

 

# 이미지 리사이징

리사이징은 이미지의 크기를 변경하는 작업입니다. 원본 이미지를 적절한 크기로 확대 및 축소할 수 있습니다. 리사이징 과정에서 말하는 확대 축소란 픽셀 단위의 이미지를 조정하는 것입니다. 

 

# 이미지 다운 샘플링

다운 샘플링은 이미지의 해상도를 줄이는 것입니다. 리사이징과 달리 이미지를 작게 만드는 것이 아니라 이미지의 픽셀 밀도를 낮추는 과정입니다. 다운 샘플링은 저해상도 버전을 생성하여, 이미지의 크기는 줄이고, 메모리 사용량을 낮추는 효과가 있습니다. 

 

# UIGraphicsImageRenderer

이미지 리사이징을 구현할 수 있습니다. 많은 고해상도 이미지를 서비스에 사용할 때! 화면의 해상도에 맞춰 이미지를 리사이징 하는 데 사용됩니다. 벡터 기반의 작업을 지원하기 때문에, 리사이징 과정에서 픽셀 손실을 최소화하면서 이미지를 만들 수 있습니다. 

 

하지만,,, 이렇게 좋은 이미지 리사이징! 큰 이미지를 사용하거나 여러 이미지를 보여주기 위해 반복적으로 렌더링을 할 경우에는 성능 이슈가 발생할 위험이 있습니다!

 

 

그래서! WWDC에서는 DownSampling을 통해 이미지 사이즈를 줄이는 방법으로 제안하고 있습니다.

 

 

 

UIImage는 이미지를 리사이징하는 과정에서는 많은 비용이 소모된다고 합니다. 

UIGraphicsImageRenderer를 사용하는 방법은 옛날에 사용되던 방식보다는 효율적이지만, 리사이징 기법은 메모리에 original Image를 그대로 저장하기에 때문에 위험이 따릅니다. -> Decode 하기 전 다운 샘플링이 필요합니다!

 

이에 대한 효율적인 해결책은!

 

# ImageIO

ImageIO를 이용하는 것입니다. 이는 프레임워크로 대부분의 이미지 파일 형식을 읽고 쓸 수 있습니다. 또한 ImageIO는 UIImage가 아닌 CGImage를 사용한다고 합니다. (CGImage는 기본적인 데이터만 가지고 있음)

 

 

import ImageIO
extension UIImage {
    func downSample(scale: CGFloat) -> UIImage {
        let data = self.pngData()! as CFData
        let imageSource = CGImageSourceCreateWithData(data, nil)!
        let maxPixel = max(self.size.width, self.size.height) * scale
        let options = [
            kCGImageSourceThumbnailMaxPixelSize: maxPixel,
            kCGImageSourceCreateThumbnailFromImageAlways: true
        ] as CFDictionary

        let scaledImage = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, options)!

        printData(UIImage(cgImage: scaledImage))
        return UIImage(cgImage: scaledImage)
    }
}

 

메모리에 원본 이미지를 로드하기 전 ImageIO를 통해 사이즈를 파악해 최적화가 가능합니다.

얻어진 CGImage를 UIImage로 감싸 사용하게 되면 메모리에 scaledImage만 올리게 되어 앞선 방법보다 메모리 효율이 더 높습니다!

 

이렇게 수동으로 이미지 다운 샘플링을 할 수 있지만, 평소 많이 사용하고 있는 Kingfisher 라이브러리에서도 DownSamplingImageProcessor를 지원하고 있습니다. 

 

 

 

위와 같이 사용할 수 있습니다. DownsamplingImageProcessor는 scaleFactor, cacheOriginalImage와 함께 사용됩니다. 

이미지프로세서가 사용됐을 경우 kingfisher는 원본 이미지랑 다운 샘플링 된 이미지를 두 개 다 저장하게 됩니다. 나중에 이미지에 다른 이미지 프로세서가 사용될 때 디스크에 캐시 된 이미지를 가져와 적용하려는 이유로 원본 이미지는 디스크에만 저장됩니다.

 

다운 샘플링된 이미지는 반대로 메모리에만 저장되게 됩니다. 위와 같이 원본 이미지를 메모리에 저장하지 않기 때문에! 메모리 사용량이 줄어들게 됩니다!

 

 

이번 포스팅에서는 이미지 리사이징, 다운샘플링에 대해 알아보고(다운샘플링에 대해 더) 사용해 보았습니다. 다음 포스팅에서 더 유익한 글로 돌아오겠습니다. 긴 글 읽어주셔서 감사합니다!

 

 

 

 

https://github.com/onevcat/Kingfisher/wiki/Cheat-Sheet

Cheat Sheet

 

 

https://developer.apple.com/documentation/uikit/uigraphicsimagerenderer

UIGraphicsImageRenderer | Apple Developer Documentation

 

https://developer.apple.com/documentation/imageio

Image I/O | Apple Developer Documentation