프론트엔드 면접(이미지 최적화)

1. 이미지 최적화 경험이 있던데 어떤 방식으로 진행되었는지 설명해주세요.

온라인 졸업전시 사이트를 운영하며 이미지 최적화를 진행했습니다. 20MB이상의 용량이 큰 이미지를 주로 사용하고 있던 졸업작품 사이트의 특성을 고려하여 사용자가 긴 로딩없이 빠르게 작품을 감상할 수 있도록 이미지 최적화를 진행했습니다.

 

먼저 파일 포맷을 변경하는 작업을 진행했습니다. webp 포맷을 사용하여 용량을 개선했는데요, webp 포맷은 구글에서 발표한 포맷으로 압축 효과가 좋아 많은 용량을 줄일 수 있기 때문에 png 포맷에서 webp로 변경하게 되었습니다. 그 결과 png 포맷일때보다 31%의 용량 개선이 있었습니다. 

 

두번째로 이미지 사이즈가 실제 웹사이트에서 사용하는 것보다 1.5배정도 큰 사이즈로 사용되고 있어서 웹페이지에서 사용하는 최대 사이즈의 이미지로 맞추어 제공하였습니다. 이를 통해 추가적인 용량 개선을 이루었습니다.

 

마지막으로 AWS cloudfront에서 제공하는 CDN 기술을 이용하여 엣지 스테이션에 이미지 리소스를 캐싱하여 사용할 수 있도록 하였습니다. 이를 통해 사용자는 캐싱된 이미지를 더 빠르게 로딩할 수 있었습니다.

 

아직 좀 다듬어지지 않은 것 같아서 좀 더 다듬어야겠다..😅