이미지 포맷의 완전 가이드: GIF, JPG, PNG 비교 및 전환 시기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자 및 디자이너 (중간 난이도)

핵심 요약

• JPEG: 사진에 적합한 손실 압축(lossy) 포맷. 파일 크기 감소에 효과적.
• PNG: 투명도 및 고품질 그래픽(로고, 스크린샷)에 최적화된 손실 없는 압축(lossless) 포맷.
• GIF: 간단한 애니메이션 및 256색 제한을 가진 손실 없는 압축(lossless) 포맷.
• WebP 및 AVIF 같은 모던 포맷은 더 높은 압축률을 제공하지만 브라우저 호환성 확인 필요.

섹션별 세부 요약

1. JPEG 포맷

• 손실 압축(lossy)으로 파일 크기 감소.
• 24비트 색 깊이(16.7백만 색).
• 투명도 및 애니메이션 지원 없음.
• 사진, 그라디언트가 많은 복잡한 이미지에 적합.
• 예시: 1920x1080 사진은 PNG(2.1MB) 대비 JPEG(156KB)로 90% 이상 크기 감소.

2. PNG 포맷

• 손실 없는 압축(lossless)으로 품질 보존.
• 24비트 또는 32비트(알파 채널 포함) 색 깊이 지원.
• 완전한 알파 투명도 제공.
• 로고, 아이콘, 텍스트가 포함된 그래픽, 스크린샷에 적합.
• PNG-8은 256색 팔레트 기반으로 간단한 그래픽에 유리.

3. GIF 포맷

• 8비트(256색) 제한.
• 기본 투명도(ON/OFF) 지원.
• 프레임 기반 애니메이션 지원.
• 간단한 애니메이션, 농담 이미지(meme), 기본 그래픽에 적합.

4. 파일 크기 비교

• 사진: PNG(2.1MB) vs JPEG(156KB).
• 투명 로고: PNG(45KB) vs JPEG(38KB, 투명도 없음) vs GIF(67KB, 색 제한).

5. 포맷 전환 시나리오

• 투명도 추가, 프린트 용도, 예시 이미지, 이메일 첨부, 소셜 미디어 업로드, 애니메이션 생성 등.

6. Node.js 예제: Sharp 라이브러리 활용

const sharp = require('sharp');
async function optimizeImage(inputPath, outputPath, format) {
  const options = {
    jpeg: { quality: 80, progressive: true },
    png: { compressionLevel: 9 },
    gif: { colors: 256 }
  };
  await sharp(inputPath)
    .toFormat(format, options[format])
    .toFile(outputPath);
}
await optimizeImage('photo.png', 'photo.jpg', 'jpeg');

결론

• 사진 → JPEG, 투명도 필요 → PNG, 간단한 애니메이션 → GIF.
• WebP 및 AVIF 같은 모던 포맷도 고려하되 브라우저 호환성 확인.
• Sharp 같은 도구로 프로그래밍 방식으로 이미지 전환 가능.
• 실제 프로젝트에 따라 포맷 테스트 및 성능 측정 필수.