사진 요소

이전 모듈에서는 srcset 속성을 사용하여 동일한 이미지의 다양한 크기의 버전을 제공하는 방법을 설명했습니다. 그러면 브라우저에서 어떤 버전을 사용할지 결정할 수 있습니다. 이미지를 완전히 변경하려면 picture 요소가 필요합니다.

srcset가 src 속성을 기반으로 하는 것처럼 picture 요소는 img 요소에 기반합니다. picture 요소는 img 요소를 둘러쌉니다.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

picture 요소 내에 중첩된 img 요소가 없으면 picture 요소가 작동하지 않습니다.

srcset 속성과 마찬가지로 picture 요소는 img 요소에서 src 속성의 값을 업데이트합니다. 차이점은 srcset 속성이 브라우저에 제안을 제공하는 경우 picture 요소는 명령어를 제공한다는 것입니다. 이를 통해 사용자가 직접 관리할 수 있습니다.

source

picture 요소 내에 여러 source 요소를 지정할 수 있으며, 각 요소에는 고유한 srcset 속성이 있습니다. 그런 다음 브라우저는 가장 먼저 실행할 수 있는 것을 실행합니다.

이미지 형식

이 예에는 세 가지 형식의 이미지가 있습니다.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

첫 번째 source 요소는 새 AVIF 형식의 이미지를 가리킵니다. 브라우저가 AVIF 이미지를 렌더링할 수 있는 경우 브라우저에서는 이미지 파일을 선택합니다. 그 외의 경우에는 다음 source 요소로 이동합니다.

두 번째 source 요소는 WebP 형식의 이미지를 가리킵니다. 브라우저가 WebP 이미지를 렌더링할 수 있는 경우 그 이미지 파일을 사용합니다.

그렇지 않으면 브라우저에서 img 요소의 src 속성에 있는 이미지 파일로 돌아갑니다. JPEG 이미지입니다.

즉, 이전 버전과의 호환성을 유지하면서 새로운 이미지 형식을 사용할 수 있습니다.

이 예에서 type 속성은 지정된 이미지 형식의 종류를 브라우저에 알립니다.

이미지 크기

이미지 형식 간에 전환하는 것은 물론 이미지 크기도 전환할 수 있습니다. media 속성을 사용하여 이미지가 표시될 너비를 브라우저에 알립니다. media 속성 내에 미디어 쿼리를 입력합니다.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

여기서는 표시 영역 너비가 75em보다 넓으면 큰 이미지를 사용해야 한다고 브라우저에 알립니다. 40em와 75em 사이에는 브라우저에서 중간 크기의 이미지를 사용해야 합니다. 40em 하위에서는 브라우저가 작은 이미지를 사용해야 합니다.

이는 img 요소에서 srcset 속성과 sizes 속성을 사용하는 것과 다릅니다. 이 경우 브라우저에 제안을 제공합니다. source 요소는 제안보다는 명령어와 비슷합니다.

source 요소의 srcset 속성 내에서 픽셀 밀도 설명자를 사용할 수도 있습니다.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

이 예에서는 여전히 여러 중단점에서 해야 할 작업을 브라우저에 알려주지만, 이제 브라우저에는 기기의 픽셀 밀도에 가장 적합한 이미지를 선택할 수 있는 옵션이 있습니다.

자르기

동일한 이미지의 다른 크기 버전만 게재해야 하는 경우 srcset를 사용하는 것이 가장 좋습니다. 하지만 이미지가 작을 때 제대로 표시되지 않으면 이미지를 잘라서 만들어 볼 수 있습니다.

맥락에 더 적합하도록 이미지마다 너비와 높이 비율이 다를 수 있습니다. 예를 들어 모바일 브라우저에서는 넓고 길게 자른 잘라내기를 제공하는 반면 데스크톱 브라우저에서는 넓고 짧은 자르기를 제공할 수 있습니다.

다음은 표시 영역 너비에 따라 콘텐츠와 모양을 변경하는 히어로 이미지의 예입니다. 각 source 요소에 width 및 height 속성을 추가합니다.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

이미지 소스에 따라 alt 속성을 변경할 수 없습니다. 원본 크기 이미지와 잘린 이미지를 모두 설명하는 alt 속성을 작성해야 합니다.

대부분의 반응형 이미지에는 picture 요소를 사용할 필요가 없습니다. img 요소의 srcset 및 sizes 속성이 많은 사용 사례를 포함합니다. 그러나 더 세밀하게 제어해야 하는 상황에서는 picture 요소가 강력한 도구입니다.

어느 것도 필요하지 않을 수 있는 한 가지 유형의 이미지가 있습니다. 바로 아이콘입니다. 이제 다음 단계를 살펴보겠습니다.

이해도 테스트

사진 요소에 관한 지식 테스트