반응형은 이제 웹개발자라면 반드시 고려해야하는 영역이 되었다. 반응형 웹에서는 단순히 요소들의 배치뿐만 아니라 크기의 변화 또한 중요하게 고려하여 작업해야 하는데, 그 중 하나가 이미지이다.

화면의 크기가 변화함에 따라 이미지에서 또한 보여지는 위치, 크기 등이 고려되어야 한다. 이때 만약 하나의 이미지만으로 이 작업을 해야 한다면 원하는 화면을 제대로 구성하기란 쉽지 않을 수 있다. 또한, 다양한 크기의 화면을 고려해야 한다는 점에서 이미지의 해상도도 고려해야하는 요인중 하나이다. 만약 해상도가 너무 큰 이미지를 선택한다면, 굳이 고해상도가 필요없는 작은 디바이스에서의 경우 불필요하게 큰 용량의 데이터를 다운받아야 하며, 그 반대로 너무 작은 해상도의 이미지를 사용할 경우 화면이 큰 디바이스에서 이미지가 깨져보이는 등의 현상이 나타날 수 있다.

따라서 화면의 크기에 맞게 서로 다른 크기의 이미지를 노출시킴으로써 이러한 문제를 해결 할 수 있는 방법이 존재한다. 아마 가장 일반적인 방법은 css의 미디어 쿼리를 사용하는 방법일 것이다. 그러나 HTML만으로도 이러한 작업을 수행할 수 있는데 바로 img의 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="요정 옷을 입은 엘바">

srcset

여러개의 이미지를 등록해 놓는다. 복수의 이미지는 ,를 통해 구분된다. 하나의 이미지는 이미지의 경로와 이미지의 고유 픽셀 너비와 함께 등록될 수 있다. 픽셀 너비의 단위로는 px이 아닌 w를 사용하며, 실제 이미지 파일에서 그 값을 알 수 있다.

sizes

미디어 쿼리를 활용해 뷰포트의 크기를 정하고, 해당 크기에 적합한 이미지의 사이즈를 정의한다. 위를 예로 들면, max-width: 320px의 경우 최대 너비가 320px일 경우를 의미하고 이는 곧 320px이하의 뷰포트 크기일 때를 의미한다. 이 범위의 뷰포트의 경우 이미지의 크기는 280px이 적합함을 명시한 것이다.

브라우저가 두 속성을 해석하여 이미지를 노출하는 과정은 다음과 같다.