[Node.js] PNG to webp Converter 구현하기

 

webp란?

 

이미지를 포맷하는 방식은 JPEG, JPG, PNG 등의 포맷방식을 사용합니다. JPEG는 손실 압출 방법으로 이미지가 어떤 연속된 바이트를 가지고 있는지를 규정하고 1677만 7216색을 표현합니다. 1992년에 최초 발표된 기술입니다. PNG는 무손실 압축 방법을 사용하며 32비트 트루컬러를 사용합니다. 1996년에 발표되었습니다. 현재 가장 많이 사용되는 이미지 포맷 방식이지만, 출시 년도가 30년이 다되어 갑니다. 지금은 새로운 이미지 포맷방식인 webp 방식을 사용할 때 입니다.

webp는 2010년 구글에서 제작한 이미지 포맷으로 손실 압축방식과 무손실 압축방식 모두 지원합니다. 구글이 webp를 제작해 무료로 공급하는 이유는 트래픽으로 인한 서버 부담 최소화 때문입니다. 무거운 JPEG, PNG 파일들이 다 수 담긴 웹페이지도 렌더링을 해야 하는 상황에서 좀더 가벼운 이미지 파일을 만들기 위한 방법이라고 이해하시면 됩니다. 대표적으로 Youtube의 썸네일도 webp 방식을 사용합니다.

 

 

 

 

블로그를 운영하시는 분들이라면 webp로 이미지를 올리는게 구글 랭킹 상승에 도움이 됩니다. webp는 이미지 용량을 엄청나게 줄여주고 이로 인해 웹 코어 바이탈 점수가 올라가기 때문입니다. webp converting을 지원하는 무료 사이트들도 많지만 갯수의 제한이 걸린 곳이 대부분이기 때문에 차라리 직접 코드를 작성하셔서 사용하시는게 편합니다.

 

 

webp 변경 방법

 

webp로 포맷을 변경하기 위해서는 npm의 imagemin 모듈을 사용하시면 됩니다. 먼저 프로젝트를 시작합니다. 우리는 JPEG , PNG 를 webp로 변경할 예정이기 때문에 imagemin-webp 모듈을 사용합니다. 만약 webp에서 JPEG으로 변경하신다면 imagemin-jepgtran 모듈을 사용하시면 됩니다.

 

$ npm init
$ npm i imagemin imagemin-webp
$ npm i imagemin-jpegtran
$ npm i imagemin-pngquant

 

package.json파일을 수정합니다. 우리는 Common JS가 아닌 ESM를 사용하기 때문에 type에 module을 적어줍니다.

{
  "dependencies": {
    "imagemin": "^8.0.1",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-pngquant": "^9.0.2",
    "imagemin-webp": "^7.0.0",
    "webp-converter": "^2.3.3"
  },
  "name": "convertpngtowebp",
  "version": "1.0.0",
  "main": "png2webp.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

 

이제 png2webp.js 파일을 생성하시고, 아래 코드를 추가하시면 됩니다. 비동기 함수를 사용하기 때문에 즉시 실행함수에 async를 붙여줘야 하시지만 이 코드로도 정상적으로 converting은 진행됩니다.(imagemin 공식 홈페이지에서 제시하고 있는 예제입니다.)

 

 

 

 

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';

const files = await imagemin(['sources/*.{jpg,png}'], {
	destination: 'build/images',
	plugins: [
        imageminWebp()
	]
});

// async 적용
(async ()=>{
    const files = await imagemin(['sources/*.{jpg,png}'], {
        destination: 'build/images',
        plugins: [
            // imageminJpegtran(),
            // imageminPngquant({
            // 	quality: [0.6, 0.8]
            // })
            imageminWebp()
        ]
    });
})();

 

Github Repository (PNG2webp)

 

sources 폴더에 변환할 이미지를 추가하고 위 코드를 실행해줍니다.

$ node png2webp.js

 

build/images 폴더가 새로 생성되고 webp로 변환된 이미지들이 저장됩니다. 

.
├── build
│   └── images
│       ├── JPG파일.webp
│       └── PNG파일.webp
├── package.json
├── package-lock.json
├── png2webp.js
└── sources
    ├── JPG파일.jpg
    └── PNG파일.png

 

 

변경된 이미지들을 비교해볼까요? 먼저 JPEG의 경우 69kb에서 7.6kb로 약 9.2배 용량이 감소했습니다. PNG파일의 경우 5.7배 용량이 감소했습니다. JPEG는 손실 압축방법으로, 이 경우에 더 큰 압축효과를 보이고 있습니다. 

 

 

 

[Blockchain] NFT 투자 제대로 알고 하자 (암호화폐, 블록체인)

 

[Blockchain] 블록체인 코인 토큰 차이

 

[Security] HTTP Cookie란?