구조·마크업 · 공식 문서
SEO 이미지 사이즈, 표시 크기 기준과 점검 순서
구글 문서에는 모든 이미지에 맞는 픽셀·용량 숫자가 없고, 기준은 화면에 표시되는 크기입니다. 표시 크기보다 큰 파일을 보내지 않고, 기기 픽셀 비율에 맞춘 여러 크기를 srcset 으로 둡니다. 숫자 하한이 있는 곳은 대표 이미지뿐입니다(구글 Article 5만 픽셀 이상 권장, 네이버 og:image 150×150 초과).
「이미지는 몇 KB 이하로」 같은 숫자를 찾는 분이 많습니다. 그런데 같은 사진도 모바일 본문에 들어갈 때와 PC 첫 화면에 들어갈 때 맞는 크기가 다릅니다.
구글 이미지 문서와 크롬·web.dev 성능 문서를 대조해, 크기를 정하는 기준과 숫자 하한이 실제로 있는 자리를 나눴습니다.
발견 01
구글은 크기 숫자 대신 「표시되는 크기보다 크게 보내지 말 것」과 「고화질」을 함께 적었습니다
Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen.
이상적으로는 사용자 화면에 표시되는 크기보다 큰 이미지를 보내지 말아야 한다.
| 문서가 적은 것 | 원문 |
|---|---|
| 흐린 이미지보다 고화질 사진 | High-quality photos appeal to users more than blurry, unclear images.고화질 사진은 흐리고 불분명한 이미지보다 사용자의 마음을 끈다. |
| 이미지는 페이지 크기의 가장 큰 몫인 경우가 많음 | That said, images are often the largest contributor to overall page size, which can make pages slow and expensive to load.다만 이미지는 페이지 전체 크기에서 가장 큰 몫을 차지하는 경우가 많아, 페이지를 느리고 비싸게 만들 수 있다. |
| 표시 크기보다 큰 파일은 낭비 | Anything larger than that just results in wasted bytes and slows down page load time.표시 크기보다 큰 부분은 낭비되는 바이트일 뿐이고 페이지 로드를 늦춘다. |
| 화면 크기별로 다른 버전을 srcset 으로 | The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes.srcset 속성으로 같은 이미지의 여러 버전을 화면 크기별로 지정할 수 있다. |
| 브라우저가 픽셀 밀도와 화면 크기로 고름 | It offers a fallback approach so the browser can choose the right image depending on device capabilities, like pixel density and screen size.picture 요소는 브라우저가 픽셀 밀도와 화면 크기 같은 기기 특성에 맞는 이미지를 고르게 해 준다. |
두 요구는 표시 크기 하나로 만납니다. 표시 너비에 기기 픽셀 비율을 곱한 크기로 파일을 만들면 선명하고, 그보다 크면 용량만 늘어납니다.
아래 표는 그 계산을 예로 든 것입니다. 표시 너비는 설명용 값이고, 실제 값은 사이트 레이아웃에서 잽니다.
| 자리(예시) | 표시 너비 | 1배 화면용 파일 너비 | 2배 화면용 파일 너비 | 3배 화면용 파일 너비 |
|---|---|---|---|---|
| 모바일 본문 이미지 | 360px | 360px | 720px | 1,080px |
| PC 본문 이미지 | 720px | 720px | 1,440px | 2,160px |
| PC 첫 화면 큰 이미지 | 1,200px | 1,200px | 2,400px | 3,600px |
발견 02
용량은 형식별 효율 기준과 비교해 재고, 줄일 수 있는 용량이 4 KiB 이상이면 크롬이 표시합니다
The estimated byte savings are calculated by comparing the download size of the image to an efficient bytes-to-pixel ratio for the image format.
줄일 수 있는 용량은 이미지의 다운로드 크기를 그 형식의 효율적인 바이트·픽셀 비율과 비교해 계산한다.
| 문서가 적은 것 | 원문 |
|---|---|
| 형식별 바이트·픽셀 비율과 비교해 줄일 용량을 추정 | The estimated byte savings are calculated by comparing the download size of the image to an efficient bytes-to-pixel ratio for the image format.줄일 수 있는 용량은 이미지의 다운로드 크기를 그 형식의 효율적인 바이트·픽셀 비율과 비교해 계산한다. |
| 줄일 용량이 4 KiB 미만이면 표시하지 않음 | Note: Any images with estimated byte savings less than 4 KiB won't be flagged.참고: 줄일 수 있는 용량이 4 KiB 미만인 이미지는 표시하지 않는다. |
| 압축 수준을 조절해 용량을 줄임 | Most image formats support a compression level that can be tuned to improve the image file size at the cost of image quality.대부분의 이미지 형식은 압축 수준을 조절할 수 있어, 화질을 조금 내주고 파일 크기를 줄일 수 있다. |
| 최신 이미지 최적화와 반응형 이미지 기법 적용 | Make sure to apply the latest image optimization and responsive image techniques to provide a high quality and fast user experience.고화질이면서 빠른 사용자 경험을 위해 최신 이미지 최적화와 반응형 이미지 기법을 적용하라. |
그래서 용량은 「몇 KB 이하」가 아니라 「진단 도구가 줄일 수 있다고 표시한 이미지가 남았는가」로 확인합니다. 크롬 개발자 도구의 「Improve image delivery」 인사이트가 그 목록을 보여 줍니다.
형식을 바꿔 용량을 줄이는 방법은 「WebP SEO 영향」 편에 자세히 적었습니다.
발견 03
숫자 하한이 적힌 곳은 검색 결과 대표 이미지 3곳이고, 모두 최소 기준입니다
| 자리 | 하한 | 원문 |
|---|---|---|
| 구글 Article 구조화 데이터 이미지 | 가로×세로 5만 픽셀 이상 권장 | For best results, we recommend providing multiple high-resolution images (minimum of 50K pixels when multiplying width and height) with the following aspect ratios: 16x9, 4x3, and 1x1.가장 좋은 결과를 위해 16x9·4x3·1x1 비율의 고해상도 이미지(가로×세로 5만 픽셀 이상)를 여러 장 제공하길 권장한다. |
| 구글 디스커버 이미지 | 너비 1200픽셀 이상 권장 | At least 1200 px wide너비 1200px 이상 |
| 네이버 og:image | 150×150 초과, 파일 5,000바이트 이상 | 이미지 크기가 150x150 보다 커야 합니다. 이미지 파일 사이즈 크기가 5,000 byte 이상이어야 합니다. |
대표 이미지는 상한이 아니라 하한이 적혀 있습니다. 검색 결과와 디스커버가 썸네일로 쓰기 때문에, 구글은 대표 이미지에 가능하면 고해상도를 쓰라고 적었습니다.
본문에 보이는 이미지와 대표 이미지를 같은 파일로 쓸 필요는 없습니다. 본문에는 표시 크기에 맞춘 파일을, 메타 태그에는 하한을 넘는 큰 파일을 둡니다.
Use a high resolution, if possible.
가능하면 고해상도를 쓰라.
발견 04
첫 화면 큰 이미지는 크기보다 로딩 순서가 LCP를 가릅니다
Warning: Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay, and will have a negative impact on LCP.
경고: LCP 이미지는 절대 지연 로딩하지 말라. 늘 불필요한 리소스 로드 지연을 낳고 LCP를 나쁘게 만든다.
| 문서가 적은 것 | 원문 |
|---|---|
| LCP 이미지에는 지연 로딩을 걸지 않음 | Warning: Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay, and will have a negative impact on LCP.경고: LCP 이미지는 절대 지연 로딩하지 말라. 늘 불필요한 리소스 로드 지연을 낳고 LCP를 나쁘게 만든다. |
| LCP 이미지에 fetchpriority="high" | It's a good idea to set fetchpriority="high" on an <img> element if you think it's likely to be your page's LCP element.페이지의 LCP 요소가 될 것 같은 img 요소에는 fetchpriority="high" 를 다는 것이 좋다. |
| 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초 안에 일어나야 한다. |
발견 05
같은 기준도 B2B·B2C·B2G 사이트는 손볼 자리가 다릅니다
예시 ① 제품 사진이 많은 기업 사이트(B2B)
카메라 원본(가로 수천 픽셀)을 그대로 올려 목록 썸네일로 줄여 보여 주는 경우가 많습니다. 목록용과 상세용 파일을 따로 만들어 표시 크기에 맞춥니다.
확대해 보는 제품 사진은 확대 화면의 표시 크기를 기준으로 큰 파일을 따로 둡니다.
예시 ② 긴 상세 이미지를 쓰는 쇼핑몰(B2C)
세로로 긴 상세 이미지 한 장은 모바일에서 표시 너비가 좁아 파일 너비를 줄일 여지가 큽니다. 모바일용 너비를 srcset 으로 따로 둡니다.
상품 대표 사진은 검색 결과 썸네일에도 쓰이므로 대표 이미지 하한을 넘는 파일을 메타 태그에 둡니다.
예시 ③ 첫 화면에 큰 배너를 두는 공공기관 누리집(B2G)
첫 화면 슬라이드 배너가 LCP 요소가 되는 경우가 많습니다. 첫 장에는 지연 로딩을 걸지 않고, 보이지 않는 나머지 장만 늦게 불러옵니다.
배너를 PC 너비 그대로 모바일에 보내면 용량만 커집니다. 모바일용 너비를 따로 둡니다.
그럼 이미지 크기와 용량은 어떤 순서로 점검하나요?
- 주요 페이지를 크롬 개발자 도구로 열어 「Improve image delivery」 인사이트의 이미지 목록을 뽑습니다.
- 이미지마다 화면에 표시되는 너비를 재고, 기기 픽셀 비율 2배 기준 파일 너비를 정합니다.
- 표시 크기보다 큰 파일은 줄이고, 여러 너비를 srcset 으로 둔 뒤 src 에 대체 URL을 남깁니다.
- 첫 화면 큰 이미지에서 지연 로딩을 빼고 fetchpriority="high" 를 붙입니다.
- 대표 이미지(og:image·구조화 데이터)는 하한을 넘는 파일로 따로 지정합니다.
- 같은 인사이트를 다시 열어 4 KiB 이상 줄일 이미지가 남았는지 확인합니다.
조사 방법
- Google Search Central 「Google image SEO best practices」 (문서 수정일 2026-03-02) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/appearance/google-images
- 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
- Google Search Central 「Article (Article, NewsArticle, BlogPosting) structured data」 (문서 수정일 2026-09-08) · 최종 확인일 2026-10-18 · https://developers.google.com/search/docs/appearance/structured-data/article
- Google Search Central 「Google Discover and your website」 (문서 수정일 2026-03-09) · 최종 확인일 2026-10-18 · https://developers.google.com/search/docs/appearance/google-discover
- 네이버 서치어드바이저 「콘텐츠 마크업」 · 최종 확인일 2026-10-18 · https://searchadvisor.naver.com/guide/markup-content
- 표시 너비와 파일 너비 표는 계산 예시입니다. 표시 너비는 문서가 정한 값이 아니라 설명을 위해 고른 값입니다.
- 자리별 기준과 점검 순서는 위 문서들의 권장 사항을 점검 단위로 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 구글 원문은 영어판(hl=en)이고, 문서·도구 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다. 크롬·web.dev 문서는 영어 원문입니다.