앱에서 서버로 부터 받은 이미지 로딩 시 속도 느린 경우

속도 향상을 위한 방법

1. 이미지 리사이즈 - 반드시 필요. 서버에서 클라이언트로 보내주기 전에 이미지를 리사이징한다.
2. 이미지 최적화 - 올바른 형식과 퀄리티를 선택해야한다.
3. 적절한 CDN(Content Delivery Networks) 선택 - CDN들은 글로벌하게 분산된 캐시/프록시 서버의 집합이다.

이미지 리사이즈

1. 서버에 여러장의 사진을 미리 업로드하는 방법
2. 이미지를 S3에 올릴때 Lamda를 이용해 리사이즈 후 원본과 썸네일 버킷에 저장
3. 이미지 리사이징 서버를 이용해 호출 시, 이미지 리사이징 서버를 통해 이미지를 리사이즈 후 반환해준다.
   • 구현방법으로는 서버를 직접 구현하는 방법과 람다를 이용해 서버리스 방식 2가지가 가능
   • 장점:
     • 여러 이미지를 저장하지 않아도 된다.
     • 썸네일 이미지를 미리 생성해서 저장해두지 않고 CDN을 통해 썸네일 이미지를 캐시 하므로 저장공간은 이미지 개수 만큼만 사용
   • 단점
     • 최초 로딩시 리사이즈에 시간 필요.
     • 요청 밀릴 시, 이미지 변환 실패 가능
     • CDN 캐시 안될 시, 같은 이미지 리사이즈 요청 여러번 반복 가능.

Lamda와 Lamda@Edge

AWS CloudFront rlsmd. Lamda 코드를 CloudFront에 배포하여, 최종 사용자에 대한 응답 속도 높일 수 있다.

Webp 사진 포맷

구글에서 2010년 공개한 WebP는 JPEG, PNG와 같이 이미지 형식을 말한다. WebP는 화질에는 거의 차이가 없으면서도 JPEG이나 PNG에 비해 20% 이상 용량이 적다.

비트윈 사례
이전 비트윈의 경우 원본 이미지에 대해 리사이즈 된, 5장의 사진을 추가로 가지고 있었다고 한다.
각 크기별로 가지고 있었는데, 2016년 이후로 온디맨드 리사이징 방식으로 바꿔서
서버 비용을 대폭 줄일 수 있었다고 한다.

References

비트윈사례

당근마켓 사례
당근마켓 on-the-fly 이미지 리사이징 도입