빠른 비교
| 포맷 | 최적 | 투명도 | 일반 크기 (vs JPG) | 브라우저 지원 |
|---|---|---|---|---|
| JPG | 사진 | 아니오 | 기준 | 보편적 |
| PNG | 그래픽, 텍스트, 로고 | 예 (전체 알파) | 2-5배 큼 | 보편적 |
| WebP | 모든 것의 일반적 대체 | 예 (전체 알파) | JPG보다 25-35% 작음 | 모든 최신 브라우저 |
| AVIF | 최신 사이트의 최대 압축 | 예 (전체 알파) | JPG보다 50% 작음 | 최신 브라우저 |
| GIF | 레거시 / 단순 애니메이션 | 이진 | 크고 비효율 | 보편적 |
| SVG | 벡터 그래픽 / 아이콘 | 예 | 래스터 아님 — 다름 | 보편적 |
JPG: 사진의 기본값
JPG(또는 JPEG)는 1992년부터 존재했습니다. 손실 압축 알고리즘은 사진에 적합하게 조정되어 있으며 — 인간의 눈이 가장 덜 민감한 디테일을 버리고 — 매우 작은 파일에서 시각적으로 좋은 결과를 만듭니다.
- 최적: 사진, 자연스러운 이미지, 매우 작은 파일이 필요한 모든 것.
- 피해야 할 것: 텍스트, 선명한 가장자리가 있는 그래픽, 단색 영역(JPEG 압축이 그것들 주위에 아티팩트를 만듭니다), 투명도가 필요한 모든 것.
- 품질 설정: 웹용 80-90%. 90% 이상은 거의 시각적 차이가 없는 큰 파일을 만듭니다. 70% 미만은 보이는 아티팩트를 가져옵니다.
- 핵심 트레이드오프: 손실 — 매번 저장하면 더 많은 품질을 잃습니다. 원본 보관 후 한 번만 내보내세요.
PNG: 그래픽 및 투명도
PNG는 무손실 압축을 사용합니다 — 모든 픽셀이 정확히 보존됩니다. 그래픽이 픽셀 완벽하게 유지되어야 하지만 그 정밀도에 대한 대가를 지불합니다.
- 최적: 로고, 아이콘, 텍스트가 있는 그래픽, 스크린샷, 투명도가 필요한 모든 것.
- 피해야 할 것: 사진(PNG 사진은 같은 시각적 품질에서 JPG보다 5-10배 큽니다).
- 변형: PNG-8(256색, 더 작음), PNG-24(1600만 색, 더 큼). 자동 선택 가능한 도구를 신뢰하세요.
- 핵심 트레이드오프: 무손실 — 매번 저장해도 품질을 잃지 않지만 사진의 경우 큰 파일.
WebP: 사실상의 현대 기본값
WebP는 2010년에 Google이 도입했으며 2020년경에 보편적인 브라우저 지원을 얻었습니다. 손실과 무손실 모드를 모두 지원하고 알파 투명도를 지원하며 같은 시각적 품질에서 JPG와 PNG 모두보다 작습니다.
- 최적: 거의 모든 것. 사진(JPG 대신), 그래픽(PNG 대신), 애니메이션(GIF 대신).
- 일반적인 절약: 사진 JPG보다 25-35% 작음, 그래픽 PNG보다 25-50% 작음.
- 트레이드오프: 일부 레거시 이메일 클라이언트와 매우 오래된 디자인 도구는 지원하지 않을 수 있습니다.
- 2026년의 권장사항: 호환성이 중요하지 않다면 모든 새 콘텐츠의 기본 출력 포맷.
AVIF: 최첨단 압축
AVIF는 AV1 비디오 코덱을 기반으로 합니다. 같은 품질에서 WebP보다 작은 파일을 만듭니다 — JPG의 절반 크기. Chrome, Edge, Safari, Firefox(2022년 이후)에서 지원되지만 인코딩이 느립니다.
- 최적: 절대 최소 파일 크기가 필요한 사이트, 특히 모바일 우선 또는 대역폭 제약.
- 트레이드오프: 인코딩이 WebP나 JPG보다 5-10배 느림. 대부분의 디자인 도구가 아직 출력을 지원하지 않음.
- 전략: 이전 브라우저용 WebP 또는 JPG 폴백과 함께
<picture>요소를 통해 점진적으로 도입.
점진적 향상 패턴
모든 사용자에게 단일 포맷을 강요하지 마세요. <picture>는 가장 작은 지원되는 포맷을 자동으로 제공합니다:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="...">
</picture>최신 브라우저는 AVIF를 받습니다. 약간 오래된 브라우저는 WebP를 받습니다. 매우 오래된 브라우저는 JPG를 받습니다. 모두 작동하고 모두가 가능한 한 작게 받습니다.
일반적인 사용 사례별 권장사항
- 블로그 게시물 사진: WebP 80% 품질, JPG 폴백.
- 제품 사진 (이커머스): WebP 90% 품질, 또는 절대 최대 압축이 필요하면 AVIF.
- 로고: SVG가 최적, 래스터가 필요하면 PNG.
- 아이콘: SVG 또는 아이콘 폰트.
- 스크린샷: PNG 또는 무손실 WebP.
- 히어로 이미지: WebP 85% (사진), 절대적인 최소 파일 크기를 위해 AVIF 고려.
- 애니메이션: MP4(가장 작음, 가장 호환성 있음) 또는 애니메이션 WebP.
자주 묻는 질문
- 왜 WebP가 JPG를 완전히 대체하지 않았나요?
- 관성과 도구. 많은 디자인 워크플로우, CMS, 이메일 시스템이 여전히 JPG/PNG를 가정합니다. 그러나 모든 새 웹 콘텐츠의 경우 WebP가 우월하며 JPG에서 전환할 이유가 없습니다.
- AVIF로 바로 가야 하나요?
- 호환성보다 파일 크기를 더 신경 쓴다면 네. 폴백을 위해
<picture>요소를 사용하고 있다면, AVIF는 더 작은 파일을 무료로 가져옵니다. - PNG에서 WebP로 변환하면 투명도가 손실되나요?
- 아니요 — WebP는 PNG와 같은 전체 알파 투명도를 지원합니다. 변환은 손실 없이 작동합니다.
- SEO에 어떤 포맷이 가장 좋나요?
- 가장 작은 — Google은 페이지 속도를 순위 요소로 사용합니다. 작은 이미지 = 빠른 페이지 = 더 좋은 순위. WebP나 AVIF는 JPG보다 더 좋은 SEO 가치를 제공합니다.
- GIF를 여전히 사용해야 하나요?
- 거의 절대로. 단순 애니메이션의 경우, 같은 시각적 품질에서 GIF는 MP4보다 5-10배 큽니다. 정적 이미지의 경우 PNG/WebP가 더 좋습니다.