picture elements 사용하기

프로젝트를 진행하면서 585 이하의 기기에서는 모바일 소재의 이미지(배경 이미지)가 노출되고, 586 (폴드) 이상의 기기에서는 PC 소재의 이미지가 노출되어야 하는 스펙이 있었습니다.
해당 스펙을 적용하기 위해 picture 요소를 사용하였으며 picture 요소에 대해 간략하게 정리해보았습니다.

picture 정의

HTML Elements MDN 문서에 따르면 <picture>는 0개 이상의 source 요소와 1개의 img 요소로 이루어져 있으며 서로 다른 디스플레이/기기에서 이미지를 보다 유연하게 노출할 수 있습니다.

picture 지원범위

picture 태그 자체는 하위 브라우저 및 IE에서는 지원하지 않기 때문에 유의하여 사용해야 합니다.

picture 활용

브라우저는 picture 내에 선언된 source 요소 중에서 srcset, media, type 와 같이 선언된 속성(Attributes) 들을 통해 기기에 적합한 이미지를 노출하게 됩니다.
적합한 요소가 선언되어 있지 않거나 브라우저가 picture를 지원하지 않을 때에는 IMG에서 선언된 이미지가 노출됩니다.

<picture>
    <source srcset="/images/wide_image.jpg" media="all and (min-width: 800px)"> 
    <img src="/images/default.jpg" alt="" />
</picture>

즉, source 요소는 브라우저가 렌더링해야 하는 파일과 크기를 결정하는 데 도움이 되는 정보를 제공하며
IMG 요소는 이미지의 크기와 대체텍스트를 제공하고 source 요소가 적합한 이미지를 제공할 수 없는 경우에는 대체 이미지를 제공합니다.

picture 요소의 활용 예제

아트 디렉션 : 디스플레이 크기에 따라 적합한 이미지를 노출합니다.
작은 디스플레이에서는 많은 정보가 담긴 이미지보다 간단한 버전의 이미지를 노출함으로써 디스플레이 크기에 따라 적합한 이미지를 표시할 수 있습니다.

<picture>
     <source srcset="images/small_image.jpg" media="all and (min-width: 586px)">
     <source srcset="images/wide_image.jpg" media="all and (min-width: 768px)">
     <img src="images/default_image.jpg" alt="" />
</picture>

코드를 작성할 때 브라우저가 원하는 값과 첫 번째 선언된 source의 속성값이 일치한다면 브라우저는 해당 이미지를 노출한 후 그다음에 선언된 source 요소들은 무시하게 되므로 source 요소를 선언할 때는 순서에 유의하며 코드를 작성해야 합니다.

특정 이미지 파일 형식이 지원되지 않는 경우 대체 이미지 형식을 제공합니다.
AVIF 또는 WEBP와 같은 최신 파일 형식은 여러 가지 장점이 있지만, 브라우저에서 지원되지 않을 수 있습니다. 특정 파일 형식을 지원하지 않는 경우 IMG에서 선언한 이미지가 노출됩니다.
지원되는 이미지 형식 목록은 해당 URL을 통해 확인하실 수 있습니다.

<picture>
    <source srcset="images/logo.webp" type="image/webp">
    <img src="images/logo.png" alt="" />
</picture>

대역폭을 절약하고 페이지 로드 시간을 단축합니다.
Retina 디스플레이에서는 고밀도의 이미지를 노출시킴으로써 선택적으로 고밀도/저밀도 화면에 따라 다른 해상도의 이미지를 노출시킵니다.

<picture>
    <source srcset="images/image-768.png 768w, images/image-768-1.5x.png 1.5x">
    <source srcset="images/image-480.png, images/image-480-2x.png 2x">
    <img src="images/image.png" alt="" />
</picture> 

위 코드에서 w는 width, x는 pixel density를 의미합니다.

프로젝트 적용 사례 

– 리얼 페이지: https://m.shopping.naver.com/luxury/cosmetic/home

• 디자인 가이드

585 이하의 기기	586 이상의 기기

picture 요소가 IE에서는 지원하지 않기 때문에 모바일에서만 적용하였으며, 해당 프로젝트에서는 기기에 따라 서로 다른 배경 이미지가 적용되어야 하므로 source 요소의 media 속성을 사용하였습니다.
(source 요소에서 사용 가능한 속성들은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source 에서 확인하실 수 있습니다.)

코드예제
codepen 확인

// 586 기기 이상에서는 wide_image.jpg 적용 그 외에는 small_image.jpg 적용
<picture>
    <source srcset="/media/images/wide_image.jpg" media="all and (min-width: 586px)">
        <img src="/media/images/small_image.jpg" alt="배경이미지" class="image" />
</picture> 

.image {  /* 이미지에 적용할 속성들은 img에서 선언 */
    width: 100%;
    height: auto;
    vertical-align: top;
} 

적용 결과

585 이하의 기기	586 이상의 기기

적용 결과 기기의 너비에 따라 서로 다른 이미지가 노출되는 것을 확인하실 수 있습니다.

---

반응형에 관한 관심이 높아진 만큼 이 글이 도움되셨으면 좋겠습니다.
추가로 궁금한 점이 있으시거나 더 나은 방법이 있으시다면 공유 부탁합니다.

참고문서

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
• https://caniuse.com/?search=picture
• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source