웹용 최적 이미지 포맷: WebP, JPG, PNG, AVIF

이미지는 일반적인 웹페이지 데이터 전송량의 약 50~60%를 차지합니다. 올바른 이미지 포맷을 선택하는 것은 웹 성능을 개선할 때 가장 효과가 큰 최적화 중 하나입니다. 다음은 각 포맷과 그 활용 시점을 실용적으로 정리한 내용입니다.

알아야 할 포맷들

JPG (JPEG)

베테랑 포맷입니다. JPG는 1990년대부터 웹에서 사진을 위한 표준으로 자리 잡았습니다. 자연스러운 색상 그라데이션, 텍스처, 복잡한 장면 등 사진에 최적화된 손실 압축 방식을 사용합니다.

적합한 용도: WebP나 AVIF를 사용할 수 없거나 레거시 호환성이 필요한 사진.
약점: 최신 포맷보다 용량이 크고, 투명도를 지원하지 않으며, 낮은 품질에서는 압축 손상이 나타납니다.

PNG

PNG는 단색, 선명한 경계, 투명 배경이 있는 그래픽에 이상적인 무손실 포맷입니다.

적합한 용도: 로고, 아이콘, 스크린샷, UI 요소, 투명도가 필요한 이미지.
약점: 사진의 경우 JPG보다 용량이 훨씬 크고 로딩 속도가 느립니다.

WebP

구글이 개발한 WebP 포맷은 손실 압축과 무손실 압축을 모두 지원하고, 투명도를 지원하며, JPG와 PNG를 모두 능가하는 성능을 보입니다. 현재는 웹 이미지의 기본 권장 포맷으로 자리 잡았습니다.

적합한 용도: 거의 모든 용도 — 사진(JPG 대체), 로고/그래픽(PNG 대체), 일반적인 웹 이미지.
파일 크기 이점: 동등한 시각적 품질에서 JPG보다 25~35% 작으며, PNG와 비슷하거나 대체로 더 작습니다.
브라우저 지원: 97% 이상(Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저).

AVIF

AV1 비디오 코덱에서 파생된 AVIF는 가장 최근에 등장한 주류 이미지 포맷입니다. WebP보다 더 나은 압축률을 달성하며, 동등한 품질에서 흔히 20~50% 더 작은 용량을 보입니다.

적합한 용도: 최대 압축률이 우선이고 서버/빌드 프로세스를 직접 제어할 수 있는 정적 이미지.
약점: 인코딩 속도가 느리고(실시간 생성에는 적합하지 않음), 구버전 브라우저에서는 지원하지 않을 수 있습니다.
브라우저 지원: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+.

SVG

SVG는 벡터 포맷으로, 이미지가 픽셀이 아닌 수학적 경로로 표현됩니다. SVG 파일은 해상도에 독립적이며 로고와 아이콘의 경우 대체로 용량이 매우 작습니다.

적합한 용도: 로고, 아이콘, 일러스트레이션, 차트 등 다양한 크기로 확대·축소해야 하는 모든 그래픽.
적합하지 않은 용도: 사진이나 복잡한 그라데이션과 텍스처가 있는 이미지.

포맷 대 사용 사례 매트릭스

성능 영향: 실제 수치

일반적인 제품 사진을 최신 포맷으로 변환한 경우:

JPG에서 WebP로 전환하면 이미지 1장당 데이터 전송량이 약 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를 사용하게 되며 자바스크립트가 전혀 필요하지 않습니다.

Core Web Vitals는 어떨까요?

**최대 콘텐츠풀 페인트(LCP)**는 구글의 Core Web Vitals 지표 중 하나이며 이미지 로드 시간의 영향을 크게 받습니다. 히어로 이미지와 제품 사진에 WebP나 AVIF를 사용하면 LCP 점수를 직접 개선할 수 있으며, 이는 구글의 순위 결정 요소입니다.

웹 이미지를 위한 추가 팁:

• 레이아웃 이동(CLS)을 방지하려면 width와 height 속성을 추가하세요
• 화면 아래에 있는 이미지에는 loading="lazy"를 사용하세요
• LCP 이미지(보통 히어로 이미지)에는 fetchpriority="high"를 사용하세요

이미지 변환하기

PicsSizer의 이미지 변환기를 사용하면 모든 이미지를 WebP, AVIF, PNG, JPG로 변환할 수 있습니다. 대량 최적화가 필요하다면 이미지 압축기에서 품질 설정을 조정해 시각적 손상 없이 가능한 가장 작은 파일을 만들 수 있습니다.

요약: 2026년 권장 기본 설정

1. 웹상의 사진 → WebP(<picture>를 통한 JPG 대체 포함)
2. 로고와 아이콘 → SVG(래스터 대체: PNG)
3. 스크린샷과 다이어그램 → WebP(PNG 대체 포함)
4. 최대 압축이 필요한 정적 자산 → AVIF(WebP 대체 포함)
5. 레거시 이메일 템플릿 → JPG 또는 PNG(이메일 클라이언트는 최신 포맷을 지원하지 않음)