웹 이미지 포맷, AVIF·WebP·SVG는 언제 쓸까?

2026-09-08 · 글쓴이 딸깍이 아저씨 (Mr. Ddalkak Uncle)

블로그 이미지를 줄일 때 화질 슬라이더부터 내리면 글자가 번지거나 사진이 거칠어질 수 있습니다.
먼저 해야 할 일은 이미지의 내용에 맞는 파일 형식을 고르는 겁니다.
사진, 화면 캡처, 아이콘, 도표는 생김새가 다르므로 같은 포맷이 모두에게 유리하지 않습니다.

한눈에 고르는 이미지 포맷

먼저 이미지 종류부터 나누면 선택이 단순해집니다.

이 표는 출발점입니다.
실제 파일 크기는 이미지 내용, 해상도, 압축 설정에 따라 달라집니다.
같은 사진을 AVIF와 WebP로 각각 내보내 눈에 띄는 손상이 없는 가장 작은 결과를 비교하는 과정이 필요합니다.

AVIF는 사진 용량을 더 줄이고 싶을 때

AVIF는 사진처럼 색이 복잡한 래스터 이미지에서 높은 압축 효율을 기대할 수 있습니다.
투명 배경과 HDR 같은 기능도 지원합니다.
대표 이미지가 많고 전송량을 줄이는 일이 중요하다면 우선 시험할 만합니다.

다만 인코딩 시간이 길 수 있고, 제작 도구나 일부 오래된 환경의 지원 여부를 살펴야 합니다.
원본을 AVIF 하나로만 보관하기보다 편집 가능한 원본을 따로 두고, 웹 배포본으로 만드는 방식이 안전합니다.

WebP는 크기와 운영 편의의 균형이 좋다

WebP는 손실·무손실 압축과 투명도를 지원해 사진과 단순 그래픽에 폭넓게 쓸 수 있습니다.
현대 브라우저 지원이 넓고 변환 도구도 많아 기존 JPEG·PNG를 줄이는 첫 단계로 다루기 편합니다.

사진은 손실 WebP로, 투명 배경의 단순 이미지나 화면 요소는 무손실 WebP로 시험할 수 있습니다.
다만 작은 PNG 아이콘이나 이미 잘 압축된 파일은 변환 후 오히려 차이가 거의 없을 수 있습니다.
확장자만 바꾸지 말고 변환 전후 용량과 실제 화면을 같이 보세요.

SVG는 선·도형·글자로 만든 이미지에 맞다

SVG는 픽셀을 저장하는 대신 도형과 경로를 기록하는 벡터 형식입니다.
로고, 아이콘, 순서도, 간단한 비교표처럼 형태가 단순할 때 작은 용량으로 선명하게 표시할 수 있습니다.
화면 폭이 달라져도 가장자리가 흐려지지 않는 장점도 있습니다.

반대로 사진을 SVG로 바꾸는 것은 맞지 않습니다.
복잡한 질감과 수많은 색을 경로로 표현하면 파일이 커지고 관리도 어려워집니다.
또 외부에서 받은 SVG는 스크립트나 링크를 포함할 수 있으므로 신뢰할 수 없는 파일을 그대로 올리지 말고 내용을 검사해야 합니다.

PNG와 JPEG가 여전히 필요한 장면

PNG는 글자가 많은 화면 캡처, 투명 배경, 픽셀 단위의 선명함이 중요한 이미지에 유용합니다.
다만 큰 사진을 PNG로 저장하면 용량이 급격히 커질 수 있습니다.

JPEG는 투명도가 필요 없는 사진과 오래된 환경을 위한 대체 이미지로 여전히 쓸모가 있습니다.
압축률을 지나치게 높이면 인물의 머리카락이나 제품 경계에 뭉개짐이 생길 수 있으므로 실제 표시 크기로 확인합니다.

MDN의 웹 이미지 형식 안내는 각 포맷의 기능과 브라우저 지원을 비교해 제공합니다.
이미지 성능의 기본 원리는 web.dev 이미지 성능 안내에서도 확인할 수 있습니다.

최신 포맷과 대체 이미지를 함께 제공한다

호환성이 걱정된다면 HTML의 <picture> 요소를 사용할 수 있습니다.
브라우저가 AVIF를 지원하면 AVIF를, 그렇지 않으면 WebP나 JPEG를 고르게 순서대로 후보를 둡니다.

<picture>
  <source srcset="cover.avif" type="image/avif">
  <source srcset="cover.webp" type="image/webp">
  <img src="cover.jpg" width="1200" height="628" alt="이미지 포맷 선택 비교표">
</picture>

width와 height를 적으면 이미지가 로드되기 전에 공간을 확보해 화면 흔들림을 줄이는 데 도움이 됩니다.
파일명과 alt 텍스트는 포맷과 별개의 문제입니다.
이미지 alt와 파일명 SEO 체크리스트처럼 이미지가 전달하는 정보를 짧고 구체적으로 적습니다.

포맷보다 먼저 저작권과 표시 크기를 본다

용량을 줄였다고 사용할 권리가 생기는 것은 아닙니다.
직접 제작했거나 이용 조건을 확인한 이미지를 쓰고 출처·라이선스 기록을 남겨야 합니다.
블로그 이미지 저작권 안전하게 쓰는 법을 포맷 선택과 함께 확인해 두면 좋습니다.

또 800픽셀 너비로만 보이는 영역에 4,000픽셀 사진을 올리면 포맷을 바꿔도 낭비가 큽니다.
표시 크기에 맞는 해상도로 내보내고, 그다음 AVIF·WebP·PNG·JPEG 결과를 비교하는 순서가 효율적입니다.

자주 묻는 질문

블로그 사진은 AVIF와 WebP 중 무엇이 더 좋은가요?

AVIF가 더 작게 나오는 사진이 많지만 이미지 내용과 압축 설정에 따라 결과가 달라집니다. 두 형식의 용량과 화질을 비교하고 필요한 경우 대체 이미지를 함께 제공하세요.

모든 PNG를 WebP로 바꾸면 되나요?

사진이나 큰 화면 캡처는 줄어들 수 있지만 작은 아이콘이나 이미 최적화된 PNG는 이득이 적을 수 있습니다. 변환 전후 파일 크기와 선명도를 확인해야 합니다.

SVG로 사진을 저장해도 되나요?

SVG는 선, 도형, 아이콘, 도표에 적합합니다. 색과 질감이 복잡한 사진은 AVIF, WebP, JPEG 같은 래스터 포맷이 더 알맞습니다.

글쓴이 딸깍이 아저씨 (Mr. Ddalkak Uncle) · 글감 찾다 지쳐서 직접 도구를 만든 콘텐츠 운영자. 소개 보기

이 글 수정