반응형 이미지의 새로운 표준들로 <picture>와 <img srcset + sizes> 두가지가 있습니다.

둘다 Responsive Images Community Group(RICG) 에서 정리, 제안되긴 했지만,

RICG에서는 picture 를 처음부터 밀었고, 애플쪽에서 미는 srcset도 포함하여 나중에 같이 제안을 했죠..

 

<picture>는 크롬/파폭/오페라 에서 구현되었고

<img srcset+sizes>은 위 셋에, 사파리는 자체 표준에 따라서 구현되었죠.

참고로 위 두가지의 폴리필로 picturefill 이 있습니다.

 

1. picture

 

문법은, <picture> 태그안에, 미디어쿼리에 따른 src 또는 srcset으로 해당 이미지를 지정한 <source>들이 들어가고, 마지막으로 디폴트로 사용될 <img> 태그가 들어갑니다. srcset의 문법은 아래 <img srcset>을 참조하세요.

<picture>
  <source media="(min-width: 650px)" srcset="images/kitten-large.png">
  <source media="(min-width: 465px)" srcset="images/kitten-medium.png">
  <img src="images/kitten-small.png" alt="a cute kitten">
</picture>

작동하는 예제는 여기 를 보세요.

 

2. img srcset + sizes

 

문법은, 기존 <img> 태그 내부에 srcset과 sizes 를 지정하는 방식이고, srcset은 1x, 2x 처럼 디스플레이에 따르거나, 300w 처럼 화면 폭으로 지정할 수 있습니다.  그리고 sizes는 미디어쿼리별 그림의 크기를 지정할 수 있도록 되어 있고요..

 

<img src="img/kitten-small.png" alt="a cute kitten"
  sizes="(min-width: 650px) 650px, (min-width: 465px) 465px, 330px"
  srcset="img/kitten-small.png 330w, img/kitten-medium.png 465w, img/kitten-large.png 650w">

작동하는 예제는 여기 를 보세요.​

 

#. 비교

일단 picture 는 미디어쿼리별 이미지를 명시적으로 지정하여, 이해하기가 편합니다.  그리고, (적어도 크롬에서는) 화면 변화에 따라서 명시적으로 지정된 이미지로 교체가 됩니다.

 

반면 img srcset은, 브라우져가 어떤 이미지를 사용할지 결정합니다. 즉, 가능한 좋은? 이미지를 사용하려고 하기에, 일단 큰 이미지가 다운된 다음에는 브라우져 폭이 달라져도 작은 이미지로 교체하지는 않습니다. (적어도 크롬에서..)

그래서 위의 img srcset을 시험해 보시려면, 일단 구글 개발자 툴을 켜두시고 (이렇게 되면 아마도 기본설정이, 캐시를 사용하지 않게 되므로), 작은 화면에서 큰 화면으로 늘려가시면 변화를 보실 수 있습니다.

 

그럼에도 불구하고, img srcset + sizes 의 장점은,  사용될 이미지를 지정하는 부분 (srcset)과 화면에 표현하는 부분 (sizes) 가 분리되었기에 복잡한 사용방법이 가능할 수 있습니다.  

반면에 이렇게 분리된 것이 좀더 사용을 복잡하게 만들 수도 있고요.. 위의 예에서도 sizes="(min-width)... " 부분을 지정하지 않으면, 어떤 이미지를 사용하든, img 의 크기가 100%로 잡혀버립니다.

어쨋든, 오늘도 하루한글 done!!