이미지 최적화 적용하기

흠..아직 많이 모를것이다. 세상에 나온 내 앱 볼레또를 그래서 한번더 홍보하고 들어갈게요 한번씩 아니 두번,세번 써줘요

https://apps.apple.com/kr/app/볼레또/id6737753864

‎볼레또

요렇게 친구들과 함께 하나의 티켓에서 나만의 프레임으로 네컷사진을 올리고 스티커와 말풍선으로 귀엽게 꾸미는 앱이다. 

그러기에 사진이 굉장히 많다... 현재의 앱을 사용하면서 메모리를 체크하면

주식그래프같다

이전에 나는 이미지가 렌더링되는 과정에서 CPU의 사용량과 메모리를 줄일 수 있는 방법으로 백그라운드에서 단일큐에서 다운샘플링하면 더 메모리를 덜 사용하고 받을 수 있음을 확인했다. 

이미지 서버로 전송할때

현재 나의 코드는 저렇게 사진을 4장과 프레임 정보와 저 6칸중 어떤인덱스에 저장할것인지를 서버에 Post한다. 그럼 내가 전송하는 이미지파일의 크기(진짜 가로세로 와 메모리)는 어느정도일까?

이렇게 나온다. width와 height이 다른이유는 편집박스의 크기를 조정할 수 있고 사진마다 가로세로크기가 달라 그거에 다른 편집박스도 영향을 받아 크기가 달라지기 때문이다. 하지만 우리가 여기서 봐야할 것은 크키가 클수록 메모리가 커진다는 것이다. 현재는 다행히 압축도 안했지만 총 배열의 크기가 4MB를 넘지 않았다. 하지만 그래픽 요소가 많으면 커질 수도 있기에 서버에 전송할때 줄여주려한다.

현재 업로드 속도를 체크해봤다. 이미지 4장을 압축없이 그대로 보내는 경우이다.

업로드 완료 - 소요 시간: 2.54초, 크기: 8952008 바이트, 속도: 3437.42 KB/s 

1. 이미지 리사이징 

기존에는 서버에 전송되는 이미지가 각각 가로세로크기가 달랐다. 이미지 리사이징을 통해 320과 320으로 줄였다. 동일한 비교를 위해 동일한 이미지 4장을 올려 실험을 해보았다.

왼쪽이 리사이징 전 > 오른쪽이 리사이징 후

기존에는 한 사진당 2메가씩 차지하였다. 하지만 동일한 사진이였는데 이미지 리사이징을 통해 0.72 즉 사진 한장당 64% 감소시킬수 있었다. 업로드 속도도 절반가량줄었다

업로드 완료 - 소요 시간: 1.28초, 크기: 3030140 바이트, 속도: 2310.55 KB/s

2. JPEG압축 

UIImage를 JPEG형식으로 압축해보자. 현재 1은 가장 높은 품질을 의미하고, 0으로 갈수록 낮은 품질을 의미한다. 낮은 품질일수록 이미지의 파일 크기가 작아지지만, 품질은 떨어진다. 현재 내 앱에서는 이미지를 아주 확대해서 보여주는 경우가 없다. 일반적으로 0.7-0.9를 많이 사용하기에 0.7 정도로 설정해주었다.

업로드 완료 - 소요 시간: 0.38초, 크기: 572302 바이트, 속도: 1470.87 KB/s

총 두가지 방식을 적용하여 이미지를 서버에 업로드할때

메모리를 93.5% 줄이고, 업로드 속도를 약 85% 줄일 수 있었다.

 

서버로부터 받은 이미지를 화면에 띄울때 최적화

내 앱에는 지역별 스티커가 있다. 이 지역별 스티커는 여러개가 있고 해당 이미지는 서버에 전송되어 있어 Url을 통해 띄워준다. 어차피 이미지는 안바뀌기에 API요청을 최소화하기 위해 SwiftData 내장데이터를 활용하여 캐시하는 역할을 했다. 

저 경우 CPU가 최대 44%정도까지 올라갔다.

나는 프로젝트에 KingFisher 를 사용하였다. 해당 이유로는 

1. 캐시

kingfisher는 url String이 키값이 되어 캐싱된 이미지가 있는지를 찾는다. 여기서 캐시는 디스크캐시와 메모리 캐시가 있다.

없을때만 reqeust를 통해 url로부터 다운하고 데이터를 UIImage 객체로 변환.

메모리 캐시에 이미지 캐시하고 디스크캐시에 데이터를 저장한다. 

또한 디폴트 디스크 캐시는 7일이지만 만료시간도 커스텀하게 바꿀 수 있다. 이미지의 경우 나는 4일만 필요하기에 4일로 바꿧다.

2. 다운샘플링

이미지를 디코딩하기 전 데이터에서부터 썸네일만큼으로 작게 잘라서 해당하는거만 디코딩하는 방식으로 메모리를 많이 절약할 수 있다.

struct KFImageView : View {
    let url: URL
    let processor = DownsamplingImageProcessor(size: .init(width: 300, height: 300))
    var body: some View {
        KFImage(url)
            .setProcessor(processor)
            .placeholder {
                ProgressView()
            }
            .resizable()
            .scaledToFill()
    }
    
}

최대 141MB의 메모리에서 다운샘플링을 통해 46MB의 메모리까지 줄일 수 있었다. 

매우 간단하다. 

 

모 사실 내가 직접 코드를 짜서 두가지 기능만 구현해서 사용해도 된다...하지만 라이브러리가 존재하고 해당 라이브러리를 다양한 곳에서 사용하기 때문에 공부할 겸 사용해봤다.