<picture> 요소는 자체적으로 아무것도 렌더링하지 않고 대신 내부 <img> 요소의 결정 엔진 역할을 합니다.
무엇을 렌더링할지 지시합니다 <picture>는 <audio> 및 <video> 요소에서 이미 설정한 선례(래퍼 요소)를 따릅니다.
개별 <source> 요소를 포함하는
<picture>
<source …>
<source …>
<img …>
</picture …>
또한 내부 <img>는 반응형 이미지를 지원하지 않는 이전 브라우저에 대해 안정적인 대체 패턴을 제공합니다.
사용자의 브라우저에서 <picture> 요소를 인식하지 못하면 무시됩니다. 그런 다음 <source> 요소도 삭제됩니다.
브라우저가 전혀 인식하지 못하거나 <video> 또는 <audio> 상위 요소가 없으면 의미 있는 컨텍스트를 갖지 않기 때문입니다.
하지만 내부 <img> 요소는 모든 브라우저에서 인식되며 src에 지정된 소스는 예상대로 렌더링됩니다.
'예술 감독' <picture>이(가) 포함된 이미지
페이지에 있는 이미지 크기에 따라 이미지의 콘텐츠나 가로세로 비율을 변경하는 것을 일반적으로 '아트 디렉팅'이라고 합니다.
살펴보겠습니다 srcset 및 sizes는 사용자의 브라우저에 지시하는 대로 소스를 원활하게 전환하고 보이지 않게 작동하도록 설계되었습니다.
그러나 페이지 레이아웃을 조정하는 것과 동일한 방식으로 중단점에서 소스를 변경하여 콘텐츠를 더 강조해야 할 때가 있습니다.
예를 들어 중앙 포커스가 작은 전체 너비 헤더 이미지는 큰 표시 영역에서 잘 작동합니다.
그러나 작은 표시 영역에 맞게 축소하면 이미지의 중심 초점이 손실될 수 있습니다.
이러한 이미지 소스의 제목은 동일하지만 피사체에 시각적으로 더 초점을 맞추려면 여러 중단점에서 변경할 이미지 소스의 비율입니다. 예를 들어 이미지 중앙을 확대하고 축소하는 것이 좋습니다. 잘린 가장자리의 몇 가지 세부 사항이 있습니다.
이런 종류의 '자르기'는 CSS를 통해 얻을 수 있지만 사용자가 해당 이미지를 구성하는 모든 데이터를 요청하게 할 수 있습니다. 나중에 볼 수도 있습니다.
각 source 요소에는 해당 source를 선택하기 위한 조건을 정의하는 속성이 있습니다. media는
미디어 쿼리 및 미디어 유형 (이전에는 'MIME 유형'이라고 함)을 허용하는 type입니다. 소스의 첫 번째 <source>
사용자의 현재 탐색 컨텍스트와 일치하도록 선택되고 해당 source의 srcset 속성 콘텐츠
해당 컨텍스트에 적합한 후보를 결정하는 데 사용됩니다. 이 예에서 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>
지정한 기준에 따라 소스가 선택되면 source의 srcset 속성이
<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>는 단일 width 및 height 속성만 지원하지만 이러한 속성을 생략하면 사용자 환경이 훨씬 더 나빠질 수 있습니다.
이를 설명하기 위해 상대적으로 최근이지만
잘 지원됨 — HTML 외에
사양을 통해 <source> 요소에 height 및 width 속성을 사용할 수 있습니다. 이는 레이아웃 변경도 줄여줍니다.
<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>가 차지하는 공간을 차지해야 합니다.
조금 모호하게 들릴 수도 있지만 그럴 만한 이유가 있습니다. 이러한 웹 표준에 대한 논의는 계속되고 있지만 아직 정착되지 않았습니다. 아직 사용할 수 없습니다.
반응형 이미지 마크업은 시간이 지남에 따라 사용하기가 더 쉬워질 것이라고 약속하지만, 여느 웹 기술과 마찬가지로 다양한 도구가 있습니다. 이 마크업을 직접 작성하는 수고를 덜어주기 위해 개발된 여러 서비스, 기술 및 프레임워크에 가입되어 있습니다. 다음 모듈에서는 이미지 형식, 압축, 반응형 이미지에 대해 학습한 모든 것을 최신 개발 워크플로에 통합하는 방법을 살펴보겠습니다.