RWD Image

웹 페이지의 용량을 줄이고 사용자 환경에 최적화된 시각적 경험을 제공하기 위해서는 반응형 이미지(RWD Image) 처리가 필수적입니다.

단순히 width: 100%를 주는 것을 넘어, 기기의 해상도와 화면 크기에 따라 가장 적합한 이미지를 불러오는 3가지 핵심 방법을 정리해 드립니다.

---

1. CSS를 이용한 유동적 이미지 (Fluid Image)

가장 기초적인 방법으로, 이미지가 부모 요소의 너비를 넘지 않고 화면 크기에 따라 줄어들게 만듭니다.

• 방법: max-width: 100%와 height: auto를 설정합니다.
• 특징: 이미지가 화면보다 크더라도 부모 컨테이너에 맞춰 비율을 유지하며 축소됩니다.

CSS

 

img {
  max-width: 100%;
  height: auto;
}

---

2. srcset과 sizes 속성 (해상도 대응)

같은 비율의 이미지지만, **고해상도(Retina)**나 대화면 사용자를 위해 용량이 큰 이미지를 선택적으로 보여줄 때 사용합니다.

• srcset: 브라우저에게 선택할 수 있는 이미지 후보군과 그 너비(w)를 알려줍니다.
• sizes: 화면 크기에 따라 이미지가 차지할 실제 너비를 브라우저에게 힌트로 줍니다.

HTML

 

<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
     sizes="(max-width: 600px) 480px, 800px" 
     alt="반응형 이미지 예시">

---

3. <picture> 태그 (아트 디렉션)

단순한 크기 조절이 아니라, 화면 비율에 따라 아예 다른 이미지를 보여줘야 할 때 사용합니다. (예: PC에서는 가로가 긴 사진, 모바일에서는 인물 중심의 세로 사진)

• <source>: 미디어 쿼리 조건(media)에 맞는 이미지를 우선적으로 찾습니다.
• <img>: 가장 하단에 위치하며, 조건에 맞는 것이 없거나 <picture>를 지원하지 않는 브라우저를 위한 대비책(Fallback)입니다.

HTML

 

<picture>
  <source media="(min-width: 768px)" srcset="desktop-view.jpg">
  <source media="(max-width: 767px)" srcset="mobile-view.jpg">
  <img src="default.jpg" alt="풍경 사진">
</picture>

---

📋 반응형 이미지 전략 요약표

방법	주요 키워드	용도
CSS 방식	max-width: 100%	모든 이미지가 틀을 벗어나지 않게 함
srcset	고해상도, 해상도 대응	같은 그림이지만 더 선명한/가벼운 이미지 선택
picture	아트 디렉션, 포맷 대응	화면 크기별 아예 다른 구도의 사진 노출
WebP/Avif	최신 포맷 지원	브라우저 사양에 따른 고효율 압축 포맷 제공

---

학습 정리

• 단순히 이미지를 줄이는 것보다 기기 크기에 맞는 용량의 이미지를 보내는 것이 웹 성능(LCP) 최적화의 핵심입니다.
• loading="lazy" 속성을 함께 사용하면 화면에 보이지 않는 이미지는 나중에 불러와 페이지 로딩 속도를 더 높일 수 있습니다.
• 성능이 중요하다면 srcset을, 디자인적 의도가 중요하다면 <picture>를 선택하세요.

---

다양한 환경에서 이미지를 스마트하게 서빙하는 방법을 정복하셨습니다!

---