png to webp 파일 변환

왜 webp인가?

• 2019년 google에서 개발한 webp라는 이미지 형식을 내놓았습니다.
• webp는 VP8 or VP9 비디오 코덱을 사용하여 압축하는 알고리즘을 사용합니다. 이 알고리즘은 예측 기반 방식을 사용하며 중복되는 정보를 제거하고 압축률을 높입니다.
• Chrome, Firefox, edge 지원하며, ie(deprecated) 미지원입니다.

적용했을때 얻을수 있는 이점은

• 용량 -50% 절감
• client download 속도 -50% 절감

  • 이 수치는 개인적인 측정값이니 프로젝트 마다 차이가 있을 수 있습니다.

주의할 점

• Local환경에서는 큰차이가 없거나 오히려 webp보다 png가 빠르경우도 있습니다.

png to webp converter

• nodeJS 프로젝트 파일을 생성합니다.

  mkdir image-converter && cd image-converter

• nodeJS 프로젝트 초기설정을 합니다.

  npm init image-converter

  or

  yarn init image-converter

• webp 전환을 위한 module을 설치합니다.

  npm install imagemin imagemin-webp

  or

  yarn add imagemin imagemin-webp

• convert.mjs file을 생성합니다.

  touch convert.mjs

  import imagemin from 'imagemin';
  import imageminWebp from 'imagemin-webp';
  
  const inputFolder = '/'; // 변환할 PNG 이미지 폴더 경로
  const outputFolder = '/'; // WebP 이미지 출력 폴더 경로
  
  (async () => {
    const files = await imagemin([`${inputFolder}/*.png`], {
      destination: outputFolder,
      plugins: [imageminWebp({ quality: 100 })], // 원하는 퀄리티로 조정
    });
  
    console.log(`${files.length} 개의 이미지가 WebP로 변환되었습니다.`);
  })();

• 원하는 경로를 설정 후 실행합니다.

  node --experimental-modules convert.mjs