약 1년 전에 찍은 스크린샷들로 이제야 포스팅 하기…

MailedIt! 서비스에는 랜딩 페이지에 상당히 많은 양의 gif 파일이 들어간다. 움직이는 이미지는 시각적으로 완성도를 높이지만, 그 용량이 너무 크다는 게 문제였다.

특히 아래 보이는 gif 파일이 랜딩페이지의 헤더 부분 전체에 들어가서 용량도 매우 크고, 로딩 속도도 매우 느리다. 아래 사진도 gif 파일 형식으로 첨부했는데, 로딩 시간이 상당히 긴 것을 확인할 수 있다…

보통 웹 사이트 접속 시 로딩이 3초 이상 걸리면 사용자 대부분이 이탈한다고 하는데, 아래 사진을 보면 서비스 내의 gif 파일을 로딩하는 데 대락 5초~7초 정도 걸린다는 것을 확인했다 😱

또한 Lighthouse 성능 검사에서도 아래 사진처럼 경고를 띄운다. 움직이는 컨텐츠를 보여주기에 GIF 파일을 사용하는 것은 비효율적이므로, MPEG4 또는 WebM 비디오 포맷을 사용하라는 이야기이다.

1. GIF vs MPEG

먼저 lighthouse 말대로 MPEG 형식으로 변환해 보았다. 구글에 gif to mpeg 와 같은 키워드로 검색하면 변환해 주는 사이트들이 많이 나온다.

사진을 확인해 보면 용량이 약 2배에서 크게는 4배까지 줄어든 것을 확인할 수 있다! 😮

2. WebP

그렇다면 WebP 형식은 어떨까? 사실 이때 WebP라는 포맷에 대해 처음 들어봤다.

WebP는 이미지 기반 포맷으로, gif뿐만 아니라 png, jpg 형식의 파일도 모두 WebP로 변환이 가능하다. 기존의 png, jpg와 비슷한 품질을 유지하면서 용량을 대폭 줄일 수 있기 때문에 매우 유용하다고 한다.

구글에 gif to webp 같은 키워드로 검색하면 변환해 주는 사이트들이 많이 나온다! 이중 하나로 들어가 변환 작업을 수행했다.

첫 번째 사진이 GIF 형식일 때의 파일 용량을 나타내고, 두 번째 사진이 WebP 형식일 때의 용량을 보여준다. 그런데 생각했던 것보다 크게 용량이 줄어들었다는 느낌은 없어서 약간 실망하긴 했다…

3. WebM

그래서 더 찾아보니 WebM이라는 포맷을 알게 되었는데, 이는 웹에 최적화된 비디오 기반 포맷이라 하여 또 다시 변환 작업을 시도해 보았다.

4. GIF vs MPEG vs WebM

순서대로 GIF - MPEG - WebM 파일일 때의 용량이다. 확실히 WebM을 사용했을 때 용량이 대폭 줄어든 것을 확인할 수 있다 🥹😮

로딩 시간도 기존에는 5s ~ 7s 정도 걸렸다면, WebM 사용 후 1ms ~ 2ms로 대폭 줄어든 것을 확인할 수 있다! 👏🏻👏🏻

마무리

평소 최적화에 관심이 많아서 이것저것 실험해 보는 기분이라 아주 재미있던 작업이었다 😚 사실 MailedIt! 서비스 특성상 랜딩 페이지를 제외하고 이미지가 많이 사용되지는 않아서 확장자 변경 작업 정도만 시도해 보았다. 다음에 이미지 위주의 서비스를 개인 프로젝트로 시도하여 더 다양한 최적화 작업을 시도해 보고자 한다!

아래 Reference에 달아놓은 이미지 최적화 관련 글이 많은 도움이 되었고, 그 글에 나온 방법 모두 사용하여 공부해 보고 싶다 😁

Reference

• Thumbnail Image on Freepik
• 웹사이트 최적화 방법 - 이미지 파트