학교 디자인과 수업 중에 프론트엔드 관련 수업이 있어서 듣던 중 jQuery를 이용한 팀 프로젝트를 진행하게 되었다.
jQuery와 Teachable Machine 2개의 라이브러리만 사용하고 추가적인 라이브러리 없이 HTML, CSS, Javascript만을 사용하는 수업이기 때문에 조금은 어색한 시간이었다.
디자인과이신 팀원분께서 이미지를 PNG와 JPEG를 섞어서 주셨고 별생각 없이 받아서 사용했다. 그렇게 만들어진 프로젝트를 github.io를 통해 배포를 했다. 그런데 첫 이미지 다운로드에 시간이 생각보다 걸려서 이미지가 안 보이거나 다음 이미지를 가져오는데 시간이 좀 걸렸다.
다운로드 시간을 조금이라도 단축하고자 모든 이미지를 WebP로 바꾸는 작업을 진행하게 되었다.
WebP란?
WebP는 구글에서 개발한 손실 및 무손실 압축을 제공하는 이미지 포맷이다.
무손실 압축의 경우 PNG 보다 20~30% 정도 파일이 더 작아진다. 손실 압축의 경우 JPEG 보다 30% 정도 파일이 더 작아진다.
아래는 WebP로 변환하기 전과 후 비교 사진이다.
webp로 변환 전
webp로 변환 후
변환 후 2.3MB가 줄어들어 약 57.5%가 감소한 것을 볼 수 있다.
그렇다면 이미지 최적화를 고려해야 하는 이유는 무엇일까?
이미지 최적화를 고려해야 하는 이유
PageSpeed Tools에 따르면 GIF, PNG, JPEG 형식은 전체 인터넷 이미지 트래픽의 96%를 차지한다고 한다. 그만큼 이미지가 성능에 미치는 영향이 크다는 것이다.
이미지 최적화를 하면 다음과 같은 이점을 얻을 수 있다.
- 사용자 경험 향상: 페이지 로딩이 길어질수록 유저 바운싱(이탈률)이 늘어난다.
- 더 나은 페이지 성능: 작고 최적화된 이미지는 페이지 로드를 단축시킨다.
- 향상된 가시성(visibility): 이미지 최적화에는 SEO 이점도 있다. 최적화된 이미지는 검색 엔진에 맥락 정보를 제공하고 시각적 콘텐츠의 접근성을 높여 구글의 이미지 검색에서 이미지가 검색 결과의 상단에 노출될 수 있도록 보장해 준다.
Nextjs에서는 Image 컴포넌트가 자동으로 최적화를 진행해 주기 때문에 잘 활용하면 좋을 것 같다.
마무리하며
이번 글에서는 짧게 WebP란 무엇이고 이미지 최적화가 왜 중요한지에 대해 알아보았다.
이미지들을 WebP로 바꾸는 과정에서 Nextjs에서 해주는 이미지 최적화가 얼마나 좋은 것인지 깨닫게 되는 계기가 되었다.
