구조·마크업 · 공식 문서
WebP SEO 영향, AVIF·JPG 선택 기준
구글 검색은 WebP와 AVIF를 JPEG·PNG와 같은 목록에 지원 형식으로 적었고, 형식 사이에 우선순위를 두지 않았습니다. 이득은 용량입니다. 크롬 문서는 두 형식의 압축이 더 낫고, 이미지 다운로드 시간을 줄이면 LCP가 좋아질 수 있다고 적었습니다.
속도 진단 도구가 WebP·AVIF 같은 새 형식을 권하면, 형식만 바꿔도 검색에서 유리해지는지 궁금해집니다.
구글 검색의 지원 형식 문서와 크롬·web.dev 성능 문서를 대조해, 형식이 색인과 속도에 각각 무엇을 바꾸는지 나눠 보았습니다.
발견 01
구글 검색은 WebP·AVIF를 포함한 이미지 형식 7가지를 같은 줄에 지원 형식으로 적었습니다
Google Search supports images referenced in the src attribute of img in the following file formats: BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF.
구글 검색은 img 의 src 속성에서 참조한 이미지 중 BMP, GIF, JPEG, PNG, WebP, SVG, AVIF 형식을 지원한다.
| 구글 문서 | 원문 |
|---|---|
| Google 이미지 검색엔진 최적화 권장사항 | Google Search supports images referenced in the src attribute of img in the following file formats: BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF.구글 검색은 img 의 src 속성에서 참조한 이미지 중 BMP, GIF, JPEG, PNG, WebP, SVG, AVIF 형식을 지원한다. |
| Google에서 색인을 생성할 수 있는 파일 형식 | Image formats: BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF이미지 형식: BMP, GIF, JPEG, PNG, WebP, SVG, AVIF |
| 같은 이미지 문서 · 확장자 | It's also a good idea to have the extension of your filename match with the file type.파일명 확장자를 실제 파일 형식과 맞추는 것도 좋다. |
색인 면에서 JPEG와 WebP는 같은 자리에 있습니다. 두 문서 모두 둘을 지원 형식으로 나란히 적었습니다.
바꿀 때 지킬 것은 확장자입니다. 구글은 파일명 확장자를 실제 형식과 맞추라고 적었으니, WebP 파일에는 .webp 확장자를 붙입니다.
발견 02
WebP·AVIF의 이득은 용량이고, 다운로드 시간이 줄면 LCP가 좋아질 수 있습니다
AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts.
AVIF와 WebP는 예전 형식인 JPEG·PNG보다 압축과 화질 특성이 뛰어난 이미지 형식이다.
| 문서가 적은 것 | 원문 |
|---|---|
| 이미지는 페이지 크기의 가장 큰 몫인 경우가 많음 | That said, images are often the largest contributor to overall page size, which can make pages slow and expensive to load.다만 이미지는 페이지 전체 크기에서 가장 큰 몫을 차지하는 경우가 많아, 페이지를 느리고 비싸게 만들 수 있다. |
| 이미지 다운로드 시간을 줄이면 LCP 개선 가능 | Reducing the download time of images can improve the perceived load time of the page and LCP.이미지 다운로드 시간을 줄이면 체감 로드 시간과 LCP를 개선할 수 있다. |
| AVIF는 같은 품질에서 더 작은 파일 | AVIF is supported in the latest version of all major browsers and offers smaller file sizes compared to other formats with the same quality settings.AVIF는 모든 주요 브라우저의 최신 버전이 지원하고, 같은 품질 설정에서 다른 형식보다 파일이 작다. |
| WebP는 주요 브라우저 모두 지원 | WebP is supported by all major browsers and provides better lossy and lossless compression for images on the web.WebP는 모든 주요 브라우저가 지원하고, 웹 이미지에 더 나은 손실·무손실 압축을 제공한다. |
| LCP 기준은 페이지 로드 시작 뒤 2.5초 안 | Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.LCP(최대 콘텐츠 렌더링 시간)는 로딩 성능을 잰다. 좋은 사용자 경험을 위해 LCP 는 페이지가 로드되기 시작한 뒤 2.5초 안에 일어나야 한다. |
형식 변환은 LCP의 여러 구간 중 다운로드 구간 하나를 줄입니다. web.dev 는 자바스크립트가 끝날 때까지 이미지가 숨겨진 페이지라면 줄인 시간이 다른 구간으로 옮겨 갈 뿐이라고 설명했습니다.
The reason this happens is because, on this page, the LCP element is hidden until the JavaScript code finishes loading, and then everything is revealed at once.
이런 일이 생기는 까닭은 이 페이지에서 LCP 요소가 자바스크립트 로드가 끝날 때까지 숨겨져 있다가 한꺼번에 드러나기 때문이다.
발견 03
이미지 종류에 따라 고를 형식은 5가지로 나뉘고, 새 형식에는 대체 이미지를 함께 둡니다
| 이미지 종류 | 고를 형식 | 근거 원문 |
|---|---|---|
| 사진(제품·현장·인물) | AVIF 또는 WebP, img src 에 JPEG 대체 | AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts.AVIF와 WebP는 예전 형식인 JPEG·PNG보다 압축과 화질 특성이 뛰어난 이미지 형식이다. |
| 로고·아이콘·단순 도형 | SVG | With a finite amount of code, an SVG image can scale to any size.SVG 이미지는 정해진 양의 코드로 어떤 크기로든 늘어난다. |
| 움직이는 이미지 | MP4·WebM 동영상(정지 이미지는 PNG·WebP) | Consider using MPEG4 or WebM videos for animations and PNG or WebP for static images instead of GIF to save network bytes.네트워크 용량을 아끼려면 움직이는 이미지는 GIF 대신 MPEG4·WebM 동영상을, 정지 이미지는 PNG·WebP를 고려하라. |
| 구형 iPhone 방문이 많은 사이트 | picture 요소로 JPEG·PNG 대체 함께 제공 | Note: Webp and AVIF images videos won't work on iPhones before iOS 16.참고: iOS 16 이전 iPhone 에서는 WebP·AVIF 이미지가 보이지 않는다. |
| 첫 화면 큰 이미지(LCP 요소) | 형식 변환과 함께 표시 지연 원인도 점검 | This example helps illustrate the point that you need to optimize all of these subparts in order to achieve the best LCP outcomes.이 예는 최선의 LCP를 얻으려면 LCP의 하위 구간을 모두 줄여야 한다는 점을 보여 준다. |
However, some browsers and crawlers don't understand these attributes. We recommend that you always specify a fallback URL using the src attribute.
다만 일부 브라우저와 크롤러는 이 속성(srcset·picture)을 이해하지 못한다. 늘 src 속성으로 대체 URL을 지정하라.
새 형식은 picture 요소 안에 WebP·AVIF 소스로 둡니다. 맨 끝 img 요소의 src 에는 JPEG나 PNG를 둡니다. 구글은 picture 요소가 새 형식을 지원하지 않는 클라이언트를 위한 대체 방식이라고 적었습니다.
CSS 배경 이미지로 넣은 사진은 형식을 바꿔도 구글 이미지 색인에는 들어가지 않습니다. 구글은 CSS 이미지를 색인하지 않는다고 적었습니다.
발견 04
같은 기준도 B2B·B2C·B2G 사이트는 바꿀 범위가 다릅니다
예시 ① 제품 사진이 많은 산업 장비 기업 사이트(B2B)
사진은 WebP로 바꾸고, 로고와 아이콘은 SVG로 둡니다. 제품 사진에 JPEG 대체를 남겨 두면 오래된 사내 브라우저에서도 보입니다.
도면 미리보기처럼 선이 많은 이미지는 변환 뒤 화질을 눈으로 확인합니다.
예시 ② 상세 이미지가 무거운 쇼핑몰(B2C)
상품 상세의 긴 세로 이미지가 페이지 용량 대부분을 차지하는 경우가 많습니다. 여기부터 AVIF나 WebP로 바꾸고 JPEG 대체를 둡니다.
움직이는 GIF 안내는 짧은 동영상으로 바꿉니다. 크롬 문서는 큰 GIF가 동영상보다 비효율적이라고 적었습니다.
예시 ③ 다양한 기기로 방문하는 공공기관 누리집(B2G)
방문 기기가 넓으므로 모든 새 형식 이미지에 JPEG·PNG 대체를 둡니다. 크롬 문서는 iOS 16 이전 iPhone 에서 WebP·AVIF가 보이지 않는다고 적었습니다.
행사 포스터처럼 글자가 많은 이미지는 형식보다 글자를 본문에 함께 적는 일이 먼저입니다.
그럼 이미지 형식은 어떤 순서로 바꾸나요?
- PageSpeed Insights 로 주요 페이지를 열어 용량이 큰 이미지 목록을 뽑습니다.
- 위 표의 이미지 종류 5가지로 나누고 종류마다 형식을 정합니다.
- 새 형식 이미지는 picture 요소로 넣고 img src 에 JPEG·PNG 대체를 둡니다.
- 확장자를 실제 형식과 맞추고, 바뀐 이미지 URL이 페이지에 제대로 걸렸는지 확인합니다.
- Search Console 의 Core Web Vitals 보고서에서 바꾼 페이지의 LCP를 지켜봅니다.
조사 방법
- Google Search Central 「Google image SEO best practices」 (문서 수정일 2026-03-02) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/appearance/google-images
- Google Search Central 「File types indexable by Google」 (문서 수정일 2026-02-03) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/indexable-file-types
- Chrome for Developers 「Improve image delivery」 (문서 수정일 2025-10-08) · 최종 확인일 2026-10-25 · https://developer.chrome.com/docs/performance/insights/image-delivery
- web.dev 「Optimize Largest Contentful Paint」 (문서 수정일 2025-03-31) · 최종 확인일 2026-10-25 · https://web.dev/articles/optimize-lcp
- web.dev (Google Chrome) 「Web Vitals」 (문서 수정일 2024-10-31) · 최종 확인일 2026-10-18 · https://web.dev/articles/vitals
- 형식 선택 기준 5가지는 위 문서들의 권장 사항을 이미지 종류 단위로 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 구글 원문은 영어판(hl=en)이고, 문서·도구 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다. 크롬·web.dev 문서는 영어 원문입니다.