이미지 최적화: Node.js에서 PNG, JPG등을 WebP로 변환 및 압축

디지털 시대에 이미지는 우리의 브라우징 경험에서 중요한 역할을 맡고 있다. 그러나 문제는 이러한 이미지가 종종 상당한 대역폭을 차지하여 웹 사이트의 성능에 영향을 줄 수 있다는 것이다. 우리는 이미지 최적화라는 과정을 통해 이미지 크기를 줄여서 이 문제를 해결할 수 있다. 이 포스트에서는 PNG 및 JPG와 같은 이미지 파일을 WebP로 변환하고 Node.js를 사용하여 이미지를 압축하는 방법을 알아본다.

WebP를 선택하는 이유

Google에서 개발한 현대적인 이미지 형식인 WebP는 웹 이미지에 대한 우수한 비손실 및 손실 압축을 제공한다. PNG 및 JPG 파일을 WebP로 변환함으로써 이미지 품질을 저하시키지 않고도 더 작은 파일 크기를 얻어 웹 사이트의 로딩 속도를 높일 수 있다.

Node.js 설정하기

변환 프로세스를 시작하기 전에 Node.js가 설치되어 있는지 확인해야 한다. 설치되어 있지 않다면 해당 운영 체제에 맞게 다운로드 및 설치한다.

필요한 모듈 설치하기

이미지 변환에는 sharp 패키지를 사용하고, 이미지 압축에는 imagemin-webp 패키지를 사용한다.

npm install sharp imagemin imagemin-webp

이미지를 WebP로 변환하기

sharp 모듈을 사용하여 PNG 또는 JPG 이미지를 WebP로 변환한다. 입력 파일을 읽어와 WebP 형식으로 변환하는 방식이다.

const sharp = require('sharp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => console.log('이미지 변환 완료.'))
  .catch(err => console.error(err));

WebP 이미지 압축하기

이제 imagemin-webp 모듈을 사용하여 변환된 WebP 이미지를 압축해 본다.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['output.webp'], {
    destination: 'compressed_images',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });

  console.log('이미지 압축 완료.');
})();

전체 코드

const sharp = require('sharp');
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => {
    (async () => {
      await imagemin(['output.webp'], {
        destination: 'compressed_images',
        plugins: [
          imageminWebp({quality: 50})
        ]
      });

      console.log('이미지 변환 및 압축 완료.');
    })();
  })
  .catch(err => console.error(err));

이 전체 스크립트는 이미지를 WebP 형식으로 변환하고 압축한다.

결론

Node.js에서 PNG 및 JPG를 WebP로 변환하고 압축하는 효율적인 방법을 알아 보았다. 이를 통해 이미지를 최적화하고 웹사이트의 로딩 시간을 단축하며 더 나은 사용자 경험을 제공할 수 있다. 조금의 연습을 통해 이러한 단계들은 자연스러운 일처럼 익숙해질 것이다.

자주 묻는 질문

1. PNG나 JPG 대신에 WebP를 사용하는 이유는 무엇인가? WebP는 이미지 품질의 큰 손실 없이 파일 크기를 줄이는 우수한 압축을 제공한다.
2. 왜 이미지를 압축해야 하나요? 이미지 압축은 파일 크기를 줄여 웹 사이트의 로딩 시간을 크게 개선하고 대역폭을 절약할 수 있다.
3. 다른 프로그래밍 언어로 이 작업을 할 수 있을까요? Python, Java 등의 다른 언어도 이미지 변환 및 압축을 위한 라이브러리를 가지고 있다. 그러나 이 튜토리얼은 Node.js에 초점을 맞추고 있다.
4. 변환 또는 압축 과정이 실패하는 경우 어떻게 해야 하나요? Node.js 및 필요한 모듈이 올바르게 설치되었는지 확인해보자. 문제가 지속되는 경우 문제는 이미지 자체에 있을 수 있다.
5. 압축 수준을 조정할 수 있을까요? imagemin-webp 플러그인을 사용하여 압축 수준을 조정할 수 있다.