이미지 포맷: WebP, PNG, JPG 및 SVG 비교
잘못된 이미지 포맷을 선택하면 페이지 로딩 시간이 늘어나거나 그래픽이 흐려질 수 있습니다. 최신 웹 포맷들이 압축, 투명도, 선명도 측면에서 어떻게 다른지 비교해 드립니다.
파일은 WebAssembly 및 HTML5 API를 사용해 브라우저에서 로컬로 처리됩니다. 파일은 기기 밖으로 전송되지 않으므로 서버 업로드나 제3자 파일 저장소를 이용하지 않습니다.
내 기기에서 바로 변환을 시작할 수 있습니다. 업로드 대기나 다운로드 대기열이 없으며, 원격 서버로 인한 속도 제한도 없습니다.
계정을 만들거나 요금제를 결제하지 않고도 모든 도구를 이용할 수 있으며, 인위적인 파일 크기 제한도 없습니다. 브라우저와 기기가 처리할 수 있는 만큼 자주 변환할 수 있습니다.
형식 비교 및 기술 사양
| 출력 형식 | 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 Targa 래스터 이미지 |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX 비트맵 |
| PDF 문서 | application/pdf | ISO-32000-2 | 휴대용 문서 형식 |
기술 사양 및 코덱 분석
포맷을 빠르게 선택하는 기준
최신 웹사이트에는 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바이트입니다. 모든 처리는 브라우저 샌드박스 내에서 로컬로 수행되었습니다.