Frontend 이미지 최적화하기

이미지 최적화를 하게된 계기

한동대학교 온라인 졸업전시 프로젝트(One In Christ)에 1인 개발자로 참여했습니다. 참여하겠다고 생각한 순간부터 가장 먼저 떠오른 생각은 이미지 최적화였습니다. 왜냐하면 디자인학부 졸업 전시회의 특성상 이미지를 가장 많이 사용하고, 디자인 작품이다보니 이미지 용량이 20MB 이상 차지하는 것이 대부분이라 웹 성능에 영향을 미칠 것이라고 생각했기 때문입니다.
 
특히 작품들이 나열되어 있는 works 페이지의 경우 여러 작품들이 한 번에 로딩되어야 하기 때문에 웹서버로부터 이미지를 요청하고 응답받는 데 시간이 오래걸릴 것이라 예상했습니다. 이는 웹사이트의 성능을 낮추기 때문에 좋지 않은 사용자 경험을 야기할 것이라고 판단했습니다.

---

이미지 최적화 방법

1️⃣  이미지 포맷 변경(webp 사용)

이미지 포맷을 webp로 변경하여 31%의 용량 개선을 이뤘습니다.

기존에는 PNG 포맷으로 작품을 제출받으려고 했는데 PNG 포맷이 webp 보다 용량이 더 크기 때문에 파일 포맷을 변경해보기로 했습니다. webp는 구글이 개발한 포맷으로 높은 압축률에도 좋은 화질을 유지합니다.
 
하지만 저는 파일포맷을 변경하는 라이브러리를 사용하지 않고 디자이너들에게 webp 포맷으로 제출하도록 요청했습니다.
AWS 프리티어를 사용해야했던 저는 PNG의 용량을 다 S3 저장소에 저장할 수 없었기 때문이었습니다. 따라서 S3에 webp로 변환한 이미지들을 저장하였고, PNG를 사용할 때보다 31%의 용량 개선을 이루었습니다.

2️⃣  이미지 사이즈 변경

필요한 사이즈보다 더 큰 이미지 사이즈는 더 많은 용량을 차지하게 합니다.
저희는 반응형을 지원하는 웹사이트였는데요, 이러한 프로젝트의 상황에 따라 저는 사용할 가장 큰 이미지의 크기를 데스크탑을 기준으로 두었고, 불필요한 용량을 차지하지 않도록 추가적인 용량을 개선했습니다. 
 
디자이너들에게 처음부터 최대사이즈 이미지를 공지했기 때문에 이를 통한 개선된 지표를 계산하지 못했지만, 불필요한 용량을 사용하지 않았다는 점에서는 꼭 해야하는 작업이라고 생각합니다.
 
하지만 디자이너 제출물 정리에 시간과 비용이 많이 들어 더 큰 이미지를 사용해야 할 때 디자이너들에게 추가제출을 요청하기가 어려웠습니다. 따라서 이미지 크기 확장 시 화질 저하가 발생했고, 웹디자인 수정에 제한이 있었습니다.
이를 통해 사전 수정 가능성을 검토하고 이미지 제출을 요청하는 중요성을 깨달았습니다.

3️⃣  CDN 구축

LCP 점수 최대 80%를 개선했습니다.

AWS CloudFront의 CDN 기술을 사용하여 배포된 리소스와 이미지가 엣지 스테이션에 캐싱될 수 있도록 구축했습니다. 이 과정에서 Github Actions를 사용하여 CI/CD 파이프라인을 구축하였고, 배포시 자동으로 무효화가 진행되도록 했습니다.
 
캐시된 파일을 사용함으로써, 용량이 큰 비디오로 인해 4.19s의 LCP 점수를 보였던 랜딩페이지의 경우 766ms로 개선되었고, 용량이 큰 이미지를 사용하는 작품페이지도 3.34s에서 1.51s로 로딩 속도가 개선되었습니다. 

 
하지만 CDN을 처음 구축해보는 사람이라면 한번쯤을 겪을 문제를 저 역시도 겪었는데요, 바로 소스코드의 업데이트가 발생했을 때 업데이트된 리소스가 엣지 스테이션까지 업데이트되지 않는 문제입니다. 해당 문제는 아래 포스팅에서 다뤘으니 도움이 되셨으면 좋겠습니다.
 

2024.10.13 - [분류 전체보기] - AWS cloudfront 배포 화면이 S3 결과와 다른 이유(feat. 무효화)

AWS cloudfront 배포 화면이 S3 결과와 다른 이유(feat. 무효화)

---

간단하게 이미지 최적화 방법에 대해 정리해봤는데요, 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다.