웹사이트 이미지 최적화와 PageSpeed 개선

로딩 속도는 구글이 데스크톱은 2018년, 모바일은 2021년부터 검색 순위 요소로 공식 인정한 항목입니다. 그뿐 아니라 전환율에도 곧바로 영향을 줍니다. 구글 자체 데이터에 따르면 로딩이 1초 늘어날 때마다 이탈률이 최대 32%까지 올라갑니다. 이커머스에서는 Portent의 조사 결과, 1초 만에 열리는 페이지가 5초 걸리는 페이지보다 전환율이 최대 3배 높았습니다.

웹페이지 전체 용량에서 이미지가 차지하는 비중은 보통 50~80%입니다. 그래서 이미지를 제대로 최적화하는 것이 어떤 사이트에서든 성능에 가장 큰 영향을 주는 작업입니다.

PageSpeed Insights가 이미지에서 보는 것

구글 PageSpeed Insights(PSI)는 페이지를 분석해 이미지 관련 문제를 여러 항목으로 짚어줍니다. 가장 자주 나오는 항목은 다음과 같습니다.

• "차세대 형식으로 이미지 제공": WebP나 AVIF를 쓰면 용량이 크게 줄어들 자리에 JPG나 PNG를 쓰고 있을 때 나옵니다.
• "적절한 크기의 이미지 사용": 서버에 올린 이미지가 실제 표시 영역보다 클 때 나옵니다. 400px 자리에 2000px 사진을 올린 경우가 대표적입니다.
• "화면 밖 이미지 지연 로딩": 사용자가 스크롤해 내려올 때 불러오면 될 아래쪽 이미지를 페이지와 함께 미리 다 받고 있을 때 나옵니다.
• "효율적인 이미지 인코딩": 체감 화질을 해치지 않고도 더 압축할 여지가 남아 있을 때 나옵니다.
• "LCP 이미지": 페이지의 Largest Contentful Paint에 해당하는 이미지, 즉 Core Web Vitals 지표 하나를 좌우하는 핵심 요소가 무엇인지 알려줍니다.

웹 이미지 최적화의 6가지 원칙

1. 이미지 종류에 맞는 형식 쓰기

압축을 시작하기도 전에, 형식 선택이 이미 가장 큰 영향을 미칩니다.

WebP는 같은 화질에서 JPG보다 25~35%, PNG보다 20~30% 작은 파일을 만듭니다. 2026년 기준 실사용 브라우저의 97% 이상이 지원하므로, 새로 만드는 사이트에서 WebP를 피할 기술적 이유는 없습니다.

2. 눈에 보이는 화질은 지키면서 압축하기

압축은 이미지 크기는 그대로 두고 파일 용량만 줄이는 작업입니다. JPG 사진이라면 품질을 100%에서 80%로 낮추는 것만으로 화면상 차이 없이 용량이 5~10배 줄어듭니다. 웹에는 이 구간이 최적입니다.

이미지 종류별 권장 용량은 다음과 같습니다.

• 히어로·대표 배너: 200KB 미만
• 상품 사진(이커머스): 50~150KB
• 블로그 글 이미지: 50~120KB
• 썸네일: 10~30KB
• 로고(PNG/WebP): 30KB 미만
• SVG 아이콘: 5KB 미만

3. 실제 표시 크기에 맞춰 올리기

가장 흔하면서 타격도 큰 실수가 표시 영역보다 훨씬 큰 이미지를 올리는 것입니다. 브라우저는 이미지를 통째로 내려받은 다음, 그릴 때 남는 픽셀을 버립니다.

이 실수가 얼마나 비싼지 보겠습니다.

• 3000×3000px 상품 사진을 600×600px 자리에 띄우면, 브라우저는 900만 픽셀을 받아 36만 개만 씁니다. 96%가 낭비입니다.
• 레이아웃 최대 폭이 1440px인 사이트에 가로 4000px 배너를 쓰면, 내려받은 픽셀의 63%가 곧바로 버려집니다.

규칙은 간단합니다. 서버에 올리는 이미지는 표시 크기의 최대 두 배까지만 하세요. 두 배로 잡는 이유는 레티나·HiDPI 화면을 감당하기 위해서입니다. 가로 600px 영역이라면 최대 1200px입니다.

ImageTools의 크기 조절 도구로 업로드 전에 픽셀이나 퍼센트 단위로 정확한 값을 넣어 크기를 맞추세요.

4. 레이지 로딩 적용하기

레이지 로딩은 페이지의 모든 이미지를 처음에 한꺼번에 받는 대신, 화면에 들어오기 직전에 불러오는 기법입니다. 효과가 상당합니다. 상품 목록이나 긴 글처럼 이미지가 많은 페이지에서는 초기 로딩 용량을 60~80%까지 줄일 수 있습니다.

가장 간단한 방법은 최신 HTML에 이미 들어 있습니다. 이미지 태그에 loading="lazy" 속성만 붙이면 됩니다.

<!-- 즉시 불러와야 하는 이미지 (화면 상단) -->
<img src="banner-main.webp" alt="배너" loading="eager">

<!-- 나중에 불러와도 되는 이미지 (화면 아래) -->
<img src="product-1.webp" alt="상품 1" loading="lazy">
<img src="product-2.webp" alt="상품 2" loading="lazy">

중요: 화면 상단(히어로, 배너, 첫 상품 사진)의 대표 이미지에는 절대 loading="lazy"를 걸지 마세요. LCP가 늦어지는데, LCP는 Core Web Vitals에서 가장 중요한 지표라 PageSpeed 점수에 곧바로 타격을 줍니다.

5. 이미지 태그에 width와 height 지정하기

브라우저는 페이지를 불러오기 시작할 때 이미지 크기를 알기도 전에 레이아웃을 잡습니다. width와 height가 지정되어 있지 않으면 자리를 제대로 비워두지 못하고, 이미지가 로드되는 순간 레이아웃이 "튀면서" 글자와 버튼이 밀립니다. PageSpeed는 이것을 Cumulative Layout Shift (CLS)라는 이름으로 측정하며, 이 역시 Core Web Vitals 지표 중 하나입니다.

<!-- 크기 미지정: 레이아웃이 튐 -->
<img src="product.webp" alt="상품">

<!-- 크기 지정: 처음부터 자리를 확보 -->
<img src="product.webp" alt="상품" width="600" height="600">

HTML에서 width와 height 값은 실제 표시 크기와 같을 필요가 없습니다. 비율만 정해주면 되고, 화면에 보이는 크기는 CSS가 알아서 처리합니다.

6. srcset으로 반응형 이미지 쓰기

srcset 태그를 쓰면 기기마다 다른 버전의 이미지를 내려줄 수 있습니다. 휴대폰에는 작은 이미지를, 데스크톱에는 큰 이미지를 보내는 식입니다. 어느 버전이 알맞은지는 브라우저가 화면을 보고 알아서 고릅니다.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="상품"
  width="800"
  height="800"
  loading="lazy"
>

상품 사진이 많은 이커머스라면 srcset만으로 모바일 사용자에게 전송되는 데이터를 40~60% 줄일 수 있습니다.

이미지 최적화 전체 체크리스트

페이지를 새로 올리거나 기존 이미지를 교체하기 전에 이 목록을 훑어보세요.

• ☐ 이미지를 WebP로(벡터는 SVG로)
• ☐ 압축 적용 — 사진은 가능한 한 150KB 미만으로
• ☐ 정확한 크기 — 표시 영역의 두 배를 넘기지 않기
• ☐ loading="lazy"를 화면 아래쪽 모든 이미지에
• ☐ loading="eager" (또는 속성 없음)를 화면 상단 대표 이미지에
• ☐ 모든 <img> 태그에 width와 height 지정
• ☐ 설명이 담긴 alt 속성을 모든 이미지에 (접근성 + SEO)
• ☐ srcset를 모바일과 데스크톱에서 크기 차이가 큰 이미지에
• ☐ LCP 이미지에는 loading="lazy"는 빼고, 가능하면 fetchpriority="high" 지정

플랫폼별 최적화

WordPress

워드프레스는 6.1 버전부터 서버가 지원한다면 WebP로 자동 변환합니다. 확실히 하려면 최적화 플러그인을 설치하세요. Imagify, ShortPixel ou Smush 같은 플러그인은 미디어 라이브러리에 이미 있는 이미지까지 압축하고 WebP로 바꾸고 레이지 로딩을 자동으로 붙여줍니다.

Shopify

쇼피파이는 2021년부터 이미지를 자동으로 WebP로 변환하고 기기에 맞는 버전을 내려줍니다. 판매자가 직접 챙겨야 할 것은 올리는 이미지의 크기입니다. 상품 사진은 2048×2048px가 권장이며, 쇼피파이가 표시 상황마다 알아서 줄여줍니다.

Wix, Squarespace 등 사이트 빌더

요즘 빌더는 대부분 압축과 레이지 로딩을 알아서 적용합니다. 사용자 몫으로 남는 건 적당한 크기의 이미지를 올리는 일입니다. 8MB짜리 카메라 원본을 그대로 올리면 서버에 부담이 가고 필요 이상으로 큰 변형 파일이 만들어질 수 있습니다.

순수 HTML/CSS 사이트와 프레임워크(Next.js, Nuxt 등)

이런 경우에는 최적화가 전적으로 개발자 몫입니다. 예를 들어 Next.js의 <Image> 컴포넌트는 레이지 로딩, srcset, WebP 변환을 자동으로 처리합니다. 이런 추상화가 없는 프레임워크라면 위 체크리스트를 따라 직접 최적화해야 합니다.

최적화 효과를 측정하는 방법

최적화를 적용한 뒤에는 다음 도구로 결과를 확인하세요.

• Google PageSpeed Insights (pagespeed.web.dev) — 요소별 진단까지 담긴 전체 분석을 모바일과 데스크톱으로 나눠 보여줍니다.
• Google Search Console → 페이지 경험 보고서 — 실제 방문자 데이터를 기준으로 Core Web Vitals 상태를 보여줍니다.
• WebPageTest.org — 로딩 워터폴까지 포함한 상세 기술 분석으로, 어떤 이미지가 LCP를 늦추는지 짚어낼 때 유용합니다.
• 크롬 개발자도구 → Network — "Img"로 필터를 걸면 불러온 모든 이미지와 각각의 용량, 다운로드 시간을 볼 수 있습니다.

자주 묻는 질문