반응형 이미지

responsive image

1. img attribute

1) srcset

이미지 세트를 정의하여 브라우저가 어떤 사이즈의 이미지를 선택할 지 고를 수 있도록 한다.

파일명 + 공백 + 이미지 고유 픽셀 width (w 단위)

※ w 단위 : 이미지의 실제 사이즈를 정의함

2) sizes

미디어의 조건들을 정의하고, 해당 조건이 만족될 때 어떤 사이즈의 이미지를 선택하는 것이 좋을지 지시한다.
마지막 width는 조건 없이 적용되게 할 수 있다. (아무 미디어 조건도 충족되지 않을 때 기본 값으로 선택된다.)

media 조건 + 공백 + 해당 조건에 맞는 이미지 width (절대 단위, 상대 단위)

브라우저는 첫번째로 매칭되는 조건 이후의 모든 것을 무시하기 때문에, 미디어 조건 순서에 주의해야 한다.

3) srcset과 sizes의 적용 방법

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

뷰포트 너비가 480px인 지원 브라우저가 페이지를 로드할 때, sizes 어트리뷰트의 미디어 조건 (max-width:480px)에 따라 440px 슬롯이 선택되며, 최종적으로 440px에 가장 가까운 480w 이미지가 선택된다.

2. <picture>

비주얼을 위해 해상도별로 다른 이미지를 사용하고 싶을 때 사용.

1) <picture>

<video>나 <audio>처럼 <source> 요소를 포함하는 wrapper 요소

2) <source>

• media 어트리뷰트 : 미디어 조건을 통해 어떤 이미지가 보여질 것인지 결정
• srcset 어트리뷰트 : 보여질 이미지의 경로를 포함함.

3) <img>

미디어 조건이 적용되지 않았을 때 기본 이미지를 제공한다.
브라우저가 <picture> 요소를 지원하지 않을 경우, 폴백으로 적용된다.
<picture>의 맨 마지막 자식 요소이어야 하며, <img>요소가 포함되어 있지 않으면 아무 이미지도 보이지 않는다.

4) <picture>의 적용 방법

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

3. 새로운 이미지 포맷

webp

​