사진 요소

이전 모듈에서는 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">
</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">
</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"
    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" fetchpriority="high">
</picture>

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

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

두 솔루션이 모두 필요하지 않은 이미지 유형이 하나 있습니다. 바로 아이콘입니다. 다음은 아이콘에 관한 내용입니다.

이해도 테스트

picture 요소에 관한 지식 테스트