웹 개발자를 위한 배치 이미지 압축 | Bulk Image Compressor

Published December 18, 2025

이미지는 대부분 웹사이트에서 가장 무거운 에셋입니다. 평균적으로 페이지 전체 무게의 40~60%를 차지합니다. 웹 개발자라면 이미지를 압축하지 않고 있다면, 아무리 코드가 깔끔해도 비대한 페이지를 제공하고 있는 것입니다.

문제는 압축을 할지 말지가 아니라, 워크플로우의 어디에서 압축이 이루어져야 하고 각 상황에 어떤 도구가 적합한지입니다.

개발 워크플로우에서 이미지 압축의 위치

개발 중 이미지를 압축할 수 있는 세 가지 주요 시점이 있습니다.

커밋 전. 버전 관리에 들어가기 전에 로컬에서 이미지를 최적화합니다. 이렇게 하면 저장소가 가벼워지고 모든 환경(스테이징, 프로덕션, 다른 개발자의 머신)에서 자동으로 최적화된 버전을 사용할 수 있습니다.

빌드 중. Vite나 webpack과 같은 빌드 도구가 에셋 파이프라인의 일부로 압축을 처리합니다. 소스 이미지는 저장소에서 최고 품질로 유지되고, 빌드 프로세스가 배포용 최적화 버전을 생성합니다.

CDN 계층에서. Cloudflare, Imgix, Cloudinary와 같은 서비스가 요청하는 기기와 브라우저에 따라 즉시 이미지를 변환하고 압축합니다.

각 접근 방식에는 장단점이 있으며, 이들을 결합할 수 있습니다.

온라인 도구 vs 빌드 플러그인

블로그 게시물용 스크린샷 배치를 압축하거나 아이콘 세트를 최적화하는 등 빠른 일회성 작업에는 온라인 도구가 가장 빠른 옵션입니다. Bulk Image Compressor를 열고 파일을 드롭한 다음 품질을 조정하고 다운로드하면 됩니다. 1분 이내에 완료됩니다.

빌드 플러그인은 지속적인 최적화를 자동으로 처리합니다. 실제로 어떻게 작동하는지 살펴보겠습니다.

Vite

Vite 사용자는 vite-plugin-imagemin 또는 유사한 플러그인을 사용할 수 있습니다:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

이 설정은 vite build 중에 이미지를 압축합니다. 소스 파일은 그대로 유지되고 출력 디렉토리에 최적화된 버전이 생성됩니다.

webpack

webpack에서는 image-minimizer-webpack-plugin이 동일한 작업을 수행합니다:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

언제 무엇을 사용해야 할까

다음과 같은 경우 온라인 도구를 사용하세요:

  • 프로젝트에 소수의 이미지를 추가하고 지금 바로 최적화하려는 경우
  • 최적화되지 않은 파일을 보낸 클라이언트나 디자이너의 콘텐츠로 작업하는 경우
  • 빌드 단계가 없는 프로젝트(정적 HTML, 간단한 사이트)인 경우
  • 커밋하기 전에 압축 결과를 시각적으로 확인하려는 경우

다음과 같은 경우 빌드 플러그인을 사용하세요:

  • 프로젝트에 이미 빌드 파이프라인이 있는 경우
  • 여러 개발자가 이미지를 기여하고 일관된 최적화를 원하는 경우
  • 형식 변환(예: WebP 버전 자동 생성)이 필요한 경우
  • 추후 재처리를 위해 저장소에 최고 품질의 소스 이미지를 보관하려는 경우

CI/CD 이미지 최적화

빌드 플러그인은 로컬 빌드 중에 실행되지만, CI/CD 파이프라인에 이미지 최적화를 추가할 수도 있습니다. 이렇게 하면 누가 커밋했든 관계없이 최적화되지 않은 이미지가 누락되는 것을 방지할 수 있습니다.

간단한 방법은 CI 파이프라인에서 이미지 파일 크기를 확인하는 스크립트를 실행하는 것입니다:

# 이미지가 500KB보다 크면 빌드 실패
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "비정상적으로 큰 이미지가 발견되었습니다. 배포 전에 압축하세요."
  exit 1
fi

CI에서 자동 압축을 위해 sharp-cli나 imagemin-cli 같은 도구가 빌드 단계로 이미지를 처리할 수 있습니다. 이렇게 하면 프로덕션에 압축되지 않은 상태로 배포되는 일이 없습니다.

지연 로딩과 반응형 이미지

압축만으로는 충분하지 않습니다. 이미지를 로딩하는 방식도 equally 중요합니다.

지연 로딩은 화면 밖의 이미지를 사용자가 스크롤할 때까지 로딩을 지연시킵니다. 접힌 부분 아래 모든 이미지에 loading="lazy"를 추가하세요. 히어로 이미지나 초기 페이지 로드 시 보이는 콘텐츠에는 지연 로딩을 사용하지 마세요. LCP 점수를 낮출 수 있습니다.

반응형 이미지는 화면 너비에 따라 다른 크기를 제공합니다. 데스크톱 모니터용 2400px 이미지를 휴대폰이 필요로 하지 않습니다. srcset과 sizes 속성을 사용하여 브라우저가 적절한 버전을 선택하도록 하세요:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="제품 사진"
  width="1600"
  height="1067"
  loading="lazy"
>

이러한 크기 변형은 빌드 프로세스의 일부로 생성하거나 업로드 전에 배치 도구로 생성하세요.

CDN 전송

CDN(Content Delivery Network)은 방문자와 지리적으로 가까운 서버에서 이미지를 제공합니다. 이는 지연 시간을 줄여주지만, 일부 CDN은 즉석 이미지 최적화도 제공합니다.

Cloudflare Image Resizing은 방문자의 브라우저에 따라 이미지를 WebP나 AVIF로 자동 크기 조정 및 변환할 수 있습니다. 직접 변형을 생성할 필요가 없습니다.

Imgix와 Cloudinary는 전용 이미지 CDN입니다. 하나의 고품질 소스를 업로드하면 URL 매개변수를 통해 요청하는 모든 크기, 형식, 품질을 생성합니다. 강력하지만 이미지당 비용이 추가됩니다.

대부분의 프로젝트에서는 업로드 전에 이미지를 압축하고 표준 CDN(Cloudflare, Fastly, AWS CloudFront)을 통해 제공하는 것으로 충분합니다. 수천 개의 사용자 업로드 이미지가 있고 동적 크기 조정이 필요한 경우에 전용 이미지 CDN이 적합합니다. 압축이 웹에 중요한 이유에 대한 배경 지식은 웹사이트 이미지에 압축이 필요한 이유 가이드에서 기본 사항을 다루고 있습니다.

개발자들이 흔히 하는 실수

최적화되지 않은 이미지를 커밋하는 경우. 저장소에 커밋된 5MB JPEG는 나중에 교체하더라도 git 역사에 영원히 남습니다. 커밋 전에 압축하세요.

사진에 PNG를 사용하는 경우. PNG는 그래픽, 스크린샷, 투명도가 필요한 이미지용입니다. 사진을 PNG로 저장하면 일반적으로 동일한 이미지를 JPEG이나 WebP로 저장한 것보다 3~5배 더 큽니다. 콘텐츠 유형에 맞는 올바른 형식을 사용하세요. 자세한 내용은 포맷 비교 가이드를 확인하세요.

너비와 높이 속성을 생략하는 경우. 명시적인 크기 없이 브라우저는 이미지가 로드될 때까지 얼마나 공간을 확보해야 할지 알 수 없습니다. 이는 레이아웃 시프트를 유발하여 CLS 점수를 낮추고 사용자에게 불편을 줍니다.

과도하게 압축하는 경우. 작은 파일을 얻기 위해 품질을 3040%로 낮추면 눈에 띄는 아티팩트가 발생합니다. 웹 이미지의 경우 7582% 품질이 크기와 외관 사이의 적절한 균형을 제공합니다.

이미지 크기를 무시하는 경우. 4000px 사진을 80% 품질로 압축하는 것은 좋지만, 페이지에 600px 너비로 표시된다면 여전히 필요한 것보다 훨씬 많은 픽셀을 전송하는 것입니다. 먼저 표시 크기에 맞게 조정한 다음 압축하세요.

WebP를 사용하지 않는 경우. 이제 WebP에 대한 브라우저 지원은 보편적입니다. 여전히 JPEG와 PNG만 사용하고 있다면 25~35%의 파일 크기 절감 효과를 놓치고 있는 것입니다.

실용적인 접근법

대부분의 웹 프로젝트에서는 다음 방법이 잘 작동합니다:

  1. Bulk Image Compressor 같은 온라인 도구나 로컬 스크립트를 사용하여 커밋 전에 이미지 크기를 조정하고 압축하세요.
  2. 누락된 이미지를 잡기 위해 안전망으로 빌드 플러그인을 추가하세요.
  3. HTML에서 지연 로딩과 반응형 이미지를 사용하세요.
  4. CDN을 통해 제공하세요.

처음부터 네 가지를 모두 할 필요는 없습니다. 첫 번째 단계부터 시작하세요. 그것만으로도 페이지 로딩 시간에 눈에 띄는 차이를 만들 수 있습니다.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor

Related Articles

일괄 이미지 압축 완벽 가이드

품질 설정부터 흔한 실수, 실용적인 팁까지 한 번에 여러 이미지를 압축하는 데 필요한 모든 것.

Read More

한 번에 수백 개의 이미지를 압축하는 방법

거대한 이미지 배치를 압축해야 하나요? 모든 상황에 맞는 올바른 설정으로 한 번에 수백 개의 파일을 처리하는 방법을 알아보세요.

Read More