SVG vs PNG vs WebP: 어떤 이미지 포맷을 써야 하나

짧은 답

• 아이콘, 로고, 일러스트 → SVG
• 사진, 복잡한 이미지 → WebP (최신 브라우저에는 AVIF)
• 스크린샷, 픽셀 아트, 무손실이 필요한 UI → PNG (또는 WebP 무손실)
• 구형 호환성만이 목적 → JPG

SVG: 벡터 포맷

SVG는 이미지를 픽셀 격자가 아니라 도형의 수학적 기술로 저장합니다. 그래서 이런 특성이 나옵니다.

• 무한 확대 — 16px 파비콘부터 4K 디스플레이까지 어느 크기에서도 선명합니다.
• 아주 작은 용량 — 단순한 아이콘은 1KB 미만인 경우가 많습니다.
• CSS로 제어 가능 — 색을 바꾸고, 애니메이션을 넣고, 일부에만 상호작용을 붙일 수 있습니다.
• 접근성 — 스크린 리더가 SVG 안의 텍스트를 읽습니다.

쓰면 안 되는 경우: 사진처럼 수백만 가지 색이 섞인 이미지입니다. SVG는 기하학적 경로로 기술할 수 있는 그래픽에만 실용적입니다.

중요: 배포 전에 반드시 SVG 최적화를 거치세요. 디자인 도구가 내보내는 SVG에는 불필요한 마크업이 엄청나게 많습니다. 보통 40~70%가 줄어듭니다.

WebP: 그 외 모든 것의 기본값

WebP는 JPG와 PNG를 한 번에 대체하려고 Google이 만든 포맷입니다. 네 가지를 모두 지원합니다.

• 손실 압축 (JPG처럼, 사진용)
• 무손실 압축 (PNG처럼, UI와 스크린샷용)
• 투명도 (알파 채널)
• 애니메이션 (GIF보다 훨씬 효율적)

같은 시각적 품질에서 JPG나 PNG보다 꾸준히 25~35% 작습니다. 브라우저 지원은 2024년에 97%를 넘었고 실무적으로는 이제 보편적입니다.

AVIF: 다음 세대

AVIF는 이 목록에서 가장 새로운 포맷이며, 같은 품질에서 WebP보다 다시 20~30% 작습니다. 2026년 기준 전 세계 지원율은 약 94%입니다.

권장되는 방식은 <picture>로 AVIF를 먼저 주고 WebP를 대체로 두는 것입니다.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="설명" loading="lazy" width="1200" height="800">
</picture>

PNG: 무손실이 꼭 필요할 때

PNG는 WebP보다 파일이 크지만 이런 경우에는 맞는 선택입니다.

• 절대적인 무손실이 필요할 때 (과학 이미지, 의료 영상)
• 텍스트가 들어간 스크린샷 (압축 아티팩트가 글자를 뭉갭니다)
• 투명도가 필요한데 대상 환경이 WebP를 지원하지 않을 때 (이제는 드뭅니다)

참고로 WebP 무손실은 PNG보다 보통 26% 작습니다. 무손실이 필요하다고 해서 반드시 PNG여야 하는 것은 아닙니다.

JPG: 레거시 포맷

JPG는 여전히 가장 넓게 호환되지만, 2026년에 새로 만드는 자산의 기본값이 될 이유는 없습니다. 투명도를 지원하지 않고, 무손실 모드가 없으며, 같은 품질에서 WebP보다 큽니다. <picture>의 최종 대체 이미지로만 두세요.

2026년 결정 트리

1. 도형으로 그릴 수 있는 그래픽인가? → SVG (최적화 후)
2. 사진인가? → AVIF, WebP 대체, JPG 최종 대체
3. 글자가 있는 스크린샷인가? → PNG 또는 WebP 무손실
4. 애니메이션인가? → WebP 애니메이션 또는 동영상 (<video>). GIF는 쓰지 마세요
5. 파비콘인가? → SVG + PNG 대체

실제 용량 비교

같은 1200×800 사진을 각 포맷으로 내보낸 대략적인 결과입니다.

수치는 이미지에 따라 달라집니다. 실제 자산으로 직접 확인하세요.

GIF 대신 WebP 애니메이션

GIF는 256색으로 제한되고, 무손실 압축만 가능하며, 같은 클립에서 WebP 애니메이션보다 훨씬 큽니다. 짧은 반복 애니메이션이라면 WebP나 <video>에 autoplay muted loop playsinline을 쓰는 편이 낫습니다. 보통 5~10배 작아집니다.

흔한 실수

• 사진을 PNG로 저장 — 가장 흔하고 가장 비싼 실수입니다. 용량이 몇 배가 됩니다.
• SVG를 최적화하지 않고 배포 — 디자인 도구 내보내기에는 편집기 메타데이터가 가득합니다.
• width와 height 누락 — 포맷과 무관하게 레이아웃 이동(CLS)을 일으킵니다.
• 표시 크기보다 훨씬 큰 이미지 제공 — 400px 자리에 3000px 이미지를 넣는 경우입니다. 포맷을 바꾸기 전에 리사이즈부터 하세요.

자주 묻는 질문

이제 JPG를 아예 안 써도 되나요?

새로 만드는 자산의 기본값으로는 필요 없습니다. 다만 <picture>의 최종 대체와, 이메일 클라이언트처럼 WebP 지원이 불확실한 환경에는 여전히 유용합니다.

SVG에 보안 문제가 있다고 들었습니다.

SVG는 스크립트를 포함할 수 있어서, 사용자가 업로드한 SVG를 그대로 인라인하면 XSS 위험이 있습니다. 자체 제작 자산은 문제없고, 외부에서 받은 SVG는 정제하거나 <img>로만 불러오세요.

AVIF로 전부 바꿔도 되나요?

대체를 두는 조건이라면 그렇습니다. 지원율이 94%라는 것은 100명 중 6명이 못 본다는 뜻이므로, <picture> 없이 AVIF만 제공해서는 안 됩니다. 인코딩이 WebP보다 느린 점도 감안하세요.

파비콘은 어떤 포맷이 좋나요?

SVG를 기본으로 하고 PNG를 대체로 둡니다. SVG 파비콘은 하나로 모든 크기를 감당하고 다크 모드에 반응하게 만들 수도 있습니다. 구형 환경을 위해 32×32 PNG 하나만 함께 두면 충분합니다.