우리는 흔히 반응형 웹에서 PC,모바일 두 이미지를 만들어놓고 css의 display를 통해 컨트롤 합니다.
이는 PC에서 브라우저를 늘이거나 줄일때 그럴듯한 경험을 느끼게 해주지만
성능상으로는 필요없는 이미지의 로드로 인해 대역폭이 낭비됩니다.
이상적인 방법으로 여러 해상도의 이미지를 준비해 두고 기기에 따라 적당한 사이즈의
이미지를 제공하는 반응형 이미지를 적용해보려고 합니다.

1. 이미지 준비

사용할 여러 사이즈의 이미지를 준비합니다.

2. 속성 정리

srcset

브라우저에 제시할 이미지 목록과 크기를 정의합니다.
이미지 경로와 이미지 크기를 입력하며 쉼표로 구분합니다.

sizes

미디어 조건문들을 정의하고 표시할 최적의 이미지 크기를 정의힙니다.
최적의 이미지 크기는 표시할 이미지 크기가 아닙니다.

src

기본으로 표시항 이미지 경로를 정의합니다.

3. 간단한 예제

<img
    srcset="t/1_640w.jpg 640w,
            t/5_800w.jpg 800w,
            t/4_1920w.jpg 1920w"
    src="t/1_640w.jpg"
>

뷰포트 크기에 따라 해당 이미지가 표시됩니다.
~640px 일 때 1_640w.jpg,
641~800px 일 때 5_800w.jpg,
801~1920px 일 때 4_1920w.jpg 이미지가 표시됩니다.

4. 기본 예제

<img
    srcset="t/1_640w.jpg 640w,
            t/5_800w.jpg 800w,
            t/4_1920w.jpg 1920w"
    sizes="(max-width: 640px) 400px,
            (max-width: 800px) 800px,
            (max-width: 1920px) 1280px"
    src="t/1_640w.jpg"
>

sizes에 선언된 조건에 따라 최적의 이미지를 불러옵니다.
~640px 일 때 1_640w.jpg 이미지를 불러오고 사이즈는 400px로 표시됩니다.
641~800px 일 때 5_800w.jpg 이미지를 불러오고 사이즈는 800px로 표시됩니다.
801~1920px 일 때 4_1920w.jpg 이미지를 불러오고 사이즈는 1280px로 표시됩니다.

5. 다른 해상도 예제

<img 
     srcset="t/4_640w.jpg,
             t/4_1920w.jpg 2x,
             t/4_2400w.jpg 3x"
     src="t/4_640w.jpg"
>

고화질 디스플레이에 대한 정의도 가능합니다.

6. 아트 디렉션

<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="딸 엘바를 안고 서 있는 크리스">
</picture>

가로형 이미지와 세로형 이미지를 번갈아가며 보여주므로써 아트 디렉션 문제도 해결합니다.

* MDN Responsive_images