사진 요소

이전 모듈에서는 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 요소가 강력한 도구입니다.

두 가지 솔루션도 필요하지 않은 한 가지 종류의 이미지가 있습니다. 바로 아이콘입니다. 다음 단계.

이해도 확인

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