webp 움짤 압축은 용량을 얼마나 줄여주나

IOS 14 업데이트로 드디어 사파리에서도 webp포맷을 지원한다.지금 만들고 있는 사이트가 이미지를 많이 쓰는편이라 트래픽이나 저장공간이 걱정되었는데 모든 이미지를 webp 포맷으로 이용하기로 함.

 

 

gif의 경우

아이즈원 나경 짤방(gif) 7.5메가

 

티스토리에 webp가 첨부가 안되서 동영상으로 찍음.

좌측이 일반압축(5.6mb) 으로 25프로 정도의 크기가 압축되었고

우측은 손실압축(1mb) 으로 86프로 정도 크기가 압축됨.

 

내 눈에는 두 움짤의 품질차이를 크게 못느끼겠음

하지만 86프로 크기 압축은 굉장히 놀랍다.

 

 

5.6메가 짜리 겨울왕국 움짤로 해보니 손실압축으로 1.5메가로 70퍼센트 정도 압축이됨.

위 아이즈원 짤방보단 압축률이 낮다.

 

이건 6.3mb -> 0.73mb로 88프로 손실압축.

 

보수적으로 70프로 이상 이미지 크기를 줄일 수 있었다.

 

 

---

 

처음엔 sharp.js(github.com/lovell/sharp)를 이용했으나 이 라이브러리는 큰 이미지의 경우 에러가 남(processed image is too large for the webp format)

찾아보니 별 다른 해결법이 없어서 다른 라이브러리 webp-converter(www.npmjs.com/package/webp-converter)를 사용함.

구글에서 공식적으로 제공해주는 webp 변환 인코더를 그대로 js 파일에서 쓰게해줌.

옵션도 구글 공식 사이트에 나오는 옵션을 그대로 쓸 수 있음. - (developers.google.com/speed/webp/docs/using)

 

const webp = require("webp-converter")

if (req.file.mimetype === "image/gif") {
  await webp.gwebp(req.file.path, req.file.destination + webpName, "-lossy")
} else {
  await webp.cwebp(req.file.path, req.file.destination + webpName)
}

multer로 일단 png/jpg/gif를 그대로 저장하고 해당 파일을 webp-converter로 불러와서 webp 포맷으로 변환시킨 파일을 저장 -> 기존파일 삭제 이렇게 구현함.