picture 태그와 figure 태그 차이점?

<picture>태그는 IE 미지원의 영향으로 그동안 존재도 잘 모를 정도로 잘 사용하지 않고 있었던 태그였으나, 이리저리 외국 사이트들을 둘러보다가 <picture>태그를 쓰고 있어서 공부(?)해 봄.

 

<picture>를 쓰려고 보니 가장 헷갈리는게 바로 언제 <figure>를 쓰고 언제 <picture>를 쓰는가였는데, 

도대체 언제 써야하는지 잘 느껴지지가 않음. (나름 마크업에 진심~ ㅎㅎ)

 

picture는 사진이고, figure는 그림인가 의문이 들어 구글 번역으로 돌려보았는데...

 

 

 

 

 

figure도 그림이고, picture도 그림이었던... ㄷㄷㄷㄷ

 

어쨌든 이리저리 찾아보니 이미지가 그림이던, 사진이던 의미와 크게 상관없이

 

설명글과 함께 사용해야 하는 경우.. 즉 <figcaption>이 필요한 경우 <figure>를 사용하고,

 

반응형을 할 때 이미지 형식이나 품질을 여러 벌로 지원하는 경우 <picture>를 쓰면 됨.

 

 

figure태그 사용 예시

 

picture 태그 사용 예시

 

 

 

 

 

<picture>태그 사용 예

<picture>
    <source type="image/webp" media="(min-width: 1441px)" srcset="pic@2x.webp">
    <source type="image/webp" media="(min-width: 1024px)" srcset="pic@2x.webp 1.5x">
    <source type="image/webp" media="(max-aspect-ratio:1/1)" srcset="pic-xs.webp">
    <source type="image/webp" srcset="pic.webp">
    <source type="image/jpeg" media="(min-width: 1441px)" srcset="pic@2x.jpg 1.5x">
    <source type="image/jpeg" media="(min-aspect-ratio:1001/1000)" srcset="pic@2x.jpg 1.5x">
    <source type="image/jpeg" media="(max-aspect-ratio:1/1)" srcset="pic-xs.jpg">
    <img src="pic.jpg" alt="" loading="lazy">
</picture>

 

① <picture> 태그 안에는 0개 이상의 <source>요소와 1개의 <img>요소가 있는데, 주의할 점으로 <img>는 항상 마지막에 위치해야 함.

 

② 브라우저는 source요소에 설정된 적합한 조건을 찾아서 srcset의 이미지를 표시해주며, 조건에 맞는 것이 없는 경우나 <picture>태그를 지원하지 않는 경우 <img>태그의 이미지를 표시함.

 

③ <picture>태그는 다양한 미디어 조건에 맞게 사용해야 할 경우, 특정 이미지 형식이 지원되지 않는 경우, 고해상도(DPI)를 제공하는 경우 등에 사용하기 적합함.

 

④ <picture>태그는 <figure>태그 안에 사용 가능함... (stackoverflow)

<figure>
   <picture>
      <source type="image/png" srcset="image-big.png" media="(min-width:1920px)"> 
      <source type="image/png" srcset="image-mid.png" media="(min-width:1200px)"> 
      <source type="image/png" srcset="image-small.png" media="(min-width:700px)"> 
      <img src="image-base.png" alt=" ... ">
   </picture>
   <figcaption> ... </figcaption>
</figure>