이미지 포맷 가이드: PNG, JPG, WebP, SVG — 언제 사용할까

잘못된 이미지 포맷을 선택하면 대역폭을 낭비하고, 페이지 로드를 느리게 하며, 시각적 품질을 저하시킵니다. 각 포맷에는 고유한 강점이 있습니다 — 사진은 한 포맷에서, 로고는 다른 포맷에서, 아이콘은 또 다른 포맷에서 최상으로 보입니다. 이 가이드는 매번 올바른 선택을 하도록 도와줍니다.

빠른 결정 차트

콘텐츠 유형	최적 포맷	대안
사진	WebP (손실)	JPEG
스크린샷	PNG	WebP (무손실)
로고	SVG	PNG (투명도 포함)
아이콘	SVG	PNG (소형)
일러스트레이션	SVG	WebP
애니메이션	WebP (애니메이션)	GIF
인쇄	TIFF/PNG	JPEG (품질 95+)

포맷 심층 분석

JPEG (JPG)

1992년부터 사진의 표준. 이산 코사인 변환(DCT)에 기반한 손실 압축을 사용합니다.

적합: 사진, 자연 풍경, 그래디언트가 있는 복잡한 이미지. 피해야 할 때: 텍스트, 로고, 스크린샷, 날카로운 가장자리가 있는 이미지.

품질 최적점:

품질 85: 대부분의 사진에 시각적으로 무손실 (최적 기본값)
품질 75: 웹 썸네일에 좋은 균형
품질 95: 인쇄 또는 보관용 거의 무손실

팁: JPEG는 투명도를 지원하지 않습니다. 투명 배경의 사진이 필요하면 WebP 또는 PNG를 사용하세요.

PNG

무손실 압축 — 모든 픽셀이 정확히 보존됩니다. 전체 알파 투명도를 지원합니다.

적합: 스크린샷, UI 요소, 색상 배경 위의 로고, 텍스트가 있는 모든 이미지. 피해야 할 때: 사진 (파일이 JPEG보다 5-10배 더 큼).

PNG-8 vs PNG-24:

PNG-8: 256색, 작은 파일, 간단한 그래픽에 적합
PNG-24: 1600만 색, 큰 파일, 사진이나 그래디언트에 필요

WebP

손실 및 무손실 압축, 투명도, 애니메이션을 모두 지원하는 Google의 최신 포맷.

적합: 웹에서의 모든 것 — 최고의 범용 포맷. 피해야 할 때: 인쇄 (제한된 소프트웨어 지원), 이메일 (일부 클라이언트가 WebP를 표시하지 않음).

JPEG 대비 장점: 동등한 품질에서 25-35% 더 작음, 투명도 지원. PNG 대비 장점: 무손실 이미지에서 26% 더 작음, 손실 압축 지원. 브라우저 지원: 전 세계적으로 97%+.

이미지 최적화기로 이미지를 변환하고 최적화하세요.

SVG

XML 기반의 벡터 포맷. 이미지가 픽셀이 아닌 수학적 도형으로 정의됩니다.

적합: 로고, 아이콘, 일러스트레이션, 다이어그램, 확장이 필요한 모든 그래픽. 피해야 할 때: 사진, 복잡한 래스터 이미지.

고유 장점:

품질 손실 없이 무한 확장
간단한 그래픽에 매우 작은 파일 크기 (종종 1 KB 미만)
CSS로 스타일 지정 가능 (색상 변경, 애니메이션)
접근 가능 (SVG 내 텍스트가 검색 가능하고 스크린 리더로 읽을 수 있음)
모든 텍스트 편집기에서 편집 가능

<!-- SVG 아이콘: 200바이트 vs PNG: 5,000바이트 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

AV1 비디오 코덱 기반의 최신 포맷. WebP보다 우수한 압축.

적합: 히어로 이미지, 제품 사진, 최대 압축이 중요한 모든 고우선 이미지. 고려사항: 92% 브라우저 지원, 느린 인코딩, 제한된 편집 도구 지원. 절감: 동등한 품질에서 JPEG보다 50% 더 작음.

GIF

가장 오래된 웹 이미지 포맷 (1987). 256색으로 제한.

적합: 간단한 애니메이션 (하지만 WebP 애니메이션이 더 나음). 피해야 할 때: 거의 모든 것 — WebP 또는 APNG가 우수한 대안. 레거시 사용: 메시징 앱과 소셜 미디어에서 반응/밈 용도로 여전히 널리 지원됨.

크기 비교 (동일 이미지)

웹용으로 최적화된 1200×800 사진:

포맷	파일 크기	품질	투명도
PNG (무손실)	2,400 KB	완벽	예
JPEG (품질 85)	180 KB	우수	아니오
WebP (품질 80)	120 KB	우수	예
AVIF (품질 70)	85 KB	우수	예

동일한 그래픽 (로고, 500×200):

포맷	파일 크기
SVG	3 KB
PNG-8	15 KB
PNG-24	45 KB
WebP (무손실)	12 KB

최신 모범 사례: Picture 요소

각 브라우저에 최적의 포맷을 제공하세요:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="설명" loading="lazy">
</picture>

브라우저가 지원하는 첫 번째 포맷을 선택합니다. 모든 사용자가 가장 작은 크기에서 최상의 품질을 얻습니다.

최적화 워크플로우

최고 품질의 원본으로 시작 — 이전에 압축된 이미지에서 최적화하지 마세요
위의 결정 차트로 올바른 포맷 선택
디스플레이 크기로 리사이즈 — 800px 컨테이너에 4000px 이미지를 제공하지 마세요
압축 — 빠른 최적화를 위해 이미지 압축기 사용
반응형 크기 제공 — 다른 뷰포트 너비를 위해 srcset 사용
지연 로딩 활성화 — 화면 아래 이미지에 loading="lazy"

이미지 최적화에 대한 자세한 내용은 이미지 최적화 가이드를 참조하세요.

자주 묻는 질문

모든 이미지를 WebP로 변환해야 하나요?

웹 전달에는 그렇습니다 — WebP는 97%+ 브라우저 지원을 가진 최고의 범용 포맷입니다. 원본 파일은 보관 및 편집을 위해 네이티브 포맷(JPEG, PNG)으로 유지하고, 서빙을 위해 WebP로 변환하세요. WebP를 지원하지 않는 드문 브라우저를 위해 <picture> 요소로 JPEG 폴백을 제공하세요.

AVIF는 프로덕션에 사용할 준비가 되었나요?

AVIF는 92%+ 브라우저 지원으로 프로덕션에 준비되어 있습니다. 주요 고려사항은 느린 인코딩 (WebP보다 3-10배 느림)과 제한된 편집 도구 지원입니다. 빌드 중 이미지가 한 번 인코딩되는 정적 웹사이트에서는 인코딩 속도가 문제가 되지 않습니다. 항상 WebP 또는 JPEG 폴백을 제공하세요.