RWD Image 반응형 이미지

 

💡 

RWD Image: 반응형 이미지

기기의 해상도와 화면 크기에 따라 자동으로 크기가 조정되는 이미지.

 

---

 

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

부모 컨테이너에 맞춰 이미지 크기가 자동 조정되는 방식.

img {
  max-width: 100%;  /* 부모 요소 너비를 넘지 않도록 */
  height: auto;     /* 세로 비율 유지 */
}

• 문법: max-width: 100%와 height: auto 설정.
• 특징: 화면이 작아지면 이미지도 줄어들고, 화면이 커지면 부모 컨테이너에 맞춰 비율을 유지하며 최대 크기까지 늘어남.

 

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

같은 이미지라도 화면 크기와 해상도에 따라 브라우저가 적합한 이미지를 선택하도록 지시.

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

• srcset: 브라우저에게 선택할 수 있는 이미지 후보군과 그 너비(w)를 제공.
• sizes: 화면 크기에 따라 이미지가 차지할 실제 너비를 브라우저에 힌트로 제공.
• src: 기본 이미지. (지원 안 되는 브라우저 대비)

 

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

화면 크기나 비율에 따라 전혀 다른 이미지를 보여줄 수 있는 구조.

• PC/모바일에서 다른 구성, 다른 구도 이미지 제공.
• 단순 비율 변경이 아니라 시각적 포커스 조정 가능.

<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>

• <picture>: 이미지 그룹 컨테이너.
• <source>: 미디어 쿼리 조건(media)에 맞는 이미지 우선 적용.
• <img>: 가장 하단에 위치하며, 브라우저가 <picture>를 지원하지 않거나 조건에 맞는 것이 없을 때 보여주는 기본 이미지 대비책. (Fallback)

 

 

📍  POINT 📍 

✔️ 단순히 이미지를 줄이는 것보다 기기 크기에 맞는 용량의 이미지를 보내는 것이 웹 성능(LCP) 최적화의 핵심. ✔️

✔️ loading="lazy" 속성을 함께 사용하면 화면에 보이지 않는 이미지는 나중에 불러와 페이지 로딩 속도를 더 높일 수 있다. ✔️

✔️ 성능 최적화는 srcset과 sizes, 디자인 / 아트 디렉션은 <picture> ✔️

 

 

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

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