[iOS] Image Resize & DownSampling을 통한 최적화

안녕하세요!

개발콩입니다. 오늘은 Image Resize & DownSampling에 대해서 알아보도록 하겠습니다.

 

 

 

iOS개발을 하면서 원본 사이즈가 큰 이미지를 표현하는 경우가 있었습니다.

해당 이미지를 보여줄 때 많은 메모리가 할당되는 것을 확인했습니다.

화면에 보여지는 이미지의 크기는 동일하지만 메모리가 많이 할당되는 것을 보며 최적화하는 방법을 찾고

실제로 적용시킨 내용을 정리한 글 입니다.

 

 

iOS에서 이미지가 차지하는 메모리

이미지는 iOS에서 가장 많은 메모리를 차지하는 것들 중 하나입니다.

 

590KB의 filse size를 갖고 있는 이미지는

2048 * 1536 * 4(Red, Green, Blue, Alpha) * 8(0-255) bit를 표현합니다.

약 10MB를 차지하게 됩니다.

 

 

 

iOS에서의 이미지 처리 방식

 

iOS에서는 이미지 처리를

크게 3가지의 과정을 통해 표현하게 됩니다.

• Load
  • OS가 압축된 이미지 파일을 메모리에 로드합니다.
• Decode
  • 압축된 이미지 파일을 GPU가 읽을 수 있도록 image Buffer로 디코딩 작업을 합니다.
• Render
  • 디코딩된 image Buffer를 Frame Buffer로 Rendering을 하며 시각적으로 표현됩니다.

 

 

• UIImage는 Data Buffer에 있는 이미지의 크기만큼 Decoding하며 Image Buffer를 할당합니다.
• UIKit이 UIImageView에게 Rendering을 요청하면 Image Buffer가 GPU를 통해 Frame Buffer로 복사하고 크기를 조절합니다.

 

 

최적화 시킬 화면

 

해당 화면에서 사용된 이미지는 7857 x 7462의 크기로 매우 큰 사이즈의 이미지입니다.

우리가 가진 화면의 사이즈보다 큰 이미지를 모두 표현할 필요가 있을까요?

 

즉, Full Image Buffer를 모두 가지고 있을 필요가 있을까요?

 

이 과정에서 사용할 수 있는 방법이 아래 2가지 방법입니다.

• Image Resize
• Down Sampling

 

 

Image Resize

extension UIImage {
    
    func resize(newWidth: CGFloat) -> UIImage {
        let scale = newWidth / self.size.width
        let newHeight = self.size.height * scale
        
        let newSize = CGSize(width: newWidth, height: newHeight)
        let resized = UIGraphicsImageRenderer(size: newSize)
        let resizedImage = resized.image { context in
            self.draw(in: CGRect(origin: .zero, size: newSize))
        }
        
        return resizedImage
    }
}

 

 

Down Sampling

저의 경우 Kingfisher의 메서드를 활용했습니다.

detailPictureImageView.kf.setImage(
    with: detailImageURL,
    options: [
        .processor(DownsamplingImageProcessor(size: CGSize(width: screenWidth, height: screenWidth * verticalRatio))),
        .scaleFactor(UIScreen.main.scale),
        .cacheOriginalImage
    ]
)

 

 

 

 

 

Image Resize vs Down Sampling

최적화 전	Image Resize	Down Sampling

 

두 가지 방법 모두 메모리 최적화에 성공했습니다.

 

하지만 이 두 방법에는 큰 차이점이 존재합니다.

 

• Image Resize
  • 전체 이미지를 decode해서 Image Buffer를 만든다.
  • 생성된 Image Buffer를 줄인다.
• Down Sampling
  • 필요한 크기 만큼 decode해서 Image Buffer를 만든다.

 

즉, Image Resize방법을 사용하게 된다면 full Image Buffer가 메모리에 한번은 올라가게 됩니다.

또한, 이미지의 크기 조정 등의 작업에는 비용이 많이 들어간다고 합니다.

 

 

이와 같은 이유를 통해 저는 화면에 이미지를 최적화하는 방법에는 Down Sampling 방법을 사용할 것 같습니다.

 

 

제 결론 및 느낀점

iOS의 이미지 처리하는 방식에는 Load, Decode, Render 과정이 있습니다.

 

우리가 화면에 이미지는 보기까지

Data Buffer -(Decoding)-> Image Buffer -(Rendering)-> Frame Buffer

과정이 있음을 알게 되었습니다. 이 과정에서 Image Buffer를 줄이는 것이 메모리 최적화의 시작이라는 것을 알게 되었습니다.

 

이미지 메모리 최적화 방법에는 크게 2가지가 있으며,

결국 Down Sampling을 활용한 방법이 더 효율적이라는 것을 알게 되었습니다.

 

 

참고

https://developer.apple.com/videos/play/wwdc2018/416/