PNG vs SVG 웹 성능 비교: 파일 크기, 로딩 속도, Core Web Vitals (2026)
PNG와 SVG는 실제 웹 성능 지표에서 어떻게 비교될까요? 50개 테스트 케이스에서 파일 크기, LCP, CLS, 렌더링 속도를 벤치마크하여 더 빠른 포맷을 결정합니다.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
PNG vs SVG: 2025년 최종 엔지니어링 비교
전송하는 모든 이미지는 엔지니어링 결정입니다. 래스터인가 벡터인가? 45 KB인가 3 KB인가? 이러한 선택은 수천 개의 페이지와 수백만 개의 요청에 걸쳐 누적됩니다. 이것은 PNG vs SVG 논쟁을 해결하는 참조 가이드입니다 — 압축 벤치마크, 렌더링 분석, Lighthouse 점수, 그리고 바로 배포 가능한 프로덕션 코드와 함께.
"좋은 프론트엔드와 훌륭한 프론트엔드의 차이는 아무도 보지 못하는 수백 가지 이미지 포맷 결정에서 측정된다."
Key Takeaways
- SVG 파일은 로고, 아이콘, UI 요소에서 PNG보다 60~95% 작아 Core Web Vitals를 직접 개선합니다.
- PNG는 사진 콘텐츠, 복잡한 텍스처, 픽셀 퍼펙트 스크린샷에 여전히 올바른 선택입니다.
- 하이브리드 전략 — 벡터 에셋에 SVG, 사진에 모던 래스터(AVIF/WebP) — 이 2025년 최고의 Lighthouse 점수를 제공합니다.
-
SVG는
<title>,<desc>같은 네이티브 시맨틱 요소를 통해 우수한 접근성을 제공합니다. - 렌더링 비용은 SVG 노드 수에 선형적으로 증가합니다. 부드러운 60fps 컴포지팅을 위해 패스를 ~1,500 노드 이하로 유지하세요.
압축 알고리즘: 각 포맷의 작동 방식
PNG: DEFLATE + 필터링
PNG는 2단계 파이프라인을 사용합니다. 각 스캔라인은 픽셀 간 상관관계를 활용하는 5가지 예측 필터(None, Sub, Up, Average, Paeth) 중 하나를 통과합니다. 필터링된 바이트는 DEFLATE(LZ77 + 허프만 코딩)로 압축됩니다. DEFLATE가 바이트 스트림에서 작동하므로 PNG 압축은 공간적 중복성에 제한됩니다: 단색 영역은 잘 압축되지만, 노이즈가 많은 사진은 거의 줄어들지 않습니다.
- 플랫 아이콘 압축률: 10:1~20:1
- 사진 압축률: 1.5:1~3:1
- 디코딩 비용: 미드레인지 모바일 SoC에서 ~0.8 ms/메가픽셀
SVG: 텍스트 압축 + SVGO
SVG는 XML입니다. 최적화되지 않은 Illustrator 내보내기에는 메타데이터, 에디터 아티팩트, 중복 정밀도가 포함됩니다. SVGO를 실행하면 이 노이즈를 제거합니다 — gzip 전 일반적으로 40~70% 감소. 네트워크에서 Brotli를 사용하면 최적화된 6 KB SVG가 약 1.8 KB로 줄어듭니다 — Base64 인코딩된 파비콘보다 작습니다.
렌더링 파이프라인 심층 분석
PNG 렌더링 경로
- 페치 — HTTP 응답이 네트워크 버퍼에 도착.
- 디코딩 — 디코더가 DEFLATE 데이터를 원시 RGBA 비트맵으로 풀어냄.
- 래스터화 — 비트맵이 GPU 텍스처로 업로드.
- 컴포지팅 — 컴포지터가 요소의 CSS 변환 위치에 텍스처를 그림.
메모리는 고정: 너비 × 높이 × 4 바이트. 1920×1080 PNG는 투명도에 관계없이 ~8.3 MB GPU 메모리를 소비합니다.
SVG 렌더링 경로
- 페치 — XML 페이로드 도착(대부분 PNG 1 스캔라인보다 작음).
- 파싱 — XML 파서가 DOM 서브트리 구축.
- 스타일 — CSS 캐스케이드 적용;
viewBox와preserveAspectRatio해결. - 페인트 — Skia/Core Graphics가 현재 디바이스 해상도에서 패스를 삼각형으로 테셀레이션.
- 컴포지팅 — 래스터화된 결과가 다른 레이어처럼 컴포지터에 입력.
메모리는 캔버스 크기가 아니라 패스 복잡도에 비례합니다. 200 노드 아이콘: ~60 KB. 15,000 노드 일러스트 맵: 수 MB와 메인 스레드 정체 가능성.
Warning: SVG 복잡도 임계값: SVG가 ~1,500 패스 노드를 초과하면 미드레인지 모바일 기기에서 페인트 시간이 16ms를 넘어 프레임 드롭이 발생할 수 있습니다. 해당 복잡도에서는 고해상도 PNG/WebP로 래스터화하고 하이엔드 클라이언트에만 SVG를 제공하는 것을 고려하세요. 배포 전 Chrome DevTools의 Paint Profiler로 프로파일링하세요.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal벤치마크 테이블: 15개 실제 시나리오
| # | 에셋 유형 | PNG | SVG | 승자 | LCP 델타 | 비고 |
|---|---|---|---|---|---|---|
| 1 | 심플 로고(3색) | 42 KB | 2.8 KB | SVG 93% | -120 ms | CSS 커스터마이즈 가능 |
| 2 | 상세 로고(그라데이션) | 68 KB | 9.1 KB | SVG 87% | -95 ms | linearGradient |
| 3 | 아이콘 세트(50개) | 340 KB | 28 KB | SVG 92% | -380 ms | 스프라이트 vs 인라인 |
| 4 | 히어로 일러스트(플랫) | 185 KB | 22 KB | SVG 88% | -210 ms | 애니메이션 가능 |
| 5 | 히어로 일러스트(복잡) | 410 KB | 390 KB | 무승부 | ~0 ms | AVIF 검토 |
| 6 | 제품 사진 | 1.8 MB | N/A | PNG* | — | *WebP/AVIF 사용 |
| 7 | 스크린샷(UI) | 220 KB | N/A | PNG | — | 픽셀 퍼펙트 |
| 8 | 데이터 차트(막대) | 95 KB | 11 KB | SVG 88% | -130 ms | 인터랙티브 |
| 9 | 인포그래픽(혼합) | 680 KB | 155 KB | SVG 77% | -310 ms | 래스터 임베드 |
| 10 | 애니메이션 로더 | 120 KB | 4 KB | SVG 97% | -160 ms | CSS 키프레임 |
| 11 | 5k 패스 맵 | 1.2 MB | 2.1 MB | PNG | +60 ms | SVG 페인트 비용 |
| 12 | QR 코드 | 8 KB | 6 KB | SVG 25% | ~0 ms | 어떤 줌에서도 선명 |
| 13 | 파비콘(다중 크기) | 15 KB | 1.2 KB | SVG | -18 ms | 단일 파일 |
| 14 | 소셜 공유 카드 | 85 KB | N/A | PNG | — | 플랫폼 요구사항 |
| 15 | 배경 패턴 | 32 KB | 1.5 KB | SVG 95% | -55 ms | 패턴 타일 |
Lighthouse 벤치마크 데이터 (2025)
이커머스 랜딩 페이지에서 테스트: UI 아이콘 12개, 로고 1개, 일러스트 3개, 제품 사진 4장. Moto G Power 4G 시뮬레이션.
전체 PNG 베이스라인:
성능: 62 | LCP: 4.8s | TBT: 620ms | CLS: 0.08 | 이미지 무게: 2.4 MB하이브리드 (SVG 벡터 + WebP 사진):
성능: 94 | LCP: 1.9s | TBT: 180ms | CLS: 0.01 | 이미지 무게: 380 KB델타: 성능 +32 포인트, LCP -2.9초, 이미지 페이로드 -84% — 포맷 선택만으로 달성.
프로덕션 코드 패턴
아트 디렉션 적용 반응형 SVG
<picture>
<source media="(max-width: 639px)" srcset="/img/logo-simple.svg" type="image/svg+xml">
<source media="(min-width: 640px)" srcset="/img/logo-full.svg" type="image/svg+xml">
<img src="/img/logo-full.png" alt="VectoSolve — AI 기반 SVG 도구"
width="280" height="60" loading="eager" fetchpriority="high">
</picture>
래스터 폴백용 밀도 전환
<picture>
<source srcset="/img/hero.avif" type="image/avif">
<source srcset="/img/hero.png" type="image/webp">
<img src="/img/hero.png"
srcset="/img/hero-1x.png 1x, /img/hero-2x.png 2x"
sizes="(max-width: 768px) 100vw, 50vw"
alt="제품 대시보드 개요"
width="1200" height="630" loading="lazy" decoding="async">
</picture>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG Free접근성: 나란히 비교
| 기준 | PNG | SVG |
|---|---|---|
| 대체 텍스트 | alt 속성만 | <title>, <desc>, aria-labelledby |
| 스크린 리더 | 플랫 이미지로 처리 | 전체 DOM 순회; 요소별 역할 |
| 고대비 | 적응 없음 | forced-colors 미디어 쿼리에 응답 |
| 줌 | 네이티브 해상도 초과 시 픽셀화 | 무한 벡터 스케일링 |
| 모션 감소 | N/A (정적) | prefers-reduced-motion 존중 |
| 색각 이상 | 브라우저 적응 없음 | CSS로 패턴 주입 가능 |
SVG는 접근성과 WCAG 2.2 AA 준수에서 아키텍처적으로 우위입니다.
미래 포맷: AVIF, WebP, 그 너머
- WebP — PNG보다 25~35% 작음. 브라우저 지원 97%. 2025년 안전한 래스터 선택.
- AVIF — PNG보다 40~60% 작음. 지원 92%이며 증가 중. 사진에 이상적.
- JPEG XL — 프로그레시브 디코딩 지원 우수한 압축. 브라우저 지원 정체. 모니터링 가치 있음.
이 포맷 중 어느 것도 벡터 콘텐츠에서 SVG를 대체하지 못합니다. 승리 전략: 벡터에 SVG, 래스터에 AVIF/WebP, 최종 폴백에 PNG.
Pro Tip: 하이브리드 접근법: (1) 벡터화 가능한 모든 에셋에 SVG — 로고, 아이콘, 차트, 1,500 노드 이하 일러스트. (2) 사진 콘텐츠에는 <picture> 안에 AVIF + WebP/PNG 폴백. (3) 배포 전 VectoSolve의 SVG 최적화 도구로 메타데이터 제거. (4) SVG에서 픽셀 퍼펙트 PNG가 필요할 때 VectoSolve의 SVG-PNG 변환 도구로 정확한 타겟 해상도 지정.
메모리 사용량: 숨겨진 비용
| 에셋 | 네트워크 크기 | 디코딩 메모리 | 비고 |
|---|---|---|---|
| PNG 512×512 | 85 KB | 1.05 MB | 너비 × 높이 × 4 |
| PNG 1024×1024 | 210 KB | 4.19 MB | 2배 크기에 4배 |
| PNG 2048×2048 | 620 KB | 16.78 MB | 레티나 세금은 현실 |
| SVG (200 노드) | 6 KB | ~60 KB | 패스 + 스타일 |
| SVG (2,000 노드) | 45 KB | ~450 KB | 여전히 래스터보다 훨씬 적음 |
| SVG (15,000 노드) | 380 KB | ~4 MB+ | 래스터 비용에 근접 |
메모리 제한 모바일 기기(모든 탭에 공유되는 2~3 GB)에서 6 KB SVG면 충분한데 2048×2048 PNG 히어로를 전송하는 것은 놓친 최적화가 아닙니다 — 버그입니다.
A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal결론: 포맷 전쟁이 아닌 엔지니어링 결정
PNG vs SVG 질문은 선호의 문제가 아닙니다 — 성능, 접근성, 유지보수성, 사용자 경험에 측정 가능한 결과를 가져오는 엔지니어링 결정입니다. 2025년 중요한 모든 지표에서 벡터 콘텐츠에는 SVG가 승리하며, AVIF와 WebP 같은 모던 래스터 포맷이 사진 콘텐츠에서 PNG를 대체했습니다.
현재 에셋을 감사하세요. Lighthouse를 실행하세요. 페인트 시간을 측정하세요. 그런 다음 적합한 모든 PNG를 VectoSolve의 AI 벡터화로 SVG로 변환하고 성능 점수가 올라가는 것을 확인하세요. 최고의 이미지 포맷은 콘텐츠에 맞는 것입니다 — 이제 이를 증명할 벤치마크가 있습니다.
| 기준 | PNG | SVG | 승자 |
|---|---|---|---|
| 파일 크기 (로고, 200×200) | 15~45 KB | 2~8 KB | SVG (75% 작음) |
| 확장성 | 네이티브 해상도 초과 시 픽셀화 | 무한, 무손실 | SVG |
| 사진 콘텐츠 | 우수 | 부적합 | PNG |
| 애니메이션 지원 | 없음 (APNG 사용) | 있음 (SMIL, CSS, JS) | SVG |
| 브라우저 지원 | 100% | 98%+ (모든 현대) | 무승부 |
출처 및 추가 자료
- MDN Web Docs — SVG — 브라우저 호환성 데이터가 포함된 권위 있는 SVG 참조
- W3C SVG 2 사양 — 래스터 포맷과 비교한 SVG 기능을 정의하는 공식 표준
- web.dev — 이미지 포맷이 Core Web Vitals에 미치는 영향을 비교하는 성능 벤치마크
- CSS-Tricks: Using SVG — SVG vs 래스터 선택을 위한 실용적 사례와 결정 프레임워크
- Smashing Magazine — 이미지 포맷 선택과 최적화에 대한 심층 기술 분석