웹팩으로 사이트 번들링을 했지만, 주된 콘텐츠가 이미지여서 실제 성능 개선을 체감하기 어려웠습니다.

그래서 이미지 최적화를 시도하기로 했고, PNG 이미지를 WebP 포맷으로 변환하기로 결정했습니다.

PNG와 WebP 간단 비교

• PNG: 무손실 압축으로 높은 품질의 이미지를 유지하지만, 파일 크기가 큽니다.
• WebP: 구글이 개발한 이미지 포맷으로, 손실/무손실 압축을 모두 지원하며 동일한 품질에서 더 작은 파일 크기를 제공합니다.

직접 WebP로 변환하기

무료가 아니였습니다~!

온라인 WebP 변환 사이트를 찾아봤지만 대부분 사용이 불편하고 유료였습니다.

그래서 프로그래머답게 직접 변환 방법을 구현하기로 했습니다.

홈브루(Homebrew)로 변환 프로그램을 설치했습니다.

brew install webp

web.dev에서 제공하는 명령어로 이미지를 일괄 변환했습니다.