PNG와 JPG는 웹에서 가장 많이 사용되는 래스터 이미지 형식입니다. 둘 사이의 선택은 결국 하나의 핵심 트레이드오프로 귀결됩니다. 무손실 품질을 택할 것인가, 파일 크기를 택할 것인가.
PNG는 모든 픽셀을 완벽하게 보존하며 투명도를 지원합니다. JPG는 사람의 눈이 감지하기 어려운 시각 정보를 제거해 훨씬 작은 파일을 만들어냅니다. 각 형식이 빛을 발하는 상황을 이해하면, 매번 올바른 선택을 할 수 있습니다.
Comparison Table
| 특성 | PNG | JPG |
|---|---|---|
| 압축 방식 | 무손실 (DEFLATE) | 손실 (DCT 기반) |
| 투명도 | 알파 채널 지원 | 미지원 |
| 색상 깊이 | 최대 48비트 + 16비트 알파 | 24비트 (채널당 8비트) |
| 애니메이션 | APNG (제한적 지원) | 미지원 |
| 사진 파일 크기 | 큼 | 작음 |
| 그래픽 파일 크기 | 작음 | 큼 (아티팩트 발생) |
| 적합한 용도 | 그래픽, 스크린샷, 로고 | 사진, 웹 이미지 |
| 브라우저 지원 | 보편적 | 보편적 |
| 메타데이터 | 제한적 (tEXt 청크) | Exif, IPTC, XMP |
Detailed Analysis
근본적인 차이는 압축 방식에 있습니다. JPG는 8x8 픽셀 블록을 분석하고 고주파 디테일을 제거하는 손실 DCT 기반 압축을 사용합니다. 자연 이미지에는 부드러운 그라디언트가 많아 양자화를 잘 견디므로, 사진에 탁월한 효과를 발휘합니다. 품질 80 설정의 일반 사진은 원본의 5분의 1 크기에서도 거의 동일하게 보입니다.
PNG는 필터링된 이미지 행에 DEFLATE 압축(ZIP과 동일한 알고리즘)을 적용하며, 어떤 데이터도 버리지 않습니다. 따라서 선명한 경계, 단색 영역, 텍스트가 포함된 이미지에 적합합니다. JPG의 블록 기반 압축은 이런 이미지에서 눈에 띄는 아티팩트를 만들어내기 때문입니다. 스크린샷을 PNG로 저장하면 동일한 스크린샷을 JPG로 저장하는 것보다 오히려 파일이 작아지는 경우도 있습니다. DEFLATE가 동일한 픽셀이 넓게 분포된 영역을 매우 효율적으로 처리하기 때문입니다.
투명도는 확실한 차별 요소입니다. PNG는 8비트 또는 16비트 알파 채널을 지원해 부드러운 반투명 효과가 가능합니다. JPG는 투명도를 전혀 지원하지 않습니다. 이미지에 투명 영역이 필요하다면 기존 형식 중에서는 PNG(또는 WebP)가 유일한 선택지입니다.
When to Use PNG
- 스크린샷, UI 목업, 화면 녹화
- 투명도가 필요한 로고, 아이콘, 그래픽
- 선명한 텍스트나 라인아트가 포함된 이미지
- 픽셀 아트 및 게임 스프라이트
- 무손실 품질이 반드시 필요한 이미지
- 단색 영역이 넓고 색상 수가 적은 그래픽
When to Use JPG
- 사진 및 자연 풍경 이미지
- 이커머스 사이트의 상품 사진
- SNS 이미지 및 프로필 사진
- 파일 크기가 중요한 이메일 첨부
- 웹 히어로 이미지 및 배경
- 다소간의 화질 손실이 허용되는 모든 이미지
Conclusion
절대적인 승자는 없습니다. 무손실 품질, 투명도, 선명한 경계가 필요하면 PNG를 사용하고, 파일 크기가 중요한 사진에는 JPG를 사용하면 됩니다. 웹에서는 두 형식의 장점을 모두 갖춘 WebP도 좋은 대안입니다.