웹사이트의 이미지를 더 빠르게 불러오는 방법 (흐려지지 않게)

이미지 무게가 중요한 이유

페이지에서 가장 느린 것은 보통 가장 큰 이미지이며, 브라우저가 Largest Contentful Paint(LCP)로 측정하는 것도 흔히 그것입니다. Google의 Core Web Vitals는 LCP 2.5초 미만을 좋음으로 봅니다. 모바일 연결에서는 3 MB짜리 히어로 사진 하나가 그 예산을 혼자 다 써 버릴 수 있습니다.

1. 이미지를 표시되는 크기로 제공하세요

너비 800픽셀로 보여 주는 자리에 4000픽셀 사진을 보내는 것은 의미가 없습니다. 실용적인 기준으로, 이미지는 표시 너비의 최대 약 두 배로 하면 고밀도 화면에서도 선명하게 유지됩니다. 일반적인 너비: 전체 폭 히어로는 1600–2000 px, 기사 이미지는 800–1200 px, 썸네일은 300–400 px.

2. 현대적인 형식을 사용하세요

WebP 파일은 비슷한 화질에서 보통 JPG보다 25–35% 작고, 오늘날의 모든 브라우저가 지원합니다. PNG는 무손실 그래픽이나 투명도가 필요한 곳에만 사용하세요. 오래된 소프트웨어를 지원해야 한다면 JPG를 대체본으로 두세요. 자세한 내용은 JPG vs PNG vs WebP를 참고하세요.

3. 합리적인 용량으로 압축하세요

이것은 대략적인 목표일 뿐 규칙이 아닙니다. 히어로 이미지는 약 200 KB 미만, 기사 안의 이미지는 약 100 KB 미만, 썸네일은 약 30 KB 미만. 슬라이더를 감으로 만지작거리는 대신 목표를 정하고, 그것을 충족하는 가장 높은 화질을 도구가 찾게 하세요.

4. 화면 아래쪽의 이미지는 지연 로딩하세요

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

지연 로딩(lazy loading)은 방문자가 그 근처로 스크롤할 때까지 이미지를 미룹니다. 페이지 맨 위의 히어로 이미지에는 적용하지 마세요 — 그것은 보통 LCP 요소이므로 즉시 로드되어야 합니다.

5. 항상 너비와 높이를 지정하세요

HTML에 크기가 있으면 브라우저는 이미지가 도착하기 전에 알맞은 공간을 확보하므로, 로딩하는 동안 페이지가 튀지 않습니다(그 튀는 현상은 Cumulative Layout Shift로 측정됩니다). 설명적인 alt 속성은 접근성과 이미지 검색에 도움이 됩니다.

6. srcset으로 여러 크기를 제공하세요

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

브라우저는 방문자의 화면에 충분히 선명한 가장 작은 파일을 고르므로, 휴대전화가 데스크톱 버전을 내려받는 일이 없습니다.

작업 결과를 확인하는 방법

페이지를 PageSpeed Insights나 Chrome 개발자 도구의 Lighthouse에 돌려 보세요. 둘 다 너무 크거나 최적화되지 않은 이미지를 알려 주고, 절약할 정확한 바이트 수를 추정해 줍니다.

파일 준비하기

1. 이미지를 WebP로 변환하세요.
2. 필요한 너비를 크기 조정 도구에서 설정하세요 — 비율은 고정한 채로.
3. 최대 파일 용량을 설정하고 결과를 전/후 슬라이더로 확인하세요.
4. srcset에서 쓰고 싶은 너비마다 파일을 하나씩 내보내세요.

내보낼 때마다 원본에서 작업하세요. 이미 압축된 사본을 다시 압축하면 원본을 한 번 압축하는 것보다 더 많은 화질을 잃습니다.

자주 묻는 질문