웹사이트 속도와 상위 노출 한번에 해결하기! (JPG vs PNG vs WebP vs AVIF)

Jeong Hyeon
2025년 12월 8일
3분 분량

블로그 SEO, 이미지 포맷만 바꿔도 상위 노출된다?

(JPG vs PNG vs WebP vs AVIF 완벽 정리)

블로그나 웹사이트를 운영하면서 "내 글은 왜 구글이나 네이버 상위에 잘 안 뜰까?" 또는 “우리 웹사이트는 왜 이렇게 느릴까?” 고민해보신 적 있나요? 키워드도 좋고 블로그 꾸준히 작성했으며 내용도 알찬데 순위가 밀린다면, 범인은 의외로 '이미지'일 수 있습니다.

구글은 '페이지 로딩 속도(Core Web Vitals)'를 매우 중요한 SEO 랭킹 요소로 봅니다. 그리고 웹사이트 용량의 대부분은 이미지가 차지하게 됩니다.

오늘은 JPG, PNG, WebP를 넘어, 최근 가장 핫한 AVIF까지의 차이점을 명확히 파헤치고, SEO 점수를 극대화하는 '이미지 사용 전략'을 준비해 보았습니다.

1. 이미지 포맷 4대장 비교: JPG, PNG, WebP, 그리고 AVIF

SEO의 핵심은 "화질은 유지하되 용량은 줄이는 것"입니다. 각 포맷의 '압축 원리'를 알면 언제 무엇을 써야 할지 답이 나옵니다.

📸 JPG (JPEG): "사진을 위한, 사진에 의한"

특징: 손실 압축 (인간의 눈에 잘 안 보이는 색상 정보를 버림)
장점: 풍경, 인물 사진처럼 복잡한 색상을 표현하면서 용량을 줄이는 데 탁월합니다.
단점: 글자나 날카로운 선이 있는 이미지는 압축 시 지저분해집니다(노이즈 발생). 배경 투명이 불가능합니다.

🎨 PNG: "선명함의 대명사"

특징: 무손실 압축 (패턴을 찾아 정리함)
장점: 배경 투명(Alpha Channel)이 가능하고, 텍스트나 로고가 아주 선명합니다.
단점: 사진을 PNG로 저장하면 용량이 JPG보다 2~3배 커집니다. (로딩 속도 저하의 주범!)

🚀 WebP: "구글이 만든 SEO 치트키"

특징: 차세대 포맷 (VP8 동영상 코덱 기반)
장점: JPG보다 30% 더 가볍고, PNG처럼 투명 배경도 지원합니다. 구글이 개발했기 때문에 구글 검색 엔진이 아주 좋아합니다.
단점: 아주 오래된 구형 브라우저(구형 IE 등)에서는 안 보일 수 있습니다.

💎 AVIF: "압축률의 끝판왕"

특징: 최신 차세대 포맷 (AV1 동영상 코덱 기반)
장점: WebP보다 20~30% 더 가볍습니다. 현재 존재하는 포맷 중 압축 효율이 가장 좋으며, 고화질(HDR) 유지력도 뛰어납니다.
단점: WebP보다는 인코딩(변환) 시간이 조금 더 걸릴 수 있으며, 구형 브라우저 호환성이 WebP보다는 아주 조금 낮습니다.

💡 요약: 구글 PageSpeed Insights에서는 WebP와 AVIF를 묶어 "차세대 형식을 사용해 이미지를 제공하세요"라고 강력히 권장합니다.

2. SEO를 위한 실전 가이드: 상황별 추천

*무조건 최신 포맷보단 상황에 맞춰 골라 쓰세요.

이미지 종류	추천 포맷	이유
일반 사진 (풍경, 인물, 리뷰 컷)	1순위: AVIF 2순위: WebP	AVIF는 화질 저하 없이 용량을 극단적으로 줄여줍니다. WebP도 훌륭한 대안입니다.
정보성 이미지 (스크린샷, 카드뉴스, 로고)	1순위: PNG 2순위: 무손실 AVIF/WebP	글자 가독성이 최우선입니다. PNG가 가장 안전하고 선명합니다. (단, 설정이 가능하다면 무손실 AVIF가 용량 면에선 더 유리합니다.)
메인 배너	AVIF 또는 WebP	웹사이트의 첫인상을 결정하는 LCP(가장 큰 콘텐츠 렌더링 시간) 점수에 직결됩니다.

3. 호환성 문제, <picture> 태그로 완벽 해결하기

"AVIF나 WebP가 좋은 건 알겠는데, 내 방문자가 구형 아이폰이나 구형 PC를 쓰면 이미지가 깨지지 않을까요?"

이 문제를 해결하면서 SEO 점수까지 챙기는 완벽한 HTML 코드가 있습니다. 바로 <picture> 태그를 이용해 '우선순위'를 정해주는 것입니다.

<picture>
  <!-- 1순위: 최신 브라우저는 가장 가벼운 AVIF를 로딩 (용량 최소화) -->
  <source srcset="image.avif" type="image/avif">

  <!-- 2순위: AVIF를 모르는 브라우저는 WebP를 로딩 -->
  <source srcset="image.webp" type="image/webp">
  
  <!-- 3순위: 다 모르는 구형 브라우저는 JPG를 로딩 (보험용) -->
  <img src="image.jpg" alt="여기에 핵심 키워드가 포함된 이미지 설명">
</picture>

이 방식이 SEO에 완벽한 이유:

최고의 속도: 최신 기기 사용자에게는 가장 가벼운 AVIF를 제공해 로딩 속도를 극대화합니다.
안전성: 구형 기기 사용자에게도 이미지가 깨지지 않고 정상적으로 보입니다(사용자 경험 보호).

4. 놓치면 안 되는 SEO 핵심: alt 태그의 비밀

많은 분들이 <picture> 태그를 쓸 때 실수하는 부분입니다. alt 속성(대체 텍스트)을 어디에 넣어야 할까요?

❌ <source srcset="..." alt="키워드"> (틀림! 검색엔진이 못 읽음)
✅ <img src="..." alt="키워드"> (정답!)

검색 엔진 로봇(Crawler)과 시각장애인용 스크린 리더는 오직 <img> 태그만 읽습니다. 포맷이 AVIF든 WebP든 이미지의 '내용'은 같기 때문에, alt 속성은 반드시 본체인 <img> 태그에 딱 한 번만 적어주세요.

꿀팁: alt 태그에는 "IMG_1234.jpg" 같은 무의미한 파일명 대신, **"강남역 맛집 파스타 메뉴판 가격"**처럼 게시글의 핵심 키워드를 자연스럽게 넣어주세요. 구글 이미지 검색 노출에 큰 도움이 됩니다.

결론: 오늘부터 바로 적용할 3가지

사진 용량 확인 (개별 vs 전체):
- 개별 용량: 메인 사진(썸네일)은 100~200KB, 본문 중간에 들어가는 작은 사진은 50~100KB 수준을 권장합니다.
- 전체 용량: 페이지 하나당 이미지 총합이 3MB를 넘지 않도록 주의하세요.
📊 이미지 개수에 따른 계산법
- 사진이 5장일 때: (장당 200KB) × 5장 = 1MB (아주 쾌적함 ✅)
- 사진이 20장일 때: (장당 200KB) × 20장 = 4MB (위험 ⚠️)
  - 해결책: 사진이 많다면 장당 용량을 100KB 이하로 더 강하게 압축해야 합니다.
포맷 변환: 사진 포맷을 AVIF 또는 WebP로 변환해서 올리고 있나요? (Squoosh.app 같은 무료 변환 사이트 활용)
태그 확인: 모든 이미지에 alt 태그(대체 텍스트)를 꼼꼼히 넣었나요?

이미지 최적화는 가장 확실하고 빠르게 SEO 점수를 올릴 수 있는 '기술적 SEO'의 첫걸음입니다. 오늘 작성하는 글부터 바로 적용해 보세요!