Imagemin을 사용하여 이미지 압축

Katie Hempenius
Katie Hempenius

Shorts가 중요한 이유

압축되지 않은 이미지는 페이지를 불필요한 바이트로 팽창시킵니다. 이미지는 최대 콘텐츠 렌더링 시간 (LCP)의 후보가 될 수 있으므로 불필요한 바이트로 인해 리소스 로드 시간이 불필요하게 늘어나 LCP 시간이 길어질 수 있습니다.

오른쪽 사진은 왼쪽보다 40% 작지만 일반 사용자와 똑같아 보일 수 있습니다.

20 KB

12 KB

측정

Lighthouse를 실행하여 이미지를 압축하여 페이지 로드를 개선할 수 있는지 확인합니다. 이러한 기회는 '효율적인 이미지 인코딩' 아래에 나와 있습니다.

이미지

이미지 최솟값

Imagemin은 다양한 이미지 형식을 지원하고 빌드 스크립트 및 빌드 도구와 쉽게 통합되므로 이미지 압축에 탁월한 선택입니다. Imagemin은 CLInpm 모듈로 사용할 수 있습니다. 일반적으로 더 많은 구성 옵션을 제공하기 때문에 npm 모듈이 최상의 선택이지만, 코드를 사용하지 않고 Imagemin을 사용해 보려는 경우에는 CLI가 좋은 대안이 될 수 있습니다.

플러그인

Imagemin은 '플러그인'을 중심으로 빌드됩니다. 플러그인은 특정 이미지 형식을 압축하는 npm 패키지입니다 (예: 'mozjpeg'는 JPEG를 압축함). 인기 있는 이미지 형식에는 선택할 수 있는 여러 플러그인이 있을 수 있습니다.

플러그인을 선택할 때 고려해야 할 가장 중요한 사항은 플러그인이 '손실'인지 '무손실'인지입니다. 무손실 압축에서는 데이터가 손실되지 않습니다. 손실 압축은 파일 크기를 줄이지만 이미지 품질이 저하될 수 있습니다. 플러그인에서 '손실'인지 '무손실'인지 언급하지 않으면 API를 통해 출력의 이미지 품질을 지정할 수 있으면 '손실'이라고 알 수 있습니다.

대부분의 경우 손실(lossy) 플러그인이 최선의 선택입니다. 파일 크기를 크게 절약할 수 있으며 필요에 맞게 압축 수준을 맞춤설정할 수 있습니다. 아래 표에는 많이 사용되는 Imagemin 플러그인이 나열되어 있습니다. 이 외에도 다양한 플러그인이 제공되지만 프로젝트에 적합합니다.

Imagemin CLI

Imagemin CLI는 imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant, imagemin-svgo라는 5가지 플러그인과 호환됩니다. Imagemin은 입력의 이미지 형식에 따라 적절한 플러그인을 사용합니다.

'images/' 디렉터리의 이미지를 압축하여 동일한 디렉터리에 저장하려면 다음 명령어를 실행합니다 (원본 파일 덮어쓰기).

$ imagemin images/* --out-dir=images

Imagemin npm 모듈

이러한 빌드 도구 중 하나를 사용하는 경우 webpack, gulp 또는 grunt를 사용하여 Imagemin Codelab을 확인하세요.

Imagemin만 노드 스크립트로 사용할 수도 있습니다. 이 코드는 'imagemin-mozjpeg' 플러그인을 사용하여 JPEG 파일을 50 품질로 압축합니다 ('0'이 최악, '100'이 최고).

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();