imgproxy를 사용한 이미지 캐시 서버의 효과

필자가 운영하고 있는 블로그에 Caddy + Nginx + imgproxy 조합의 이미지 캐시 서버를 구축해서 연동한지 1개월 하고도 10여일이 넘게 지났다. 처음 구축했을 때는 안정성을 훼손하지 않을까 염려했는데 성능이나 안정성 측면에서 성공적이라 생각된다.

필자의 블로그에는 대충 어림잡아도 100~250 KB 크기의 이미지 파일이 적게는 3~5개, 많게는 30~40개의 이미지까지도 첨부되기에 포스트 1개만 해도 제법 큰 트래픽이 발생한다.

필자의 워드프레스 블로그(blogger.pe.kr)에는 포스트를 작성할 때 JPG 포맷의 이미지를 업로드 하고 있다. 그리고 검색엔진 등을 통해 누군가 블로그에 방문하게 되면 문자 기반 컨텐츠는 워드프레스에 플러그인으로 설치되어 있는 WP Super Cache가 정적 HTML 문서 캐시를 생성해 응답하고, 이미지 파일은 별도로 구축되어 있는 이미지 캐시서버(img.blogger.pe.kr)의 Nginx가 imgproxy를 연동해 webp로 변환하여 캐시에 저장하고 있던 파일을 브라우저로 전송하도록 역할이 분리되어 있다.

워드프레스 블로그의 이미지 캐시서버 구축하기

원본과 캐싱된 이미지의 크기 비교

동일한 이미지 파일을 webp로 변환하면 Jpg 포맷과 비교하여 20~30%까지 줄어든다고 알려져 있다. 그래서 이번에 직접 확인을 해봤다. 먼저 워드프레스에 저장되어 있는 JPG 포맷의 이미지 용량이다.

이 파일은 한라산 산행 후 카페에서 쉬면서 촬영한 일몰 사진이다. JPG 파일 포맷이고 해상도는 1200×1600이다. 이미지 파일의 크기는 123 KB다. JPG 파일의 품질을 약 80% 정도로 설정하여 용량을 한번 줄인 이미지 파일이다.

다음은 이 파일이 포함된 포스트에 접근하여 “다른 이름으로 저장하기”를 통해 저장한 파일의 크기다.

JPG 포맷에서 WEBP 포맷으로 변환된 이미지의 크기는 123 KB 에서 74.0 KB로 매우 극적으로 용량이 줄어 있는 것을 확인할 수 있다. 대략 이미지 파일의 크기가 60%로 줄어들었다. 약 40%의 트래픽 절감 효과와 텍스트 처리와 이미지 처리를 분산하여 더 빠르게 응답하는 효과를 볼 수 있다.

게다가 imgproxy는 webp 포맷을 지원하지 않는 구형 웹브라우저로 접속하는 경우에는 자동으로 jpg 파일로 응답을 하는 착한 프록시다.

당연히 글을 작성할 때 첨부한 이미지의 개수가 많을 수록 더욱 극적인 속도 개선이 이루어진다고 보면 된다.

#이미지캐시서버 #imgproxy