크롬의 lighthouse를 사용해 웹 성능을 측정해보면 결과창에서 Webp 사용을 권하는 걸 볼 수 있다.
웹의 한 페이지를 로드할 때 해당 페이지의 전체 용량과 로딩 속도에 이미지가 끼치는 영향력의 비중은 큰 편인데, 이걸 줄일 수 있다면 큰 폭의 성능 향상을 노려볼 수 있을 것이다.
WebP란?
2010년 구글에서 발표한 웹용 이미지 포맷으로, 일반적으로 이미지 품질 손실 없이 JPEG 및 JPEG 2000보다 평균 30% 더 압축된다고 한다.
이전엔 지원하는 브라우저가 많이 없었는데, caniuse에 따르면 이제 전세계 사용자들의 브라우저 중 97.4%가 지원하고 있다.
WebP보다 나중에 출시된 고성능의 포맷으론 AVIF와 JPEG XL이 있는데 지원률이 AVIF는 76%, JPEG XL은 0%...라서 지금으로선 WebP가 최선인듯 하다.
현재 본인의 프로젝트가 가져다쓰는 API는 webp를 지원하지 않기 때문에 페이지에서 사용되는 정적인 이미지들이라도 webp로 변환해보겠다.
1. cwebp 설치
cwebp는 구글이 직접 만든 WebP 변환기이다. 아래의 다운로드 페이지에서 운영체제에 맞는 버전의 압축파일을 다운로드한다.
2. cwebp 실행
원하는 위치에 압축을 해제하고 폴더를 연 뒤, bin폴더에 들어가면 cwebp.exe를 찾을 수 있다.
C:\나의\개인적인\경로\libwebp-1.2.4-windows-x64\bin
bin 안에 변환하고 싶은 이미지 파일들을 옮기고 해당 위치에서 cmd를 연 뒤 아래의 명령어를 입력하면 cwebp가 이미지를 webp로 변환해준다.
cwebp [options] 변환대상파일이름.확장자 -o 변환후파일이름.webp이때, cwebp.exe의 위치는 변환하려는 이미지와 같은 위치에 있기만 하면 되며, cmd는 cwebp.exe가 존재하는 경로에서 명령어를 실행해야 한다.
명령어 중 [options]에는 cwebp가 제공하는 여러가지 옵션을 넣을 수 있는데, 이 사이트에서 확인할 수 있다.
폴더 내에 존재하는 모든 파일들을 하나씩 변환해주기엔 시간이 너무 오래 걸리므로, 아래처럼 반복문을 사용해서 전부 변환해준다. 소괄호 안에는 변환할 이미지의 확장자를 입력하면 된다.
for %f in (*.png *.jpg *.tif) do cwebp.exe %f -o %~nf.webp3. 결과
webp로 변환하기 전과 후의 용량을 살펴보면, 기존의 30% 정도로 줄었음을 볼 수 있다.
Reference
https://web.dev/codelab-serve-images-webp/
https://hello-sunil.in/convert-multiple-images-webp/
