HTML <picture>와 <source> 태그

HTML `<picture>`와 `<source>` 태그

HTML <picture>와 <source> 태그는 이미지를 더욱 효과적으로 제어하고 다양한 미디어 장치 및 화면 크기에 따라 최적화된 이미지를 제공하기 위해 사용되는 요소입니다. 이 태그들은 반응형 웹 디자인과 이미지 최적화에 유용하게 사용됩니다. <picture>와 <source> 태그의 사용법에 대해 알아봅니다.

HTML에서 제공하는 반응형 이미지 기술

요즘은 다양한 디바이스로 웹을 탐색하기 때문에 반응형 웹 디자인(Responsive web design)을 구현하는 원리를 이해하고 다룰 수 있는 기술을 익히는 것이 웹 디자인에 있어서 매우 중요한 자리로 매김하였습니다.

반응형 웹 디자인을 구현하기 위한 방법으로 대표적인 것은 CSS로 반응형 웹 디자인을 구현하는 방법입니다. 물론 자바스크립트의 도움을 받으면 좀 더 세련된 반응형 웹 디자인을 구현할 수도 있습니다. 또 하나의 방법을 말하자면 HTML에서 제공하는 반응형 이미지 기술를 이용하는 것입니다. 이 방법은 CSS로 반응형 웹 디자인을 구현하는 방법과 함께 사용하는 것이 효율적이며, 반응형 웹 디자인을 구현하는 방법 중 일부분의 기술입니다.

HTML에서 제공하는 반응형 이미지 기술은 두 가지가 있습니다.

<img> 태그에 srcset 속성과 sizes 속성을 이용하는 방법
<picture> 태그의 <source> 태그와 srcset 속성, media 속성 및 type 속성을 사용하는 방법

이 글에서는 <picture> 태그의 <source> 태그와 srcset 속성, media 속성 및 type 속성을 사용하는 방법에 대해 다룹니다.

`<picture>` 태그

<picture> 태그는 하나의 <img> 태그에 대해 여러 개의 반응형 이미지를 제공하는 0개 이상의 <source> 태그가 포함된 컨테이너(부모 요소)라는 의미입니다.

<picture> 태그는 <source> 태그를 이용한 반응형 이미지를 사용함으로써 대역폭을 절약하고 페이지 로드 시간 단축을 위한 목적으로 사용됩니다.
여기서 <img> 태그는 이미지에 대한 웹 접근성과 반응형 이미지 조건 등 제공된 <source> 태그 중 어느 것도 사용 가능한 이미지를 제공할 수 없는 경우를 대비한 fallback(대체) 이미지로 사용됩니다.

주의하세요!
<picture> 태그는 그 단어의 의미인 picture(사진)와는 직접적인 관계가 없습니다. 하나의 <img> 태그에 대해 0개 이상의 반응형 이미지를 제공하는 <source> 태그의 범위를 알려주는 컨테이너(부모 요소)라는 의미일 뿐입니다.

`<picture>` 태그의 콘텐츠 모델

<picture> 태그는 0개 이상의 <source> 태그와 1개의 <img> 태그가 포함될 수 있습니다. 또한, <source> 태그와 <img> 태그 사이에는 script-supporting 요소가 포함될 수 있습니다. script-supporting 요소는 <script>, <style>, <link> 태그를 말합니다.

<picture> 태그 자체로는 화면에 아무것도 표시하지 않습니다. 단지, 내부의 반응형 이미지를 제공하는 <source> 태그(들)가 있다면 <source> 태그의 srcset 속성과 media 속성 및 type 속성으로 설정한 반응형 이미지에 맞는 이미지 소스을 선택하도록 환경을 제공하는 역할을 합니다. <source> 태그를 사용할 경우 srcset 속성은 필수로 지정되어 있어야 하지만, media 속성 및 type 속성은 옵션으로 사용됩니다. 만약에 <source> 태그가 없다면 <img> 태그를 사용하여 src 속성값이 이미지 소스로 선택되게 함으로써 화면에 표시합니다. 아래의 예제 코드로 살펴보겠습니다.

HTML

<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
    <img src="fallback-image.jpg" alt="An image">
    <!-- script-supporting 요소(script, style, link)는 선택적(옵션)으로 사용할 수 있음 -->
    <script src="image-script.js"></script>
</picture>

위 코드 예제는 <picture> 태그에 <source> 태그와 <img> 태그, 그리고 <script> 태그를 모두 사용한 예제입니다. 브라우저는 반응형 이미지 조건에 맞는 <source> 태그의 이미지를 표시합니다. 적절한 조건에 맞는 이미지 소스가 없을 경우에는 <img> 태그의 이미지 소스가 표시됩니다.

<source> 태그나 <img> 태그, 그리고 script-supporting 요소들은 모두 선택적으로 사용할 수 있습니다.

하지만, <picture> 태그 자체로는 화면에 아무것도 표시하지 않기 때문에 <source> 태그와 <img> 태그 중 하나는 반드시 있어야 됩니다. <source> 태그와 <img> 태그를 둘 다 사용할 경우 <img> 태그는 <source> 태그보다 나중에 위치해 있어야 합니다. 반응형 이미지 조건 등 제공된 <source> 태그 중 어느 것도 사용 가능한 이미지를 제공할 수 없는 경우 <img> 태그의 이미지를 제공해야 하기 때문입니다. 만약에 <img> 태그가 <source> 태그보다 먼저 위치해 있으면 브라우저는 <img> 태그의 이미지를 보여주고 나중에 위치한 <source> 태그는 건너 뛰게 됩니다. 이렇게 되면 <source> 태그로 설정한 반응형 이미지를 구현할 수 없게 됩니다.

아래의 예제로 살펴보겠습니다.

HTML

<!-- img 태그를 생략했음 -->
<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
</picture>

위 예제는 <img> 태그를 생략했습니다. 그래도 됩니다.
하지만 <img> 태그를 생략할 경우 시각 장애인 사용자는 이미지의 내용을 이해할 수 없습니다. 따라서, <img> 태그를 생략하는 것은 권장되지 않습니다. 만약에 시각장애인 사용자에게 무의미한 콘텐츠일 경우에 생략해도 무방하지만(일부 스크린리더는 이 요소를 무시하기 때문에) 일부 스크린리더에게는 빈 이미지라는 정보를 제공함으로써, 혼동을 줄 수 있습니다.

그리고 브라우저가 반응형 이미지 조건에 맞는 <source> 태그의 이미지를 찾지 못한다면(srcset 속성, media 속성 및 type 속성 등의 조건값에 부합되는 조건이 아닐 경우를 의미함) 이미지를 표시할 수 없게 됩니다.

<img> 태그는 두 가지 용도로 사용됩니다.

웹 접근성을 위한 alt 속성을 제공하고,
반응형 이미지 조건 등 제공된 <source> 태그 중 어느 것도 사용 가능한 이미지를 제공할 수 없는 경우를 대비한 fallback 이미지로 사용

이 용도를 고려할 때 <img> 태그를 반드시 사용해야 하는 것은 아니지만 <img> 태그를 항상 사용하는 것을 권장합니다.

그런데, <picture> 태그 내에 <source> 태그가 없이 <img> 태그만으로 이미지를 표시하면 어떨까요? 그래도 됩니다.
하지만 이럴 경우 <picture> 태그를 사용하는 목적인 <source> 태그를 이용한 반응형 이미지를 구현을 하지 못하게 됩니다. 결국 이 경우에는 <picture> 태그를 사용할 필요가 없이 <img> 태그만을 사용해도 되는 것입니다. 이 점은 <picture> 태그를 왜 사용하느냐(반응형 이미지 구현을 위해 사용함으로써 대역폭을 절약하고 페이지 로드 시간 단축)에 대한 핵심 개념입니다.

`<source>` 태그

<source> 태그는 <picture> 태그 내에서 반응형 이미지 소스를 설정하는 요소입니다. 하나 이상을 사용할 경우 <source> 태그의 srcset 속성과 media 속성 및 type 속성으로 반응형 이미지를 설정할 수 있습니다. 브라우저는 이 반응형 이미지가 조건에 맞으면 화면에 표시합니다.

`<video>` 태그 내에 사용되는 `<source>` 태그와는 관련 속성이 다릅니다.

<picture> 태그 내에서 사용되는 <source> 태그와 <video> 태그 내에서 사용되는 <source> 태그를 혼동하지 마시기 바랍니다.

주의하세요!
<picture> 태그 내에서 사용되는 <source> 태그는 srcset 속성으로 이미지 리소스를 정의하지만, <video> 태그 내에서 사용되는 <source> 태그는 src 속성으로 비디오 리소스를 정의합니다. 또한 <picture> 태그 내에서 사용되는 <source> 태그는 media 속성을 사용할 수 있지만 <video> 태그 내에서 사용되는 <source> 태그는 media 속성을 사용할 수 없습니다.

`media` 속성

사용자 에이전트(브라우저)가 각 요소에 대해 평가할 미디어 조건(미디어 쿼리와 유사)을 지정합니다.

이 조건이 맞다고 평가되면 브라우저는 이 미디어 조건이 맞으면 화면에 이 미디어가 속한 <source> 태그의 srcset 속성의 이미지 리소스를 표시하고 <picture> 태그의 내부 위 아래 기준으로 다음에 있는 <source> 태그나<img>태그가 있더라도 건너 뜁니다. 조건에 맞지 않으면 건너뛰고 내부의 다음 요소(만약 있다면)를 평가합니다.

HTML

<picture>
    <source srcset="image-small.jpg" media="(max-width: 768px)">
    <source srcset="image-large.jpg" media="(min-width: 769px)">
    <img src="fallback-image.jpg" alt="An image">
</picture>

`srcset` 속성

이미지의 리소스를 지정하는 속성입니다.
<picture> 태그 내에서 사용되는 <source> 태그의 srcset 속성은 <img> 태그의 srcset 속성과 사용법이 동일합니다. 이 글에서는 추가적인 srcset 속성의 사용법을 다루지 않습니다. HTML <img> 태그 srcset과 sizes 속성에 대한 아주 쉬운 설명과 사용법을 참조하시기 바랍니다.

HTML <img> srcset과 sizes 속성 사용법

`type` 속성

이 속성이 포함된 <source> 태그의 srcset 속성으로 지정된 이미지 리소스의 MIME type을 지정합니다. 만약 지정한 MIME type이 브라우저가 지원하지 않는다면 이 요소는 건너뜁니다.

type 속성을 반드시 지정해야 하는 것은 아닙니다. type 속성이 없다면 브라우저는 자체적으로 MIME type을 평가합니다. 하지만 type 속성을 지정한다면 브라우저는 type 속성값으로 지원여부를 판단하기 때문에 자체적으로 MIME type을 평가하는 시간을 줄일 수 있습니다.

HTML

<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="photo">
</picture>