이미지 형식 변환 완벽 가이드: JPEG, PNG, WebP 비교
1. 이미지 형식 한눈에 보기
웹에서 사용되는 이미지 형식은 크게 래스터(비트맵)와 벡터로 나뉩니다. 이 가이드에서는 가장 많이 사용되는 래스터 형식인 JPEG, PNG, WebP, AVIF를 비교합니다.
| 형식 | 압축 방식 | 투명도 | 애니메이션 | 브라우저 지원 |
|---|---|---|---|---|
| JPEG | 손실 | 불가 | 불가 | 100% |
| PNG | 무손실 | 지원 | APNG | 100% |
| WebP | 손실/무손실 | 지원 | 지원 | ~97% |
| AVIF | 손실/무손실 | 지원 | 지원 | ~92% |
| GIF | 무손실 (256색) | 지원 (1비트) | 지원 | 100% |
2. JPEG: 사진에 최적
JPEG(Joint Photographic Experts Group)는 1992년에 만들어진 형식으로, 30년이 넘은 지금도 웹에서 가장 많이 사용되는 이미지 형식입니다. 사진과 같은 복잡한 이미지를 작은 파일 크기로 저장하는 데 탁월합니다.
JPEG 장점
- 사진에 뛰어난 압축률 (원본 대비 10~20배 축소 가능)
- 모든 브라우저, 모든 기기에서 지원
- 품질 수준을 0~100%로 세밀하게 조절 가능
JPEG 단점
- 투명 배경 불가 (알파 채널 미지원)
- 텍스트, 선, 로고 등 선명한 가장자리에서 노이즈 발생
- 저장할 때마다 화질 저하 (세대 손실)
JPEG 품질 설정은 75~85%가 가장 좋은 균형점입니다. 이 범위에서 파일 크기는 크게 줄어들지만, 눈으로 보기에는 원본과 거의 차이가 없습니다.
3. PNG: 투명도와 선명함
PNG(Portable Network Graphics)는 무손실 압축을 사용하여 이미지 품질이 전혀 저하되지 않습니다. 알파 채널을 지원하여 투명한 배경을 표현할 수 있습니다.
PNG-8 vs PNG-24
| 특성 | PNG-8 | PNG-24 |
|---|---|---|
| 색상 수 | 256 | 1,600만+ |
| 파일 크기 | 작음 | 큼 |
| 투명도 | 1비트 (있음/없음) | 8비트 알파 |
| 적합한 용도 | 아이콘, 단순 그래픽 | 로고, UI 요소 |
PNG는 사진에는 비효율적입니다. 같은 사진을 JPEG로 저장하면 200KB인데, PNG로 저장하면 2MB가 될 수 있습니다. PNG는 로고, 아이콘, 스크린샷, 텍스트가 포함된 이미지에 사용하세요.
4. WebP: 차세대 웹 표준
WebP는 구글이 2010년에 개발한 형식으로, JPEG과 PNG의 장점을 모두 갖추고 있습니다. 손실 압축과 무손실 압축을 모두 지원하며, 투명도와 애니메이션도 가능합니다.
WebP 파일 크기 비교
- 사진: JPEG 대비 25~35% 더 작음
- 그래픽: PNG 대비 26% 더 작음 (무손실)
- 애니메이션: GIF 대비 최대 64% 더 작음
AVIF: 더 새로운 대안
AVIF는 WebP보다 더 높은 압축률을 제공하지만, 브라우저 지원이 아직 완전하지 않고 인코딩 속도가 느립니다. 2026년 현재 주요 브라우저 대부분이 지원하지만, 구형 기기에서는 폴백이 필요합니다.
5. 상황별 최적 형식 선택
JPEG
- 사진, 풍경 이미지
- 소셜 미디어 공유용
- 이메일 첨부 이미지
- 투명도가 필요 없는 경우
PNG
- 로고, 아이콘
- 투명 배경이 필요한 경우
- 스크린샷, 다이어그램
- 텍스트가 포함된 이미지
WebP
- 웹사이트 이미지 전반
- 성능 최적화가 중요한 경우
- 투명도 + 작은 파일 크기
- JPEG/PNG 대체용
AVIF
- 최고 수준 압축이 필요한 경우
- HDR 이미지
- 최신 브라우저만 지원해도 될 때
- 빌드 시간이 충분한 경우
6. 웹 이미지 최적화 실전
반응형 이미지 제공
HTML의 srcset 속성과 sizes 속성을 사용하면 기기 화면 크기에 맞는 이미지를 자동으로 제공할 수 있습니다. 모바일에서 데스크탑용 대형 이미지를 다운로드하지 않아 데이터와 로딩 시간을 절약합니다.
Lazy Loading 적용
화면에 보이지 않는 이미지는 나중에 로드하는 lazy loading을 적용하세요. HTML에서 loading="lazy" 속성 하나만 추가하면 됩니다. 초기 페이지 로딩 속도가 크게 개선됩니다.
CDN 활용
Cloudflare, AWS CloudFront 등의 CDN을 사용하면 사용자와 가장 가까운 서버에서 이미지를 제공하여 로딩 속도가 빨라집니다. 많은 CDN이 자동으로 WebP/AVIF 변환 기능을 제공합니다.
성능 목표
Google PageSpeed Insights 기준으로, 히어로 이미지는 200KB 이하, 썸네일은 50KB 이하를 목표로 최적화하세요. Largest Contentful Paint(LCP)를 2.5초 이내로 유지하는 것이 중요합니다.