imageKit 라이브러리 사용 이유

s3 업로드시 이미지 리사이징을 위해서 imageKit 라이브러리를 사용했다.

 

동작은 s3에서 업로드 된 이미지를 가져올 때 imagekit 라이브러리를 통해서

webp 확장자로 변환해주면서 이미지 사이징을 줄여줘서 로딩속도 향상 효과를 불러온다.

 

실제 사용 후기

이미지 확장자를 webp로 변경하고 이미지 용량을 90% 이상 줄임

이미지 리사이징 전 jpeg 확장자에 67.5kb 확인

이미지 리사이징 후 webp 확장자에 1.6kb 확인

응답속도 약 16% 향상

리사이징 전 응답속도 2.30s

리사이징 후 응답속도 1.93s

 

정리

확장자를 크롬에서는 webp, 사파리에서는 jpeg 로 자동으로 변경해준다.

 

webp 란 웹피라고도 불리며 손실/비손실 압축 포맷이다.

현재 프로젝트에서 확인해보지 못했으나 예시 자료에서는
용량이 500kb -> 300kb 로 약 30% 줄었다고 볼 수 있다.

예시 자료

https://post.naver.com/viewer/postView.nhn?volumeNo=9688816&memberNo=1834