웹사이트 이미지 최적화 실전 체크리스트
2026년 7월 28일 검토
Boltpic
현재 Boltpic 도구의 동작을 설명하고 관련 기술 자료를 연결했습니다. 이미지·브라우저·기기에 따라 달라지는 결과는 고정값이 아니라 조건과 함께 안내합니다.
이미지는 페이지 전송량과 LCP에 큰 영향을 주는 자산입니다. 특히 첫 화면의 큰 사진이 실제 표시 크기보다 지나치게 크거나 늦게 발견되면, 사용자가 내용을 보기까지의 시간이 길어집니다.
아래 항목은 일반적인 작업 순서로 정리했습니다. 페이지 구성에 따라 효과가 달라지므로 변경 전후의 실제 지표를 비교하세요.
1. 표시되는 크기로 내보내기
웹에서 가장 흔한 낭비는 400픽셀짜리 자리에 4,000픽셀 사진을 밀어 넣는 것입니다. 브라우저는 보여 줄 수 있는 것의 10배를 내려받게 됩니다. 파일을 표시 크기 근처로(고해상도 화면 대비 2배까지) 줄이고, 레이아웃이 유동적이면 브라우저가 여러 크기 중에서 고르게 하세요.
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="해질녘의 항구"
/>이 마크업을 사용하면 브라우저가 화면 폭과 픽셀 밀도에 맞는 후보를 고릅니다. 작은 화면이 불필요하게 큰 파일을 받지 않으므로, 절감 폭은 후보 이미지의 크기와 실제 레이아웃에 따라 달라집니다.
2. 모든 이미지에 width와 height 지정
브라우저가 이미지 크기를 미리 모르면 이미지가 도착할 때 주변 콘텐츠가 이동할 수 있습니다. 이 움직임은 Core Web Vitals의 CLS에 영향을 줍니다. 이미지에 width·height 속성이나 CSS aspect-ratio를 지정해 로딩 전에 자리를 확보하세요.
3. 화면 아래 이미지는 지연 로딩
loading="lazy"는 화면에서 멀리 떨어진 이미지의 요청을 늦추도록 브라우저에 알립니다. 긴 문서의 첫 로딩 요청을 줄이는 데 유용하며, 현재 주요 브라우저에서 지원됩니다.
첫 화면의 주요 이미지에 지연 로딩을 일괄 적용하지 마세요. 그 이미지가 LCP 요소라면 요청을 미루는 것이 지표를 늦출 수 있습니다. 실제 LCP 이미지로 확인된 경우 즉시 로딩하고, 측정 결과 우선순위가 필요하면 fetchpriority="high"를 검토하세요.
4. 용량 예산을 정하고 형식으로 맞추기
용량 예산은 사이트의 속도 목표와 이미지 역할에 맞춰 정하세요. 처음 점검할 때는 히어로 200KB, 본문 이미지 100KB, 썸네일 30KB 정도를 출발점으로 삼을 수 있지만 절대 기준은 아닙니다. 사진은 WebP나 JPG로, 글자·투명도가 중요한 그래픽은 PNG로 내보낸 뒤 실제 화면에서 품질을 확인하세요.
5. 캐시 정책 설정
버전이 붙은 이미지에는 배포 방식에 맞는 캐시 수명을 설정하세요. photo.a1b2c3.webp처럼 파일명에 콘텐츠 해시를 넣으면, 이미지가 바뀔 때 새 URL로 배포할 수 있습니다. CDN은 정적 이미지의 전송 지연을 줄일 수 있지만, 효과는 방문자 위치, 캐시 적중률, 전체 전송 구성에 따라 달라집니다.
개발자 도구로 확인하는 순서
- 개발자 도구 → Network에서 “Img” 필터를 켜고 새로고침한 뒤 전송 크기순으로 정렬합니다. 큰 파일부터 실제 표시 크기와 형식을 확인하세요.
- 상위 파일이 표시 크기보다 지나치게 크다면 리사이즈하고, WebP나 JPG로 다시 내보낸 뒤 화질과 용량을 비교하세요. Boltpic의 리사이즈·압축·변환 도구가 브라우저에서 처리합니다.
- 모바일에서 가장 큰 이미지를 확인하세요. 실수로 지연 로딩되고 있진 않은지, width/height는 있는지.
- 수정 후 Lighthouse의 이미지 크기·형식 관련 진단을 다시 확인합니다. 진단 이름과 제공 여부는 Lighthouse 버전에 따라 달라질 수 있습니다.
배포 후에도 같은 점검을 반복하세요. 네트워크 환경, 반응형 이미지 후보, 페이지 구성에 따라 각 변경의 실제 효과가 달라집니다.