JPEG vs PNG vs WebP — 이미지 포맷 비교 가이드
이미지 포맷, 왜 구분해서 써야 할까?
웹에서 이미지를 다루다 보면 JPEG, PNG, WebP, GIF, AVIF 등 다양한 포맷을 접하게 됩니다. 각 포맷은 특정 상황에 맞게 설계되어 있어, 올바른 포맷을 선택하는 것만으로도 파일 크기를 크게 줄이거나 품질을 높일 수 있습니다.
예를 들어 사진을 PNG로 저장하면 JPEG보다 3~5배 더 큰 파일이 되고, 투명 배경이 필요한 로고를 JPEG로 저장하면 흰 배경이 강제로 생깁니다. 포맷의 특성을 알면 이런 실수를 피할 수 있습니다.
JPEG — 사진의 표준
**JPEG(Joint Photographic Experts Group)**는 1992년 표준으로 제정된 이래 지금까지 가장 널리 사용되는 이미지 포맷입니다.
핵심 특징
- 손실 압축(Lossy Compression): 압축 시 일부 데이터를 버려 파일 크기를 줄임
- 색상 표현: 1,680만 가지 색상(24비트) 지원
- 투명도: 지원하지 않음 (알파 채널 없음)
- 애니메이션: 지원하지 않음
언제 JPEG를 써야 할까?
- 사진 이미지: 풍경, 인물, 음식 등 색상이 다양한 사진
- 그라데이션이 많은 이미지: 부드러운 색 전환이 많은 이미지
- 웹 배너, 블로그 삽화: 파일 크기가 중요한 일반 이미지
JPEG의 한계
압축할 때마다 품질이 저하되고, 한번 압축한 JPEG를 다시 열어 저장하면 재압축 손실이 누적됩니다. 원본은 항상 무손실 포맷(PNG 또는 RAW)으로 보관하고, JPEG는 최종 출력용으로만 사용하는 것이 좋습니다.
PNG — 무손실 품질의 왕
**PNG(Portable Network Graphics)**는 GIF의 특허 문제를 해결하기 위해 1996년 개발된 포맷입니다. 무손실 압축이 특징입니다.
핵심 특징
- 무손실 압축(Lossless Compression): 압축해도 데이터 손실 없음
- 투명도(알파 채널): 완전한 투명도 지원 (반투명도 포함)
- 색상 표현: 24비트(PNG-24) 또는 8비트(PNG-8) 색상
- 애니메이션: 기본 PNG는 지원 안 함 (APNG는 가능)
언제 PNG를 써야 할까?
- 로고, 아이콘: 투명 배경이 필요한 이미지
- 스크린샷: 텍스트가 포함된 화면 캡처
- 그래프, 차트: 선명한 선과 텍스트가 있는 다이어그램
- 원본 보관: 품질 손실 없이 보관이 필요한 경우
PNG의 한계
사진처럼 색상 변화가 많은 이미지에 PNG를 사용하면 JPEG보다 3~10배 큰 파일이 됩니다. PNG는 단순한 색상 구조의 이미지(로고, 아이콘, 텍스트)에 유리하고, 사진에는 적합하지 않습니다.
WebP — 차세대 표준
WebP는 구글이 2010년 발표한 이미지 포맷으로, JPEG와 PNG의 장점을 결합한 차세대 포맷입니다.
핵심 특징
- 손실/무손실 모두 지원: 용도에 따라 선택 가능
- 투명도 지원: PNG처럼 알파 채널 지원
- 애니메이션 지원: GIF를 대체 가능
- 파일 크기: JPEG 대비 약 25~35% 작음, PNG 대비 약 26% 작음
포맷별 파일 크기 비교 (같은 이미지, 유사한 품질)
| 포맷 | 파일 크기 | 품질 |
|---|---|---|
| JPEG (80%) | 120KB | 좋음 |
| PNG | 380KB | 완벽(무손실) |
| WebP (손실) | 85KB | 좋음 |
| WebP (무손실) | 290KB | 완벽(무손실) |
| AVIF | 65KB | 좋음 |
언제 WebP를 써야 할까?
- 웹 이미지 전반: 특별한 이유가 없다면 WebP가 기본 선택
- 사진 + 투명도: JPEG는 투명도를 지원하지 않으므로 WebP 사용
- 성능이 중요한 웹사이트: 파일 크기 절감으로 로딩 속도 개선
브라우저 지원
크롬, 파이어폭스, 사파리(iOS 14+, macOS Big Sur+), 엣지 등 모든 현대 브라우저에서 지원됩니다. 2025년 현재 WebP를 사용하지 않을 이유가 거의 없습니다.
GIF — 애니메이션의 원조
**GIF(Graphics Interchange Format)**는 1987년 개발된 오래된 포맷입니다. 최대 256색만 지원하는 제한이 있지만, 애니메이션 지원 덕분에 아직도 널리 사용됩니다.
핵심 특징
- 최대 256색: 색상 표현이 제한적
- 무손실 압축: 색상 수가 적어 파일 크기가 관리 가능
- 애니메이션: 프레임별 이미지를 순서대로 재생
- 투명도: 단순 투명도만 지원 (반투명 불가)
GIF의 현재
사진이나 복잡한 이미지에는 부적합하지만 짧은 애니메이션 클립(밈, 반응 이미지)에서 여전히 사용됩니다. 성능이 중요하다면 WebP 애니메이션이나 MP4 비디오로 교체하는 것이 좋습니다.
- GIF 대신 WebP 애니메이션: 약 40~80% 파일 크기 절감
- 긴 애니메이션은 MP4로 대체하면 파일 크기 97% 이상 절감 가능
AVIF — 차차세대 포맷
**AVIF(AV1 Image File Format)**는 2019년 공개된 최신 이미지 포맷으로, WebP보다도 뛰어난 압축 효율을 자랑합니다.
특징
- 압축 효율: WebP 대비 약 20~50% 추가 절감
- HDR, 와이드 색 영역 지원
- 손실/무손실/알파 채널 모두 지원
- 브라우저 지원: 크롬, 파이어폭스, 사파리(16+) 등 주요 브라우저에서 지원
AVIF는 아직 일부 구형 브라우저에서 지원되지 않으므로 <picture> 태그를 활용해 폴백(fallback)을 제공하는 것이 좋습니다.
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="이미지" />
</picture>용도별 최적 포맷 선택 가이드
| 이미지 유형 | 추천 포맷 | 이유 |
|---|---|---|
| 사진, 풍경 | WebP > JPEG | WebP가 더 작고 품질 동일 |
| 로고, 아이콘 | SVG > WebP(무손실) > PNG | 벡터면 SVG, 래스터면 WebP |
| 스크린샷, 텍스트 포함 이미지 | PNG > WebP | 텍스트 선명도 유지 |
| 투명 배경 이미지 | WebP > PNG | WebP가 더 작음 |
| 짧은 애니메이션 | WebP > GIF | 훨씬 작은 파일 크기 |
| 인쇄용 | TIFF, PNG | 무손실 품질 필수 |
이미지 압축기로 직접 비교해보기
이론보다 직접 경험하는 것이 가장 좋습니다. 이미지 압축기를 사용해 같은 이미지를 다른 포맷으로 변환하고 파일 크기와 품질을 직접 비교해보세요.
활용 방법:
- 원본 이미지를 업로드
- 압축 품질 조절 (70~85% 추천)
- 압축 전후 파일 크기 비교
- 시각적으로 품질 차이 확인
- 최적의 설정으로 저장
이미지 포맷과 압축 수준을 올바르게 선택하면 웹사이트 로딩 속도를 개선하고, 사용자 경험을 향상시키며, SEO에도 긍정적인 영향을 줄 수 있습니다. 오늘부터 이미지를 업로드하기 전에 한 번씩 최적화하는 습관을 들여보세요.