이미지가 느린 페이지를 만드는 이유

상품, 포트폴리오, 게시물 목록처럼 이미지가 많은 화면에서는 파일 크기만 줄인다고 성능 문제가 끝나지 않습니다. 데스크톱용으로 만든 큰 이미지를 휴대폰에서도 그대로 내려받으면 네트워크 전송량과 이미지 디코딩 시간이 늘어납니다. 반대로 이미지 영역의 가로·세로 크기를 미리 정하지 않으면 이미지가 로드되는 순간 본문과 버튼이 아래로 밀립니다. 사용자가 누르려던 버튼 위치가 바뀌는 현상은 CLS(Cumulative Layout Shift)를 높이고 실제 사용성을 떨어뜨립니다.

반응형 이미지의 목표는 화면 폭, 해상도, 표시 크기에 맞는 후보 파일을 브라우저가 선택하게 만드는 것입니다. HTML의 srcset과 sizes는 이를 위한 표준 기능입니다. CSS로 이미지를 작게 보이게 하더라도 다운로드할 원본은 자동으로 작아지지 않는다는 점을 먼저 구분해야 합니다.

srcset과 sizes의 역할

srcset에는 같은 이미지를 여러 폭으로 생성한 후보를 나열합니다. 각 후보 뒤의 640w, 960w 같은 값은 실제 이미지의 픽셀 폭입니다. sizes는 CSS 레이아웃에서 이미지가 어느 정도 폭으로 표시될지를 브라우저에 알려 줍니다. 브라우저는 뷰포트 폭, 기기 픽셀 비율, sizes 계산 결과를 함께 사용해 과도하게 큰 파일을 피합니다.

<img src="/images/project-960.webp" srcset="/images/project-480.webp 480w, /images/project-960.webp 960w, /images/project-1440.webp 1440w" sizes="(max-width: 767px) 100vw, (max-width: 1199px) 50vw, 560px" width="1440" height="900" alt="관리자 대시보드 프로젝트 화면" loading="lazy" decoding="async">

이 예시에서 767px 이하 화면은 이미지가 화면 폭 전체를 쓰므로 100vw입니다. 태블릿 구간에서는 두 열 카드의 절반 폭인 50vw를 사용하고, 넓은 화면에서는 카드 폭이 560px을 넘지 않는다는 사실을 명시합니다. sizes를 생략하면 브라우저가 큰 후보를 고를 가능성이 높으므로, 실제 CSS 그리드 규칙과 함께 관리해야 합니다.

CLS를 막는 width와 height

width와 height는 이미지를 고정 크기로 표시하라는 뜻이 아닙니다. 브라우저가 원본의 가로세로 비율을 미리 계산해 빈 공간을 예약할 수 있게 하는 메타데이터입니다. 반응형 스타일을 적용해도 이 속성은 유지하는 편이 좋습니다. 아래처럼 이미지 자체에는 비율을, 컨테이너에는 레이아웃 규칙을 둡니다.

.card-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #f1f3f5; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

목록 카드에서 모든 썸네일의 비율이 동일하다면 aspect-ratio를 컨테이너에 지정하는 방식도 유용합니다. 다만 원본 비율이 제각각이면 object-fit: cover로 인해 중요한 부분이 잘릴 수 있습니다. 사람 얼굴, 문서 화면, 제품 라벨처럼 잘림이 문제가 되는 콘텐츠는 별도 크롭 이미지를 만들거나 object-fit: contain 적용 여부를 검토해야 합니다.

첫 화면 이미지와 지연 로딩을 구분하기

모든 이미지에 loading=lazy를 붙이면 첫 화면의 핵심 이미지까지 늦게 표시될 수 있습니다. 페이지 진입 직후 보이는 대표 이미지나 LCP(Largest Contentful Paint) 후보는 지연 로딩에서 제외하고, 필요하다면 높은 우선순위를 지정합니다. 반면 스크롤 아래의 카드, 본문 삽화, 추천 목록 이미지는 lazy loading으로 네트워크 경쟁을 줄이는 편이 적절합니다.

<img src="/images/hero-1280.webp" width="1280" height="720" alt="서비스 관리 화면" fetchpriority="high"> <img src="/images/article-640.webp" width="640" height="400" alt="기술 문서 예시 화면" loading="lazy">

fetchpriority=high는 모든 이미지에 적용하는 속성이 아닙니다. 일반적으로 한 페이지에서 가장 중요한 첫 화면 이미지 한 장 정도에만 사용합니다. 여러 리소스를 모두 높음으로 지정하면 브라우저의 우선순위 판단을 방해해 오히려 성능이 흔들릴 수 있습니다.

운영 전 확인할 항목

  • 원본 이미지마다 480px, 960px, 1440px처럼 실제 레이아웃에 맞는 폭 후보를 준비합니다.
  • CSS의 최대 표시 폭과 sizes의 조건이 일치하는지 모바일·태블릿·데스크톱에서 확인합니다.
  • 모든 콘텐츠 이미지에 정확한 width, height 또는 예약 가능한 aspect-ratio를 제공합니다.
  • 첫 화면 대표 이미지는 lazy loading에서 제외하고, 화면 아래 이미지만 지연 로딩합니다.
  • 개발자 도구의 Network 탭에서 작은 화면에 과도하게 큰 이미지가 내려받아지지 않는지 점검합니다.

반응형 이미지는 디자인 요소가 아니라 전송량, 렌더링 안정성, 검색 유입 후 이탈률에 직접 영향을 주는 구현 항목입니다. 이미지 후보, 표시 크기, 공간 예약, 로딩 우선순위를 함께 설계하면 화면 품질을 유지하면서도 실제 로딩 비용을 줄일 수 있습니다.