이미지 포맷 추천기

용도에 맞는 이미지 포맷(WebP·AVIF·PNG·JPEG)을 추천합니다.

웹 이미지는 같은 그림이라도 어떤 포맷으로 저장하느냐에 따라 용량이 몇 배까지 차이 납니다. 이 도구는 이미지의 성격(사진·일러스트·로고·스크린샷), 투명도와 애니메이션 필요 여부, 그리고 용량 최소화와 호환성 중 무엇을 우선할지를 입력하면, 가장 알맞은 이미지 포맷과 그 이유를 추천하고 바로 붙여넣을 수 있는 <picture> 코드 예시까지 만들어 줍니다.

AVIF·WebP·PNG·JPEG·GIF·SVG는 각각 강점이 다릅니다. 사진에는 손실 압축이 뛰어난 포맷이, 로고나 단순한 도형에는 벡터가 유리하죠. 잘못된 포맷 선택은 불필요한 다운로드와 느린 LCP(가장 큰 콘텐츠 표시 시간)로 이어집니다. 입력만 하면 휴리스틱 규칙에 따라 최신 포맷을 우선하고 구형 브라우저용 폴백까지 함께 제안합니다.

이미지 성격

투명도(배경 투명)가 필요애니메이션이 필요

우선순위

권장 포맷	AVIF
폴백 순서	AVIF → WebP → JPEG

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)을 둔다.

브라우저는 위에서부터 자신이 지원하는 첫 후보를 고르므로, 한 번의 마크업으로 최신 환경에는 작은 파일을, 구형 환경에는 안전한 파일을 동시에 제공할 수 있습니다.

포맷 한눈에 비교

아래는 같은 이미지를 각 포맷으로 저장했을 때의 일반적인 특성입니다. 압축률은 화질을 비슷하게 맞췄을 때의 상대값(JPEG=100% 기준)이며 콘텐츠에 따라 달라집니다.

포맷	상대 용량(사진)	투명도	애니메이션	MIME 타입	최소 지원 브라우저
`AVIF`	약 40~50%	예(알파)	예	`image/avif`	Chrome 85 · Safari 16
`WebP`	약 65~75%	예(알파)	예	`image/webp`	Chrome 23 · Safari 14
`JPEG`	100%(기준)	아니요	아니요	`image/jpeg`	전 브라우저
`PNG`	사진은 200%+	예(알파)	아니요(APNG 별도)	`image/png`	전 브라우저
`SVG`	벡터(해상도 무관)	예	예(SMIL/CSS)	`image/svg+xml`	전 브라우저

예시로 보는 추천 결과

입력값이 이미지 종류=사진, 투명도=불필요, 애니메이션=불필요,우선순위=용량 최소화인 히어로 배경 사진(hero.jpg)이라고 합시다. 이때 추천은 AVIF → WebP → JPEG 순서가 되고, 생성되는 마크업은 다음과 같습니다.

<source type="image/avif" srcset="hero.avif"> — AVIF를 읽는 최신 브라우저가 선택(가장 작음).
<source type="image/webp" srcset="hero.webp"> — AVIF를 못 읽으면 WebP로.
<img src="hero.jpg" width="1600" height="900" alt="…"> — 둘 다 못 읽는 환경의 안전한 폴백.

반대로 이미지 종류=로고를 고르면 비트맵 후보를 건너뛰고 SVG를 단독 추천합니다. 투명도를 켜면 JPEG 폴백 대신 PNG 폴백으로 자동 교체되는 점도 결과에서 확인할 수 있습니다.

흔한 실수 / 함정

확장자만 .webp로 바꾸고 실제 인코딩은 안 하는 경우 — 파일 안의 바이트가 여전히 JPEG라 브라우저가 못 열거나 용량이 그대로입니다. 반드시 인코더로 다시 저장해야 합니다.
<source>에 type 속성을 빼먹으면 브라우저가 디코드를 시도했다가 실패해도 다음 후보로 못 넘어갑니다. type="image/avif"처럼 MIME을 꼭 명시하세요.
서버가 image/avif·image/webp MIME으로 응답하지 않으면(잘못된 Content-Type) 일부 브라우저·CDN이 이미지를 거부합니다. 포맷을 바꾼 뒤엔 응답 헤더도 확인하세요.

자주 묻는 질문

AVIF와 WebP 중 무엇을 먼저 써야 하나요?

압축률은 AVIF가 더 좋지만 호환성은 WebP가 넓습니다. <picture>로 AVIF를 먼저 제시하고 WebP를 폴백으로 두면 두 장점을 모두 취할 수 있어, 이 도구도 그 순서를 권장합니다.

로고나 아이콘도 AVIF로 바꿔야 하나요?

아니요. 단색·도형 위주의 로고·아이콘은 SVG(벡터)가 가장 작고 어떤 해상도에서도 선명합니다. 비트맵 포맷으로 변환할 필요가 없습니다.

GIF 애니메이션은 어떻게 대체하나요?

AVIF 또는 WebP 애니메이션으로 변환하면 화질을 유지하면서 용량을 크게 줄일 수 있습니다. 구형 호환이 꼭 필요할 때만 GIF를 폴백으로 남기세요.

투명한 사진(예: 누끼 컷)은 어떤 포맷이 좋나요?

투명도가 필요한 사진성 이미지는 AVIF나 WebP가 적합합니다. 둘 다 알파 채널과 손실 압축을 지원해 PNG보다 훨씬 작습니다. 구형 폴백이 필요하면 PNG를 둡니다.

입력한 정보가 서버로 전송되나요?

아니요. 이 도구는 선택값을 브라우저 안에서만 계산하며 어떤 이미지나 정보도 외부로 전송하지 않습니다.