[iOS] SDWebImage 메모리용량 제한옵션 설정 (.imageScaleDownLimitBytes)



# SDWebImage 메모리제한옵션 설정 (.imageScaleDownLimitBytes)

안녕하세요 __물먹고하자__ 입니다 :)
오늘은 이미지 라이브러리(SDWebImage) 사용중
픽셀이 __큰 (24000 * 13000) 5MB__ 기준 메모리가 터지는 현상이 나와
옵션찾아보고 적용했던 내용 공유드립니다.

---
## 1. SDWebImage 메모리용량 제한옵션 키값
> 💡 <a href="https://sdwebimage.github.io/documentation/sdwebimage/sdwebimagecontextoption/" target="_blank">imageScaleDownLimitBytes</a> : 많은 Ram을 차지했는지 모를때 바이트 제한 기준을 정하는 키값 (OOM 피하는데 도움)
참고이미지 : 픽셀큰 이미지 (24000 * 13000) 5MB 호출시 __순간 2.6GB 메모리__가 튐

<!-- 1. 참고 이미지 -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixP9wErhMvw6XswuaykLzDiAcGYylkd8SvGUL_WVsGGGN7dqFClQDULXJfFtXvxakOpJSohJ5diB5XB8vEt6OGC_htZ0twsWEpC6ek9ak81rrnPfgEIFbxwuCMFIGUiADQp4TL6drEk87TWjJStJhJlrTWwhvlT1X11borx7N9gELFNbbbgNIbYFYmOprj/s1116/%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5_%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%87%E1%85%A9.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1116" data-original-width="616" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixP9wErhMvw6XswuaykLzDiAcGYylkd8SvGUL_WVsGGGN7dqFClQDULXJfFtXvxakOpJSohJ5diB5XB8vEt6OGC_htZ0twsWEpC6ek9ak81rrnPfgEIFbxwuCMFIGUiADQp4TL6drEk87TWjJStJhJlrTWwhvlT1X11borx7N9gELFNbbbgNIbYFYmOprj/s400/%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5_%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%87%E1%85%A9.png"/></a></div>

<!-- 2. 메모리 OOM 이미지 -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8bN64-7MqcTpjSDCru1wcpS4RA7WvFB4Svfqtgf71A2uDfTE0hHniajm3RjG419fKJkNCbTX2TrqnJGi_KbTIrZnBXXqhP2FW_9J9n0VvFaLYOtHv4xjgTYmXaGxHOG2dSfsK2uYxTlbl2bNyvsig5Q9IVWwJkdr23Q-nywelLZVD91YW4TU-LFaFrB6/s800/%E1%84%8F%E1%85%B3%E1%86%AB%E1%84%91%E1%85%B5%E1%86%A8%E1%84%89%E1%85%A6%E1%86%AF_%E1%84%85%E1%85%A9%E1%84%83%E1%85%B3%E1%84%89%E1%85%B5_%E1%84%86%E1%85%A6%E1%84%86%E1%85%A9%E1%84%85%E1%85%B5%E1%84%8B%E1%85%B5%E1%84%89%E1%85%B2.gif" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="535" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8bN64-7MqcTpjSDCru1wcpS4RA7WvFB4Svfqtgf71A2uDfTE0hHniajm3RjG419fKJkNCbTX2TrqnJGi_KbTIrZnBXXqhP2FW_9J9n0VvFaLYOtHv4xjgTYmXaGxHOG2dSfsK2uYxTlbl2bNyvsig5Q9IVWwJkdr23Q-nywelLZVD91YW4TU-LFaFrB6/s600/%E1%84%8F%E1%85%B3%E1%86%AB%E1%84%91%E1%85%B5%E1%86%A8%E1%84%89%E1%85%A6%E1%86%AF_%E1%84%85%E1%85%A9%E1%84%83%E1%85%B3%E1%84%89%E1%85%B5_%E1%84%86%E1%85%A6%E1%84%86%E1%85%A9%E1%84%85%E1%85%B5%E1%84%8B%E1%85%B5%E1%84%89%E1%85%B2.gif" width="600"/></a></div>

---
## 2. 샘플코드
> 💡 블로그 작성기준 __SDWebImage 5.19.7__ 사용중
Git : <a href="https://github.com/SDWebImage/SDWebImage" target="_blank">https://github.com/SDWebImage/SDWebImage</a>
``` swift
// (신) 픽셀사이즈 (메모리 관리부분 조절)
 self.imageView.sd_setImage(
     with: url, // url 영역 
     placeholderImage: nil,
     options: [],
     context: [
         .imageScaleDownLimitBytes: 20 * 1024 * 1024 // 20mb 메모리제한
     ],
     progress: nil
 ) { img, err, type, url in
     self.layout()
     self.newLoadingView?.stopLoadingView()
     self.newLoadingView = nil
     
     if let err = err {
         let message = LanguageN.getKey("다운로드_실패했습니다")
         DzCustom.makeToast(message: message, type: .error)
         print("이미지 다운로드 실패: \(err.localizedDescription)")
   }
}
```

---
## 3. 추가실험
> 💡 메모리 용량제한을 10MB, 50MB 추가 설정해보고 퀄리티 비교해보기
* GIF 이슈건 체크

<!-- 3. 10MB -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1h4Htvn5GDLAjbmifLKvwXy-xQ6iRp4H-LNA0p_JVwgi5ICoWRp8I4rc634Zqu4Y2fm7wUqxKwb1ot38mA5ZDy62ljkyfVJU77TRClDdquFM9pnrM_dwLjTiosyqBNVj7nHtHkTO_c7KqCad-EdWX0w7NEc5JSEPabWRGhfL8oMrVopkXnqViN1DAtc9P/s800/%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%85%E1%85%A3%E1%86%BC%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%86%AB%E1%84%92%E1%85%AE_10mb.gif" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="535" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1h4Htvn5GDLAjbmifLKvwXy-xQ6iRp4H-LNA0p_JVwgi5ICoWRp8I4rc634Zqu4Y2fm7wUqxKwb1ot38mA5ZDy62ljkyfVJU77TRClDdquFM9pnrM_dwLjTiosyqBNVj7nHtHkTO_c7KqCad-EdWX0w7NEc5JSEPabWRGhfL8oMrVopkXnqViN1DAtc9P/s400/%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%85%E1%85%A3%E1%86%BC%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%86%AB%E1%84%92%E1%85%AE_10mb.gif" width="600"/></a></div>

<!-- 4. 50MB -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-xd3BiwaskzhiTTJoaV7cCTKW25FUot9_sQafgQf9xp0LXcibAYoDwzWUxxL-7MhdSwb5X01mRSdXM-hhhDxj7dXVjeBXUnhHlTT3LD2W39R0hGy8l-LnVZUKKGUaXTsVu2G38vYwmIfSdgbeSE1XmdN5FGDhlFwm3rMMdGuCLSQBjMIslhjLkQQh3vJ/s800/%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%85%E1%85%A3%E1%86%BC%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%86%AB%E1%84%92%E1%85%AE_50mb.gif" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="535" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-xd3BiwaskzhiTTJoaV7cCTKW25FUot9_sQafgQf9xp0LXcibAYoDwzWUxxL-7MhdSwb5X01mRSdXM-hhhDxj7dXVjeBXUnhHlTT3LD2W39R0hGy8l-LnVZUKKGUaXTsVu2G38vYwmIfSdgbeSE1XmdN5FGDhlFwm3rMMdGuCLSQBjMIslhjLkQQh3vJ/s400/%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%85%E1%85%A3%E1%86%BC%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%86%AB%E1%84%92%E1%85%AE_50mb.gif" width="600"/></a></div>

| 용량제한  | 최대메모리  | 퀄리티 |
| :--- | :--- | :--- |
| 10MB    | 기존130MB -> 200MB  | 퀄리티 차이X |
| 50MB    | 기존150MB -> 300MB | 퀄리티 차이X |

여기까지 기준으로는 이미지 퀄리티 차이없고 당연히 적게 잡은게 좋다고 판단했으며
추가로 100MB 용량의 이미지 APNG 등 테스트 했을때 고려하여 제 기준으로는 20MB로 설정함

>💡GIF 이슈 부분
용량을 제한하고 나니깐 GIF파일을 뭉개지는 현상이 발생

<!-- GIF 이슈 부분 -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHOC6G3YBFzBwtqKlUrooeHZyps_szz-3Lxtq6Fwg4MzQPOgb0xxIZ714BD4PWoPmwzcJH5pF869MDOhwWl9mmUOG0mh9T_3q3G0vfLW4wJdv5orCpRtzQ2jY0nWxv9oxzxKiXCleMkSlg7ZRKxSoIqsaoQaC6G9xc-kG6LMLhkVm9hOTx91p0BYHegYy/s3822/%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%85%E1%85%A3%E1%86%BC%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%86%AB%E1%84%92%E1%85%AE_gif%E1%84%91%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%86%E1%85%AE%E1%86%BC%E1%84%80%E1%85%A2%E1%84%8C%E1%85%B5%E1%86%B7%E1%84%92%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A1%E1%86%BC.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="2748" data-original-width="3822" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxHOC6G3YBFzBwtqKlUrooeHZyps_szz-3Lxtq6Fwg4MzQPOgb0xxIZ714BD4PWoPmwzcJH5pF869MDOhwWl9mmUOG0mh9T_3q3G0vfLW4wJdv5orCpRtzQ2jY0nWxv9oxzxKiXCleMkSlg7ZRKxSoIqsaoQaC6G9xc-kG6LMLhkVm9hOTx91p0BYHegYy/s600/%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%85%E1%85%A3%E1%86%BC%E1%84%8C%E1%85%A6%E1%84%92%E1%85%A1%E1%86%AB%E1%84%92%E1%85%AE_gif%E1%84%91%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AF%E1%84%86%E1%85%AE%E1%86%BC%E1%84%80%E1%85%A2%E1%84%8C%E1%85%B5%E1%86%B7%E1%84%92%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A1%E1%86%BC.png" width="600"/></a></div>


내부적으로는 GIF 파일일때 50MB로 설정해도 GIF일때는 뭉개지는 현상이나와 250MB 예외처리 진행했습니다.

---
## 마무리
이번건은 코드기준으로는 SDWebImage에서 제공하는 옵션으로 금방해결 하긴했네요.
제품사용하는 고객층의 종류가 많아서 그런지 대용량 이미지는 많이 봤어도
큰픽셀 저용량은 처음본것 같습니다. __(24000 * 13000) 5MB__

오늘은 이만~

즐거운 코딩 되게요.

끝.


댓글