picture, source, img 태그를 이용한 반응형 이미지 구현 (CSS)

<picture> : 여러 이미지 소스를 지정하고, 각각의 소스를 어떤 상황에서 사용할지를 정의하는 컨테이너이면서 여기서 스타일을 지정 가능하다.

<source> : picture 태그 내에서 조건을 지정하고, 해당 조건에 맞는 이미지를 설정한다. 여기에 media-query를 통해 어떠한 조건을 기준으로 이미지를 선택할 수 있다. @media (width: 734px) 요런...

<img> : 이미지를 출력하는 태그. 브라우저가 picture 태그를 지원하지 않거나 미디어 쿼리에 해당하지 않는 경우, img 태그에 설정된 이미지가 기본값으로 로드된다.

---

➡️ 사용 예시

<picture className="">
    <source srcSet="image_small_2x.jpg" media="(max-width:734px)" /> 
    <source srcSet="image_medium.jpg, image_medium_2x.jpg 2x" media="(max-width:1068px)" /> 
    <source srcSet="image_large.jpg, image_large_2x.jpg 2x" media="(min-width:0px)" /> 
    <img src="image_large.jpg" alt="etc" /> 
</picture>

 

예전에는 이런 이미지 조절되는 거 보고 짱 큰 이미지 하나 두고 크기 조절하는 건가? 라고 생각했는데, 이미지 최적화 유무에 성능 차이가 난다. 생각해보면 데이터나 메모리나 차지하는 양을 유연하게 줄이니까 당연하다고 생각된다.

 

위의 source 태그와 함께 사용된 srcSet 속성은 img나 source 태그에서 사용되며, 원하는 크기 & 해상도의 이미지를 로드해서 성능을 최적화할 수 있는 속성이다. 해당 속성에 준 이미지 파일 이름을 보면 2x가 있는데 이것처럼 이미지 해상도를 지정할 수 있고 이미지 파일을 나열할 수 있다. 위 예시에도 한 속성에 이미지 두 개 있음! 

 

 

참고 + https://stackoverflow.com/questions/31848576/html-picture-or-srcset-for-responsive-images