이미지 최적화는 파일 압축만으로 끝나지 않습니다

웹 페이지의 초기 로딩이 느린 원인 가운데 가장 흔한 것은 화면에 비해 큰 이미지를 내려받는 일입니다. 데스크톱용 2,400px 사진을 휴대폰 카드 영역에 그대로 전송하면, CSS에서 폭을 100%로 줄여도 네트워크 전송량과 디코딩 비용은 줄지 않습니다. 반응형 이미지는 브라우저가 현재 화면 폭, 픽셀 밀도, 레이아웃의 실제 표시 폭에 맞는 파일을 선택하게 만드는 HTML 기능입니다. 같은 원본을 여러 규격으로 준비하고 srcset과 sizes를 정확히 연결하면 모바일 데이터 사용량, LCP, 서버 대역폭을 함께 개선할 수 있습니다.

srcset과 sizes의 역할을 분리해서 이해하기

srcset은 선택 가능한 이미지 파일과 각 파일의 고유 폭을 나열합니다. sizes는 CSS 레이아웃에서 이미지가 차지할 것으로 예상되는 폭을 브라우저에 알려 줍니다. 브라우저는 sizes로 표시 폭을 계산한 뒤 화면의 DPR(Device Pixel Ratio)까지 고려하여 srcset 후보 중 적절한 파일을 고릅니다. 따라서 srcset만 넣고 sizes를 생략하면 브라우저는 이미지가 뷰포트 전체 폭이라고 가정할 수 있어, 카드 안의 작은 이미지에도 큰 파일을 선택할 수 있습니다.

<img src="/images/product-960.webp" srcset="/images/product-480.webp 480w, /images/product-960.webp 960w, /images/product-1440.webp 1440w" sizes="(max-width: 767px) 100vw, (max-width: 1199px) 50vw, 360px" width="960" height="640" alt="검은색 무선 키보드가 놓인 작업용 책상" loading="lazy" decoding="async">

위 예시는 모바일에서 한 줄을 모두 쓰고, 태블릿에서는 두 열, 큰 화면에서는 최대 360px 카드에 표시되는 상황입니다. 480w, 960w, 1440w는 파일의 실제 픽셀 폭과 반드시 일치해야 합니다. 원본보다 큰 규격을 무의미하게 많이 만들 필요는 없지만, 일반적으로 480·768 또는 960·1440 정도의 단계는 카드와 본문 이미지에 충분히 실용적입니다. 이미지 URL에 폭을 표시하거나 이미지 변환 서비스의 width 파라미터를 사용하면 운영 중 후보 파일을 추적하기도 쉽습니다.

picture는 형식 전환과 화면별 구성이 필요할 때 사용합니다

picture 요소는 단순한 해상도 차이보다 선택 기준이 하나 더 있을 때 적합합니다. 대표적인 사례는 AVIF, WebP, JPEG의 형식 우선순위와 모바일·데스크톱의 다른 크롭입니다. 브라우저는 source를 위에서부터 검사하여 지원하는 조건의 첫 후보를 선택하고, 마지막 img는 대체 경로이자 접근성 정보를 담당합니다. source마다 media 조건과 srcset을 함께 제공할 수 있으므로, 모바일에서 인물이 잘리지 않게 다른 구도의 사진을 선택하는 작업에도 활용할 수 있습니다.

<picture><source type="image/avif" srcset="/images/hero-768.avif 768w, /images/hero-1440.avif 1440w" sizes="(max-width: 767px) 100vw, 1200px"><source type="image/webp" srcset="/images/hero-768.webp 768w, /images/hero-1440.webp 1440w" sizes="(max-width: 767px) 100vw, 1200px"><img src="/images/hero-1440.jpg" width="1440" height="720" alt="서비스 관리 화면을 보여 주는 대시보드" fetchpriority="high"></picture>

첫 화면의 대표 이미지는 LCP 후보가 되는 경우가 많으므로 loading=lazy를 넣지 않습니다. 대신 fetchpriority=high를 한 장에만 제한적으로 사용합니다. 페이지의 모든 이미지에 high를 적용하면 요청 우선순위가 경쟁하여 오히려 중요한 CSS와 글꼴, 대표 이미지의 로딩을 방해할 수 있습니다. 화면 아래쪽의 목록 이미지에는 loading=lazy를 적용하고, 사용자가 곧 보게 될 두세 번째 카드 정도만 기본 로딩으로 남기는 방식이 안정적입니다.

레이아웃 이동을 막는 width와 height

이미지의 width와 height 속성은 단순한 원본 정보가 아닙니다. 브라우저가 이미지를 받기 전부터 가로세로 비율을 예약하게 하므로 콘텐츠가 뒤늦게 밀리는 CLS를 줄입니다. CSS에서 max-width: 100%; height: auto;를 함께 쓰면 반응형 표시와 비율 예약을 모두 유지할 수 있습니다. 이미지가 화면별로 다른 비율로 잘리는 아트 디렉션이라면, 각 source의 이미지 비율을 동일하게 맞추거나 컨테이너의 aspect-ratio를 명시해 레이아웃이 흔들리지 않게 해야 합니다.

.article-image { display: block; width: 100%; max-width: 960px; height: auto; } .product-card__media { aspect-ratio: 3 / 2; overflow: hidden; } .product-card__media img { width: 100%; height: 100%; object-fit: cover; }

운영에서 확인할 체크리스트

  • 원본 파일을 그대로 재사용하지 말고 실제 표시 폭 기준의 파생 파일을 생성합니다.
  • 각 srcset의 w 값과 실제 파일 폭이 같은지 빌드 단계에서 검증합니다.
  • 카드, 본문, 히어로처럼 레이아웃별 sizes를 정하고 CSS 변경 시 함께 수정합니다.
  • 모든 의미 있는 이미지에 내용을 설명하는 alt를 쓰고, 장식 이미지는 빈 alt를 사용합니다.
  • 첫 화면 LCP 이미지는 lazy loading 대상에서 제외하고, 그 외에는 loading=lazy를 기본으로 적용합니다.
  • 배포 후 모바일 네트워크 조건에서 전송된 이미지 크기와 CLS, LCP를 실제로 측정합니다.

반응형 이미지의 핵심은 최신 형식을 무조건 도입하는 것이 아니라, 브라우저가 필요한 크기의 파일을 정확히 고르게 하는 데 있습니다. srcset, sizes, 이미지 크기 예약, 우선순위를 한 세트로 점검하면 시각 품질을 유지하면서도 페이지 체감 속도를 안정적으로 개선할 수 있습니다.