이미지 포맷 추천기
용도에 맞는 이미지 포맷(WebP·AVIF·PNG·JPEG)을 추천합니다.
웹 이미지는 같은 그림이라도 어떤 포맷으로 저장하느냐에 따라 용량이 몇 배까지 차이 납니다. 이 도구는 이미지의 성격(사진·일러스트·로고·스크린샷), 투명도와 애니메이션 필요 여부, 그리고 용량 최소화와 호환성 중 무엇을 우선할지를 입력하면, 가장 알맞은 이미지 포맷과 그 이유를 추천하고 바로 붙여넣을 수 있는 <picture> 코드 예시까지 만들어 줍니다.
AVIF·WebP·PNG·JPEG·GIF·SVG는 각각 강점이 다릅니다. 사진에는 손실 압축이 뛰어난 포맷이, 로고나 단순한 도형에는 벡터가 유리하죠. 잘못된 포맷 선택은 불필요한 다운로드와 느린 LCP(가장 큰 콘텐츠 표시 시간)로 이어집니다. 입력만 하면 휴리스틱 규칙에 따라 최신 포맷을 우선하고 구형 브라우저용 폴백까지 함께 제안합니다.
| 권장 포맷 | AVIF |
|---|---|
| 폴백 순서 | AVIF → WebP → JPEG |
이유: 연속 색조의 사진은 손실 압축에 강한 AVIF가 가장 작고, WebP가 폭넓은 폴백, JPEG가 최종 레거시 폴백입니다.
<picture> <source srcset="image.avif" type="image/avif" /> <source srcset="image.webp" type="image/webp" /> <img src="image.jpg" alt="이미지" width="800" height="600" loading="lazy" decoding="async" /> </picture>
AVIF·WebP·JPEG·PNG는 언제 쓰나
각 포맷은 만들어진 목적이 다릅니다. 사진처럼 색이 부드럽게 이어지는 이미지는 손실 압축에 강한 포맷이, 글자·선이 또렷한 그래픽은 무손실 또는 벡터가 어울립니다.
- AVIF: 가장 높은 압축률. 같은 화질에서 JPEG 대비 50% 이상, WebP 대비 약 20% 작아집니다. 사진·그래픽 모두 강하며 투명도와 애니메이션을 지원합니다.
- WebP: AVIF보다 호환성이 넓고 JPEG/PNG보다 작습니다. 손실·무손실·투명·애니메이션을 모두 지원하는 만능 폴백입니다.
- JPEG: 사진용 레거시 표준. 투명도가 없지만 모든 환경에서 열립니다. 최종 폴백으로 적합합니다.
- PNG: 무손실 + 투명. 단순 그래픽·아이콘의 폴백으로 쓰되 사진에는 용량이 커 비효율적입니다.
- GIF: 오래된 애니메이션 포맷. 256색 한계와 큰 용량 때문에 가급적 AVIF/WebP 애니메이션으로 대체하세요.
- SVG: 벡터. 로고·아이콘·단순 도형은 SVG로 두면 어떤 해상도에서도 또렷하고 용량이 작습니다.
브라우저 지원과 폴백 전략
WebP는 2020년 이후 모든 주요 브라우저에서, AVIF는 Chrome·Firefox·Safari(16+)·Edge에서 폭넓게 지원됩니다. 다만 오래된 브라우저나 일부 이메일·디자인 도구는 아직 AVIF를 못 읽습니다. 그래서 실무에서는 <picture> 요소로 최신 포맷을 먼저 제시하고, 브라우저가 못 읽으면 자동으로 다음 후보로 내려가는 폴백을 둡니다.
- 최신 포맷(AVIF)을 첫
source로 둔다. - 다음
source에 WebP를 둔다. - 마지막
img의src에 가장 호환성 높은 폴백(JPEG/PNG)을 둔다.
브라우저는 위에서부터 자신이 지원하는 첫 후보를 고르므로, 한 번의 마크업으로 최신 환경에는 작은 파일을, 구형 환경에는 안전한 파일을 동시에 제공할 수 있습니다.
추천을 적용할 때 주의할 점
포맷을 바꾼 뒤에는 실제 용량을 비교해 보세요. 매우 작은 아이콘은 AVIF 헤더 오버헤드 때문에 오히려 커질 수 있습니다. 또한 로딩 우선순위가 중요한 첫 화면 이미지에는 적절한 width·height와 loading 속성을 함께 지정해 누적 레이아웃 이동(CLS)을 막는 것이 좋습니다. 페이지에 이미지·스크립트 참조가 얼마나 많은지는 페이지 용량 분석으로 점검하세요.