이미지 포맷 완전 비교 가이드

JPG, PNG, WebP, AVIF, GIF… 다양한 이미지 포맷 중 어떤 것을 선택해야 할까요? 각 포맷의 특징과 최적 사용 사례를 알아봅니다.

한눈에 보는 포맷 비교표

이미지 포맷별 상세 특성 비교
포맷 압축 방식 투명도 애니메이션 브라우저 지원 상대 파일 크기
JPG 손실 압축 모든 브라우저 기준 (100%)
PNG 무손실 압축 모든 브라우저 크다 (130~200%)
WebP 손실/무손실 Chrome/FF/Safari 14+ 작다 (65~75%)
AVIF 손실/무손실 Chrome 85+/FF 93+/Safari 16+ 매우 작다 (50~65%)
GIF 무손실 (LZW) ✅ (1비트) 모든 브라우저 보통 (애니메이션 시 큼)

JPG (JPEG) – 사진의 표준

1992년에 등장한 JPG는 여전히 가장 널리 쓰이는 이미지 포맷입니다. 손실 압축 방식으로 파일 크기를 크게 줄일 수 있지만, 압축 시 원본 데이터의 일부가 버려집니다.

장점

  • 모든 기기, 운영체제, 브라우저에서 지원
  • 사진처럼 색상 변화가 많은 이미지에서 효율적
  • 품질 설정으로 파일 크기와 화질 균형 조절 가능

단점

  • 투명도(알파 채널) 미지원
  • 반복 저장 시 화질 저하 누적
  • 문자, 선 그래픽에서는 뭉개짐(아티팩트) 발생

권장 용도: 풍경 사진, SNS 이미지, 이메일 첨부, 뉴스 기사 이미지

PNG – 투명도와 무손실의 조합

PNG는 화질 손실 없이 이미지를 저장합니다. 투명도(알파 채널)를 완벽히 지원하며, 텍스트나 선이 포함된 그래픽에서 선명한 품질을 유지합니다.

장점

  • 무손실 압축으로 화질 완벽 보존
  • 알파 채널(0~255 단계 투명도) 완벽 지원
  • 선명한 텍스트와 경계선
  • 모든 브라우저에서 지원

단점

  • 사진류 이미지에서 파일 크기가 매우 큼
  • 애니메이션 미지원 (APNG는 별도)

권장 용도: 로고, 아이콘, UI 스크린샷, 투명 배경 필요 이미지

WebP – 웹의 미래 표준

Google이 2010년에 개발한 WebP는 JPG보다 25~35% 작은 파일 크기로 비슷한 품질을 제공합니다. 손실·무손실 압축 모두 지원하고 투명도와 애니메이션도 가능합니다.

장점

  • JPG 대비 25~35% 파일 크기 절감
  • 손실/무손실 압축 모두 지원
  • 투명도 및 애니메이션 지원
  • Chrome, Firefox, Safari(14+), Edge 등 주요 브라우저 모두 지원

단점

  • 구형 브라우저(IE, 구형 Safari) 미지원
  • 일부 이미지 편집 소프트웨어에서 직접 열기 불편

권장 용도: 웹사이트 이미지 최적화, Next.js/Nuxt 등 모던 웹 개발

AVIF – 차세대 최고 효율 포맷

AV1 비디오 코덱 기반의 AVIF는 현재 가장 높은 압축 효율을 자랑합니다. 동일 품질에서 WebP보다도 20~30% 작습니다.

장점

  • 현재 가장 높은 압축 효율
  • HDR(High Dynamic Range) 지원
  • 10비트/12비트 색 심도 지원

단점

  • 비교적 최신 브라우저에서만 지원 (Safari 16+)
  • 인코딩 속도가 느릴 수 있음

권장 용도: 최신 웹 서비스, 고품질 이미지가 중요한 포트폴리오, 뉴스 미디어

GIF – 애니메이션의 고전

1987년에 등장한 GIF는 최대 256가지 색상만 지원하지만 애니메이션 기능 덕분에 아직도 밈, 이모티콘 등에 널리 사용됩니다.

장점

  • 애니메이션 지원, 모든 환경에서 재생 가능
  • 1비트 투명도 지원
  • 단순한 그래픽에서 소용량

단점

  • 최대 256색으로 색 표현 제한
  • 애니메이션 시 파일 크기 매우 큼 (MP4/WebP 대비)

권장 용도: 짧은 애니메이션 클립, 이모티콘, 반복 효과