처방적 구문

<picture> 요소는 자체적으로 아무것도 렌더링하지 않고 대신 내부 <img> 요소의 결정 엔진 역할을 합니다. 무엇을 렌더링할지 지시합니다 <picture><audio><video> 요소에서 이미 설정한 선례(래퍼 요소)를 따릅니다. 개별 <source> 요소를 포함하는

<picture>
   
<source>
   
<source>
   
<img>
</picture>

또한 내부 <img>는 반응형 이미지를 지원하지 않는 이전 브라우저에 대해 안정적인 대체 패턴을 제공합니다. 사용자의 브라우저에서 <picture> 요소를 인식하지 못하면 무시됩니다. 그런 다음 <source> 요소도 삭제됩니다. 브라우저가 전혀 인식하지 못하거나 <video> 또는 <audio> 상위 요소가 없으면 의미 있는 컨텍스트를 갖지 않기 때문입니다. 하지만 내부 <img> 요소는 모든 브라우저에서 인식되며 src에 지정된 소스는 예상대로 렌더링됩니다.

'예술 감독' <picture>이(가) 포함된 이미지

페이지에 있는 이미지 크기에 따라 이미지의 콘텐츠나 가로세로 비율을 변경하는 것을 일반적으로 '아트 디렉팅'이라고 합니다. 살펴보겠습니다 srcsetsizes는 사용자의 브라우저에 지시하는 대로 소스를 원활하게 전환하고 보이지 않게 작동하도록 설계되었습니다. 그러나 페이지 레이아웃을 조정하는 것과 동일한 방식으로 중단점에서 소스를 변경하여 콘텐츠를 더 강조해야 할 때가 있습니다. 예를 들어 중앙 포커스가 작은 전체 너비 헤더 이미지는 큰 표시 영역에서 잘 작동합니다.

꿀벌이 잎과 줄기로 둘러싸여 있는 페리윙클 꽃의 헤더 너비 이미지입니다.

그러나 작은 표시 영역에 맞게 축소하면 이미지의 중심 초점이 손실될 수 있습니다.

헤더 너비가 줄어든 페리윙클 꽃의 이미지입니다. 꿀벌은 거의 보이지 않습니다.

이러한 이미지 소스의 제목은 동일하지만 피사체에 시각적으로 더 초점을 맞추려면 여러 중단점에서 변경할 이미지 소스의 비율입니다. 예를 들어 이미지 중앙을 확대하고 축소하는 것이 좋습니다. 잘린 가장자리의 몇 가지 세부 사항이 있습니다.

페리윙클꽃을 확대한 모습입니다.

이런 종류의 '자르기'는 CSS를 통해 얻을 수 있지만 사용자가 해당 이미지를 구성하는 모든 데이터를 요청하게 할 수 있습니다. 나중에 볼 수도 있습니다.

source 요소에는 해당 source를 선택하기 위한 조건을 정의하는 속성이 있습니다. media는 미디어 쿼리 및 미디어 유형 (이전에는 'MIME 유형'이라고 함)을 허용하는 type입니다. 소스의 첫 번째 <source> 사용자의 현재 탐색 컨텍스트와 일치하도록 선택되고 해당 sourcesrcset 속성 콘텐츠 해당 컨텍스트에 적합한 후보를 결정하는 데 사용됩니다. 이 예에서 media 속성이 있는 첫 번째 source는 사용자의 표시 영역 크기와 일치하는 광고가 선택됩니다.

<picture>
 
<source media="(min-width: 1200px)" srcset="wide-crop.jpg">
 
<img src="close-crop.jpg" alt="…">
</picture>

media 또는 type와 일치하는 source 요소가 없는 경우 내부 img를 항상 순서대로 지정해야 합니다. 해당 이미지가 '기본' 있습니다. min-width 미디어 쿼리를 사용하는 경우 먼저 소스 코드를 실행합니다 max-width 미디어 쿼리를 사용할 때는 가장 작은 소스를 먼저 배치해야 합니다.

<picture>
   
<source media="(max-width: 400px)" srcset="mid-bp.jpg">
   
<source media="(max-width: 800px)" srcset="high-bp.jpg">
   
<img src="highest-bp.jpg" alt="…">
</picture>

지정한 기준에 따라 소스가 선택되면 sourcesrcset 속성이 <img> 자체에 정의된 것처럼 <img>입니다. 즉, sizes를 사용하여 아트 디렉션 이미지를 최적화할 수 있습니다. 소스도 확인할 수 있습니다

<picture>
   
<source media="(min-width: 800px)" srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w">
   
<source srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w">
   
<img src="fallback.jpg" alt="…" sizes="calc(100vw - 2em)">
</picture>

물론 선택한 <source> 요소에 따라 비율이 달라질 수 있는 이미지의 경우 성능 문제가 발생합니다. <img>는 단일 widthheight 속성만 지원하지만 이러한 속성을 생략하면 사용자 환경이 훨씬 더 나빠질 수 있습니다. 이를 설명하기 위해 상대적으로 최근이지만 잘 지원됨 — HTML 외에 사양을 통해 <source> 요소에 heightwidth 속성을 사용할 수 있습니다. 이는 레이아웃 변경도 줄여줍니다. <img>에서와 마찬가지로 레이아웃에서 선택된 <source> 요소를 위해 적절한 공간을 남겨둡니다.

<picture>
   
<source
     
media="(min-width: 800px)"
     
srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w"
     
width="1600"
     
height="800">
   
<img src="fallback.jpg"
     
srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w"
     
sizes="calc(100vw - 2em)"
     
width="1200"
     
height="750"
     
alt="…">
</picture>

아트 디렉션은 표시 영역 크기에 따른 결정 이외에도 다양한 용도로 사용될 수 있습니다. 이러한 사례의 대부분은 srcset/sizes를 사용하여 더 효율적으로 처리할 수 있습니다. 예를 들어 이미지 소스를 선택하는 것이 사용자의 선호도에 따른 색 구성표에 적합한 색상:

<picture>
   
<source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg">
   
<img srcset="hero-light.jpg">
</picture>

type 속성

type 속성을 사용하면 <picture> 요소의 단일 요청 결정 엔진을 사용하여 이미지 형식만 게재할 수 있습니다. 이를 지원하는 브라우저에 적용됩니다.

이미지 형식 및 압축에서 배운 것처럼 브라우저에서 파싱할 수 없는 인코딩은 이미지 데이터입니다.

<picture> 요소를 도입하기 전에는 새로운 이미지 형식을 제공하기 위한 가장 실용적인 프런트엔드 솔루션이 필요했습니다. 브라우저가 이미지 파일을 요청하고 파싱을 시도하여 이미지 파일을 폐기하고 폴백을 로드할지 여부를 판단합니다. 가 다음 줄의 스크립트가 대표적인 예입니다.

   <img src="image.webp"
   
data-fallback="image.jpg"
   
onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
   
alt="...">

이 패턴을 사용하면 모든 브라우저에서 image.webp에 대한 요청이 계속 수행되므로 브라우저를 통한 전송의 낭비가 발생하게 됩니다. WebP를 지원하지 않습니다. 이후 WebP 인코딩을 파싱할 수 없는 브라우저에서 onerror 이벤트가 발생하고 data-fallback 값을 src로 변환합니다. 낭비인 해결책이었지만, 다시 한번 이 방법이 유일한 선택지였습니다. 사용할 수 있습니다 맞춤 스크립팅이 완료되기 전에 브라우저에서 이미지를 요청하기 시작합니다. 실행(또는 파싱)될 가능성이 있기 때문에 이 프로세스를 선점할 수 없었습니다.

<picture> 요소는 명시적으로 이러한 중복 요청을 방지하도록 설계되었습니다. 브라우저를 사용할 수 있는 방법은 없지만 type 속성은 요청하지 않고 지원하지 않는 형식을 인식할 수 있도록 브라우저에 소스에 관해 경고합니다. 요청할지 여부를 결정할 수 있습니다.

type 속성에 미디어 유형 (이전의 MIME 유형)을 제공합니다. 각 <source>srcset 속성에 지정된 이미지 소스의 값입니다. 이렇게 하면 브라우저에 source에서 제공하는 이미지 후보가 외부 소스 코드 없이 디코딩될 수 있는지 여부를 즉시 판단해야 함 요청—미디어 유형이 인식되지 않으면 <source> 및 모든 후보가 무시되고 브라우저가 다음 단계로 이동합니다.

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

여기서 WebP 인코딩을 지원하는 브라우저는 type 속성에 지정된 image/webp 미디어 유형을 인식합니다. 그런 다음 해당 <source>를 선택하고 srcset에 단일 후보만 제공했으므로 내부<source> <img>: pic.webp 요청, 전송, 렌더링 WebP를 지원하지 않는 모든 브라우저는 source를 무시합니다. 반대되는 명령이 없으면 <img>는 1992년 이후 한 src의 콘텐츠를 렌더링합니다. 물론 여기서는 type="image/jpeg"로 두 번째 <source> 요소를 지정할 필요가 없습니다. JPEG에 대한 범용 지원을 가정할 수 있습니다.

사용자의 탐색 상황에 관계없이 단일 파일 전송으로 이 모든 작업을 수행할 수 있으며 대역폭이 낭비되지 않습니다. 있습니다. 이는 또한 미래지향적인 기술이기도 합니다. 보다 새롭고 효율적인 파일 형식이 등장할 것입니다. picture를 통해 이를 활용할 수 있습니다. JavaScript나 서버 측이 필요 없습니다. 종속 항목 및 <img>의 모든 속도.

반응형 이미지의 미래

여기에서 논의된 모든 마크업 패턴은 표준화 측면에서 무거운 작업이었습니다. 즉, <img>만큼이나 웹의 중심에 서 있는 것이 결코 쉬운 일이 아니었습니다. 이러한 변화는 많은 문제를 일으키고자 했습니다. 매우 광범위했습니다. 이러한 전략을 발전시킬 수 있는 여지가 많다는 생각을 하게 되셨다면 정답입니다. 처음부터 이러한 표준은 미래에 대한 기준을 제공하기 위한 것이었습니다. 기반이 될 수 있습니다.

이러한 모든 솔루션은 필연적으로 마크업에 의존했습니다. 따라서 서버의 초기 페이로드에 포함되기 때문입니다. 브라우저가 이미지 소스를 요청할 때까지 제시간에 도착합니다. 이는 통제하기 어려운 sizes 속성으로 이어진 제한입니다.

그러나 이러한 기능이 웹 플랫폼에 도입된 이후 이미지 요청을 지연하는 네이티브 메서드가 도입되었습니다. loading="lazy" 속성이 있는 <img> 요소는 페이지 레이아웃을 알 때까지 요청되지 않아 사용자의 초기 표시 영역 밖에 있는 이미지에 대한 요청을 이후 페이지 렌더링 과정 중에 할 수 있습니다. 브라우저는 이러한 요청이 있을 때 페이지 레이아웃을 완전히 이해하므로 sizes="auto" 속성이 HTML 사양에 추가로 제안되었습니다. 이러한 경우 수동으로 작성한 sizes 속성을 피하는 것이 좋습니다.

매우 흥미로운 몇 가지 변경사항에 맞게 <picture> 요소에도 추가됩니다. 보여 드리겠습니다. 표시 영역 정보는 상위 수준의 레이아웃을 결정하는 데 건전한 기반이긴 하지만 개발에서 완전한 구성 요소 수준의 접근 방식을 취할 수 없게 됩니다. 즉, 구성요소 자체가 차지하는 공간에 반응하는 스타일을 사용하여 페이지 레이아웃의 모든 부분에 배치합니다. 이러한 우려로 인해 컨테이너 쿼리 생성: 요소의 스타일 지정 방법 표시 영역만이 아닌 상위 컨테이너의 크기를 기반으로 합니다.

컨테이너 쿼리 구문이 안정화되었을 뿐 브라우저 지원이 매우 제한적이기는 하지만 이 문서의 작성 시점에는 <picture> 요소에 즉, 잠재적 container 속성을 사용하면 <source> 표시 영역의 크기를 기준으로 하지 않고 <picture> 요소의 <img>가 차지하는 공간을 차지해야 합니다.

조금 모호하게 들릴 수도 있지만 그럴 만한 이유가 있습니다. 이러한 웹 표준에 대한 논의는 계속되고 있지만 아직 정착되지 않았습니다. 아직 사용할 수 없습니다.

반응형 이미지 마크업은 시간이 지남에 따라 사용하기가 더 쉬워질 것이라고 약속하지만, 여느 웹 기술과 마찬가지로 다양한 도구가 있습니다. 이 마크업을 직접 작성하는 수고를 덜어주기 위해 개발된 여러 서비스, 기술 및 프레임워크에 가입되어 있습니다. 다음 모듈에서는 이미지 형식, 압축, 반응형 이미지에 대해 학습한 모든 것을 최신 개발 워크플로에 통합하는 방법을 살펴보겠습니다.