이미지는 일반적인 웹페이지 데이터 전송량의 약 50~60%를 차지합니다. 따라서 적절한 이미지 형식을 선택하는 것은 웹 성능 최적화에 매우 중요한 요소입니다. 여기서는 모든 이미지 형식과 각 형식을 사용해야 하는 시점을 자세히 살펴보겠습니다.
알아두면 유용한 형식
JPG (JPEG)
오랜 역사를 자랑하는 JPG는 1990년대부터 웹 사진의 표준 형식으로 자리 잡았습니다. JPG는 손실 압축 방식을 사용하여 자연스러운 색상 그라데이션, 질감, 복잡한 장면 등 사진에 최적화된 이미지를 제공합니다.
다음 용도에 가장 적합합니다: WebP 또는 AVIF 형식을 사용할 수 없는 사진이나 기존 시스템과의 호환성이 필요한 경우.
단점: 최신 포맷보다 크기가 크고, 투명도가 없으며, 저화질에서 압축 아티팩트가 발생합니다.
PNG
PNG는 무손실 포맷으로, 단색, 선명한 가장자리, 투명한 배경을 가진 그래픽에 이상적입니다.
다음 용도에 가장 적합합니다: 로고, 아이콘, 스크린샷, UI 요소, 투명도가 필요한 이미지.
단점: 사진 파일 크기가 JPG보다 훨씬 커서 로딩 속도가 느립니다.
웹P
구글의 WebP 형식은 손실 및 무손실 압축을 제공하고 투명도를 지원하며 JPG 및 PNG보다 성능이 뛰어납니다. 현재 웹 이미지의 권장 기본 형식으로 사용되고 있습니다.
최적의 용도: 거의 모든 이미지(JPG 대체), 로고/그래픽(PNG 대체), 웹 이미지 등에 적합합니다.
파일 크기 이점: 동일한 화질에서 JPG보다 25~35% 작습니다. PNG와 비슷하지만 더 작은 경우가 많습니다.
브라우저 호환성: 97% 이상 (Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저 지원).
AVIF
AV1 비디오 코덱에서 파생된 AVIF는 최신 주류 이미지 포맷입니다. AVIF는 WebP보다 압축률이 뛰어나며, 동일한 화질에서 20~50% 더 작은 용량을 제공하는 경우가 많습니다.
다음과 같은 용도에 가장 적합합니다: 압축률을 극대화하는 것이 최우선이며 서버/빌드 프로세스를 직접 제어할 수 있는 정적 이미지.
단점: 인코딩 속도가 느려서 실시간 생성에 적합하지 않으며, 구형 브라우저 버전에서는 지원되지 않을 수 있습니다.
지원 브라우저: Chrome 85 이상, Firefox 93 이상, Safari 16 이상, Edge 121 이상.
SVG
SVG는 벡터 형식으로, 이미지는 픽셀이 아닌 수학적 경로로 표현됩니다. SVG 파일은 해상도에 관계없이 표시되며, 로고나 아이콘과 같은 이미지에 사용하기에 매우 작습니다.
다음 용도에 가장 적합합니다: 로고, 아이콘, 일러스트레이션, 차트 등 다양한 크기로 확대/축소해야 하는 모든 그래픽.
다음과 같은 이미지에는 적합하지 않습니다: 사진이나 복잡한 그라데이션 및 질감이 포함된 이미지.
형식 vs 사용 사례 매트릭스
| 콘텐츠 유형 | 권장 형식 | 대체 형식 |
|---|---|---|
| 사진 | AVIF | WebP → JPG |
| 제품 사진 | WebP | JPG |
| 로고 | SVG | PNG |
| 아이콘 | SVG | PNG |
| 스크린샷 | WebP | PNG |
| 일러스트 | SVG 또는 WebP | PNG |
| 배경 패턴 | WebP | JPG |
| 애니메이션 | WebP | GIF |
성능 영향: 실제 수치
일반적인 제품 사진을 최신 형식으로 변환하기:
| 형식 | 파일 크기 | 화질 |
|---|---|---|
| JPG (화질 85) | 340KB | 기준선 |
| PNG | 1.2MB | 무손실 |
| WebP (화질 80) | 210KB | ≈ JPG 85 |
| AVIF (화질 60) | 155KB | ≈ JPG 85 |
JPG에서 WebP로 전환하면 이미지당 약 38%의 이미지 용량을 절약할 수 있습니다. 제품 이미지가 20개 있는 페이지의 경우, 페이지 로드 시 수 메가바이트의 용량을 절약할 수 있습니다.
점진적 향상을 위한 <picture> 요소
AVIF 포맷을 WebP 대체 포맷으로, JPG를 최종 대체 포맷으로 제공하려면 다음과 같이 하세요.
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Product photo" />
</picture>
이를 통해 최신 브라우저는 AVIF를, 구형 브라우저는 WebP를, 그리고 구형 브라우저는 JPG를 사용할 수 있으며, 자바스크립트는 전혀 필요하지 않습니다.
핵심 웹 바이탈은 어떻습니까?
**최대 콘텐츠 페인트(LCP)**는 Google의 핵심 웹 바이탈 지표 중 하나이며 이미지 로딩 시간에 큰 영향을 받습니다. 대표 이미지와 제품 사진에 WebP 또는 AVIF 형식을 사용하면 Google 검색 순위 신호인 LCP 점수를 직접적으로 향상시킬 수 있습니다.
웹 이미지 관련 추가 팁:
- 레이아웃 변경(CLS)을 방지하려면
width, ,height, 속성을 추가하세요. - 화면 하단의 이미지에는
loading="lazy"사용하세요. - LCP 이미지(일반적으로 메인 이미지)에
fetchpriority="high"사용하세요.
이미지 변환하기
PicsSizer의 이미지 변환기를 사용하면 모든 이미지를 WebP, AVIF, PNG 또는 JPG 형식으로 변환할 수 있습니다. 여러 이미지를 일괄적으로 압축하려면 이미지 압축기를 사용하여 화질 저하 없이 파일 크기를 최소화할 수 있도록 품질 설정을 조정할 수 있습니다.
요약: 2026년 권장 기본 설정
- 웹상의 사진 → WebP (
<picture>통한 JPG 대체 기능 포함) - 로고 및 아이콘 → SVG (래스터 대체: PNG)
- 스크린샷 및 다이어그램 → WebP (PNG 대체 형식 사용)
- 최대 압축, 정적 자산 → AVIF (WebP 대체 형식 지원)
- 기존 이메일 템플릿 → JPG 또는 PNG (최신 이메일 클라이언트에서 지원하지 않는 형식)
자주 묻는 질문
- 2026년 웹사이트에 가장 적합한 이미지 형식은 무엇일까요?
- WebP는 2026년 웹사이트에 가장 적합한 범용 포맷입니다. 동일한 품질에서 JPG보다 파일 크기가 25~35% 작고, PNG처럼 투명도를 지원하며, 모든 최신 브라우저에서 완벽하게 지원됩니다. AVIF는 더욱 효율적이지만 브라우저 호환성이 다소 떨어집니다. 아이콘과 로고에는 SVG를 사용하세요.
- 내 웹사이트 이미지를 WebP 형식으로 변환해야 할까요?
- 네. JPG 및 PNG 이미지를 WebP로 변환하면 화질 저하 없이 이미지 용량을 25~50% 줄일 수 있습니다. 이미지 크기가 작아지면 페이지 로딩 속도가 빨라지고, 웹 바이탈 지수(Core Web Vitals) 점수가 향상되며, SEO에도 도움이 됩니다. 현재 모든 주요 브라우저에서 WebP를 지원합니다.
- AVIF란 무엇이며 WebP보다 나은 점이 있나요?
- AVIF는 AV1 비디오 코덱에서 파생된 차세대 이미지 포맷입니다. 동일한 화질에서 WebP보다 20~50% 더 높은 압축률을 제공합니다. 현재 크롬, 파이어폭스, 사파리 16 이상, 엣지 등 다양한 브라우저에서 뛰어난 호환성을 자랑합니다. 다만 인코딩 시간이 다소 오래 걸리기 때문에 미리 생성된 정적 이미지에 가장 적합합니다.
- 어떤 경우에 래스터 형식 대신 SVG 형식을 사용해야 할까요?
- 로고, 아이콘, 일러스트레이션 및 기하학적 도형으로 구성된 모든 그래픽에는 항상 SVG를 사용하십시오. SVG는 해상도에 관계없이 선명하게 표시되며, 간단한 그래픽의 경우 파일 크기가 매우 작고, 어떤 크기로든 완벽하게 확대/축소됩니다. 단, 사진에는 SVG가 적합하지 않습니다.
- 이미지 형식이 SEO에 영향을 미치나요?
- 네, 간접적으로 그렇습니다. 페이지 로딩 속도는 구글 검색 순위 요소 중 하나이며, 이미지 형식은 페이지 용량에 직접적인 영향을 미칩니다. JPG/PNG 대신 WebP나 AVIF 같은 최신 형식을 사용하면 웹 핵심 지표(특히 LCP)가 향상되어 검색 순위에 도움이 될 수 있습니다.