이미지 포맷: WebP, PNG, JPG 및 SVG 비교
잘못된 이미지 포맷을 선택하면 페이지 로딩 시간이 늘어나거나 그래픽이 흐려질 수 있습니다. 최신 웹 포맷들이 압축, 투명도, 선명도 측면에서 어떻게 다른지 비교해 드립니다.
파일은 HTML5 Canvas와 WebAssembly를 사용하여 웹 브라우저 안에서 완전히 처리됩니다. 어떤 데이터도 기기 밖으로 유출되지 않습니다.
업로드 및 다운로드 대기열이 필요 없습니다. 서버 제한 없이 컴퓨터 하드웨어의 최대 속도로 로컬에서 변환이 이루어집니다.
최신 운영체제 전반에서 출력 호환성을 보장하기 위해 공식 ISO, W3C 및 IETF 사양을 준수합니다.
형식 비교 및 기술 사양
| 출력 형식 | MIME 유형 | 사양 | 유형 |
|---|---|---|---|
| PNG 이미지 | image/png | W3C-PNG | 휴대용 네트워크 그래픽 |
| JPG JPEG 이미지 | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group 이미지 |
| WebP 이미지 | image/webp | RFC-6386-VP8 | 구글 WebP 최신 이미지 형식 |
| SVG 벡터 | image/svg+xml | W3C-SVG | 확장 가능한 벡터 그래픽 |
| HEIC 사진 | image/heic | ISO-IEC-23008-12-HEIF | 고효율 이미지 컨테이너 |
| AVIF 이미지 | image/avif | AOMEDIA-AV1-AVIF | AV1 이미지 파일 형식 |
| PSD Photoshop 문서 | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop 문서 |
| PSB Photoshop 대형 문서 | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop 대형 형식 문서 |
| WMF Windows 메타파일 | image/x-wmf | MS-WMF-SPEC | Windows 메타파일 벡터 형식 |
| EMF 향상된 메타파일 | image/x-emf | MS-EMF-SPEC | 향상된 메타파일 벡터 형식 |
| JFIF 이미지 | image/jpeg | ITU-T-T81-JPEG | JPEG 파일 교환 형식 |
| TGA Truevision | image/x-tga | TGA-SPEC | Truevision 고급 래스터 |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX 비트맵 |
기술 사양 및 코덱 분석
빠른 포맷 결정 규칙
최신 웹사이트에는 WebP나 AVIF를 사용하세요(투명도를 지원하면서 JPEG보다 30% 더 작습니다). 눈에 띄지 않는 미세한 압축 아티팩트가 문제되지 않는 사진에는 JPG를 사용하세요. 선명하고 픽셀 단위로 날카로운 텍스트가 필요한 스크린샷, UI 그래픽, 일러스트레이션에는 PNG를 사용하세요. 무한 확장이 필요한 로고와 아이콘에는 SVG를 사용하세요.
래스터 대 벡터: SVG가 결코 흐려지지 않는 이유
래스터 이미지(JPG, PNG, WebP)는 고정된 색상 픽셀의 격자이므로 너무 확대하면 흐려지거나 픽셀화됩니다. SVG는 순수한 수학이며, 수학적인 선, 곡선, 색상을 저장하여 아이콘과 일러스트레이션이 모바일 화면부터 8K 디스플레이까지 모든 기기에서 작은 파일 크기로 매우 선명하게 렌더링되도록 합니다.
오해: 'DPI가 높을수록 웹 이미지 품질이 좋다'
DPI(인치당 도트 수)는 순전히 물리적인 인쇄 지침이며 웹 브라우저에서는 완전히 무시됩니다. 휴대폰과 컴퓨터 모니터에서 이미지 선명도는 내장된 DPI 메타데이터가 아니라 픽셀 치수(예: 1920x1080)와 디스플레이 밀도에 의해 전적으로 결정됩니다.
알파 투명도: PNG 대 WebP
기존 JPG는 투명도를 전혀 지원하지 않으며, 투명한 배경이 단색 흰색 또는 검은색으로 바뀝니다. PNG는 깨끗한 8비트 알파 투명도를 개척했지만, 이제 WebP는 최대 40% 더 작은 파일 크기로 동일한 투명도 품질을 제공합니다.
외부 서버로 업로드된 데이터 0바이트. 모든 처리는 브라우저 샌드박스내에서 로컬로 수행되었습니다.