웹디자인에 적합한 이미지 포맷은 상황마다 다릅니다.
PNG, JPG, SVG, WebP, AVIF 등 주요 포맷의 특징과
사용 추천 용도, 최적화 기준을 정리했습니다.
1. 웹디자인에 사용하는 대표 이미지 포맷
포맷특징
| JPG (JPEG) | 손실 압축, 사진용 적합 |
| PNG | 무손실 압축, 투명 배경 가능 |
| SVG | 벡터 기반, 아이콘/로고에 적합 |
| WebP | 차세대 포맷, 고압축 고화질 |
| AVIF | 최신 고효율 포맷, 용량 최소화 가능 |
2. 이미지 포맷별 특징 및 용도
✅ JPG (JPEG)
- 장점: 용량 대비 화질 우수, 호환성 좋음
- 단점: 투명 배경 불가, 품질 손실 있음
- 추천 용도: 사진, 썸네일, 배경 이미지
✅ PNG
- 장점: 무손실, 투명 배경 지원
- 단점: 파일 용량 큼 (특히 사진)
- 추천 용도: UI 요소, 투명한 버튼, 로고
✅ SVG
- 장점: 벡터 기반, 확대해도 선명, 코드 제어 가능
- 단점: 복잡한 이미지엔 부적합
- 추천 용도: 아이콘, 로고, 일러스트, 단순 도형
✅ WebP
- 장점: PNG·JPG 대비 파일 크기 최소화
- 단점: 구형 브라우저 일부 미지원 (IE 등)
- 추천 용도: 모든 웹용 이미지에 적용 가능 (대체 포맷 병행 권장)
✅ AVIF
- 장점: 가장 높은 압축 효율, 색 표현 우수
- 단점: 인코딩 속도 느림, 브라우저 호환성 이슈 일부 존재
- 추천 용도: 고해상도 이미지, 콘텐츠 중심 웹사이트
3. 상황별 최적 이미지 포맷 추천
사용 목적최적 포맷비고
| 웹사이트 배경 사진 | JPG 또는 WebP | WebP 권장 |
| 투명 배경 UI 요소 | PNG 또는 SVG | SVG 선호 |
| 아이콘, 로고 | SVG | 반응형에 최적 |
| 배너, 썸네일 | JPG → WebP 변환 | 화질 & 용량 균형 |
| 고해상도 제품 이미지 | AVIF 또는 WebP | 최신 브라우저 대상 |
| 애니메이션 이미지 | GIF → WebP 또는 APNG | 용량 절감 가능 |
4. 자주 묻는 질문 (Q&A)
Q1. WebP를 쓰면 PNG, JPG는 필요 없나요?
A. WebP는 대부분의 브라우저에서 지원되지만,
100% 호환이 되지 않기 때문에 대체 포맷 설정이 필요합니다.
HTML 예시:
<picture> <source srcset="image.webp" type="image/webp" /> <img src="image.jpg" alt="이미지 설명" /> </picture>
Q2. SVG는 언제 쓰면 안 되나요?
A. 복잡한 사진, 필터가 많은 이미지는 SVG에 적합하지 않습니다.
벡터 형식이기 때문에 픽셀 기반 이미지에는 부적합합니다.
Q3. AVIF가 가장 좋다는데 왜 많이 안 쓰이나요?
A. AVIF는 압축 효율이 가장 뛰어나지만
- 인코딩이 느리고
- 일부 브라우저에서 제한적 지원 중이기 때문에
WebP와 함께 점진적 도입하는 것이 추천됩니다.
5. 포맷별 비교 요약표
포맷압축 방식투명도 지원용량 효율권장 용도
| JPG | 손실 | ✕ | 보통 | 사진, 썸네일 |
| PNG | 무손실 | ✔ | 낮음 | 로고, UI 요소 |
| SVG | 벡터 | ✔ | 매우 우수 | 아이콘, 로고 |
| WebP | 손실/무손실 | ✔ | 높음 | 전반적인 이미지 |
| AVIF | 손실/무손실 | ✔ | 매우 높음 | 고화질 이미지 |
댓글