[성능] 이미지 캐싱 & 리사이징 with CloudFront
사용자가 게시글을 작성할 때, 글 중간중간에 이미지를 추가할 수 있습니다. 하지만, 추가되는 이미지마다 크기가 다르기 때문에 해당 게시물을 열람하는 다른 사용자들로 하여금 가독성을 떨어뜨릴 수 있습니다. 따라서, AWS Lambda 함수를 작성하여, 이미지의 사이즈를 통일화하였습니다.
On-The-Fly 이미지 리사이징은, 클라이언트에서 썸네일을 요청할 때 실시간으로 이미지를 리사이징하여 제공하는 방식입니다. 이미지가 업로드되고 처음 이미지를 요청하는 클라이언트는 이미지를 리사이징하는 시간을 기다려야 합니다. 하지만 CDN(AWS CloudFront)에 이미지가 캐싱되면 클라이언트가 썸네일을 요청할 때 곧바로 CDN에서 캐싱된 썸네일을 제공하기 때문에 사용자 경험을 크게 해치지 않습니다. 또한, On-The-Fly 방식으로 썸네일 생성을 구현하면 S3에 모든 썸네일을 생성하지 않기 때문에 S3 저장소 용량의 증가폭을 줄일 수 있습니다. 또한 클라이언트에 따라 다른 이미지 포맷으로 응답할 수 있습니다. 특히, 구글에서 2010년 공개한 WebP를 지원하는 클라이언트에 WebP 포맷의 이미지를 제공할 수 있게 됩니다. WebP는 화질에는 거의 차이가 없으면서도 JPEG이나 PNG에 비해 20% 이상 용량이 적습니다. 따라서, 이미지 포맷을 클라이언트에 맞추어 최적화 한다면 서버의 트래픽을 대폭 줄일 수 있습니다.
- 사용자가 이미지를 요청 ==> w(width), h(height), f(format) : ex) [CDN doamin]?w=200&f=webp
- CloudFront에 요청한 이미지가 있는지 확인 -> 존재 시, 해당 이미지 반환
- 존재하지 않으면, s3 로부터 이미지 조회
- Lambda@Edge를 사용하여 실시간으로 이미지 포맷 변경 및 리사이징 작동
- CloudFront에 리사이징된 이미지 저장
- 사용자 반환
