picture element - by. UXKM

Publishing
HTML
내장 콘텐츠(Embedded content)
picture element

요약 설명
<picture> 요소는 웹 페이지에서 상황에 따라 다른 이미지 소스를 선택적으로 표시할 수 있도록 하는 시맨틱 태그로, 반응형 이미지나 포맷별 대체 이미지 제공에 사용됩니다.
내부에 <source> 요소를 여러 개 포함하여 화면 크기, 해상도, 이미지 형식(webp, jpg 등)에 따라 적절한 이미지를 브라우저가 자동으로 선택하게 할 수 있으며,
마지막에는 기본 이미지로 <img> 요소를 포함하여, 브라우저가 <source> 조건과 일치하는 이미지를 찾지 못했을 때를 대비하거나, HTML 문서가 <picture>를 지원하지 않는 경우에도 이미지가 표시되도록 해야 합니다.
이를 통해, 성능 최적화와 다양한 디바이스 대응을 동시에 할 수 있습니다.

주요 역할 및 특징

반응형 이미지 제공
- 다양한 디바이스와 화면 크기에 맞춰 최적의 이미지를 제공할 수 있습니다.
- 예를 들어, 모바일에서는 작은 이미지를, 데스크톱에서는 큰 이미지를 표시할 수 있습니다.
브라우저별 이미지 형식 지원
- 일부 브라우저는 WebP 또는 AVIF와 같은 최신 이미지 포맷을 지원하고, 일부는 지원하지 않습니다.
- <picture> 요소를 사용하면 브라우저가 지원하는 최적의 이미지 포맷을 자동으로 선택할 수 있습니다.
화면 크기에 따라 적절한 이미지 제공 (media 속성 사용)
CSS의 media query와 유사한 media 속성을 사용하여 화면 크기에 따라 다른 이미지를 제공합니다.
호환성 및 접근성 고려
<picture> 요소 내의 <img> 태그는 필수 요소이며, 브라우저가 <picture> 요소를 지원하지 않더라도 기본적으로 표시됩니다.
웹 성능 최적화
- 불필요한 대형 이미지를 로드하지 않도록 하여 페이지 로딩 속도를 개선할 수 있습니다.
- 특히, 모바일 환경에서 불필요한 데이터 사용을 줄이는 데 효과적입니다.

CSS 기본 값

<picture> 요소는 기본적으로 인라인 레벨 요소입니다.

							picture {
								display: inline;
							}

기본 문법

<picture> 요소는 내부에 <img>와 <source>를 함께 사용할 때 의미가 있으며, 단순히 <img> 요소만 포함하는 것은 잘못된 방식은 아니지만 불필요한 태그 사용이 될 수 있습니다.

문법 상세 설명 :: 브라우저는 <source> 요소들의 속성을 순서대로 확인하며, 첫 번째로 조건을 만족하는 요소를 사용 하고 이후 요소들은 무시합니다.; <img> 요소는 <picture> 요소 내에서 가장 마지막에 위치 해야 합니다.; 모든 <source> 요소가 조건을 만족하지 못하면 마지막에 위치한 <img> 요소가 대신 표시됩니다.; 또한, <picture> 요소를 지원하지 않는 브라우저에서는 하위 호환성을 위해 <img> 요소가 사용됩니다.

							<picture>
								<source srcset="image-large.jpg" media="(min-width: 1024px)">
								<source srcset="image-medium.jpg" media="(min-width: 600px)">
								<img src="image-default.jpg" alt="설명 이미지">
							</picture>

속성 (`<picture>`에서 사용하는 `<source>` 요소의 속성)

중요합니다!

<picture> 요소 자체에는 특별한 속성이 없으며, 내부의 <source> 요소가 주요 속성을 가집니다.

<source>의 [srcset] 필수 <source srcset="값">

사용할 이미지 파일과 해상도(또는 크기)를 지정합니다.
여러 개의 이미지를 쉼표(,)로 구분하여 제공할 수 있습니다.

사용 방법 :: 이미지URL [해상도]w : 다른 해상도의 이미지 지정; 이미지URL [배율]x : 디스플레이 배율(레티나)에 따른 이미지 지정

								<picture>
									<!--
										다른 해상도의 이미지 제공
										: 브라우저는 뷰포트 크기에 따라 적절한 이미지를 선택합니다.
									-->
									<source srcset="image-small.jpg 480w, image-medium.jpg 1024w, image-large.jpg 1920w">

									<!--
										디스플레이 배율에 따른 이미지 제공
										: 2배 또는 3배 해상도를 지원하는 디스플레이에서 고해상도 이미지를 자동으로 선택합니다.
									-->
									<source srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x">
								</picture>

<source>의 [media] 선택 사항 <source media="값">

미디어 쿼리를 사용하여 특정 화면 크기에 맞는 이미지를 선택할 수 있습니다.
일반적으로 min-width, max-width 등의 CSS 미디어 쿼리를 활용하며, media 속성을 사용할 때는 srcset 또는 src를 통해 최소한 하나의 이미지를 지정해야 합니다.

예시 설명 :: 화면 너비가 600px 이하일 경우 image-small.jpg 사용합니다.; 601px 이상일 경우 image-large.jpg 사용합니다.

								<picture>
									<source media="(max-width: 600px)" srcset="image-small.jpg">
									<source media="(min-width: 601px)" srcset="image-large.jpg">
								</picture>

<source>의 [type] 선택 사항 <source type="값">

이미지 파일의 MIME 유형을 지정하여 브라우저가 지원하는 포맷을 로드하도록 합니다.

브라우저별 지원 형식 :: image/webp : 고효율 이미지 포맷 (WebP); image/avif : 최신 고압축 이미지 포맷 (AVIF); image/jpeg, image/png, image/svg+xml 등

예시 설명 :: 브라우저가 WebP를 지원하면 image.webp를 사용하고,; 그렇지 않으면 JPEG(image.jpg)를 사용합니다.

								<picture>
									<source type="image/webp" srcset="image.webp"> <!-- 고효율 이미지 포맷 -->
									<source type="image/jpeg" srcset="image.jpg">
								</picture>

예제

기본적인 반응형 이미지 제공

화면 크기에 따라 large.jpg, medium.jpg, small.jpg 중 적절한 이미지를 로드합니다. 모든 조건을 충족하지 못하면 small.jpg가 기본값으로 표시됩니다.

								<picture>
									<source srcset="large.jpg" media="(min-width: 1000px)">
									<source srcset="medium.jpg" media="(min-width: 600px)">
									<img src="small.jpg" alt="반응형 이미지">
								</picture>

이미지 포맷(WebP 지원 여부 확인 후 대체 이미지 제공)

브라우저가 WebP 형식을 지원하면 image.webp를 사용하고, 그렇지 않으면 image.jpg를 표시합니다.

								<picture>
									<source srcset="image.webp" type="image/webp">
									<img src="image.jpg" alt="웹피(WebP) 지원 여부를 확인하는 이미지">
								</picture>

고해상도 이미지 제공 (Retina 디스플레이 대응)

2x, 3x 설정을 통해 고해상도(Retina) 디스플레이에 적합한 이미지를 제공합니다.

								<picture>
									<source srcset="image@2x.jpg 2x, image@3x.jpg 3x">
									<img src="image.jpg" alt="고해상도 이미지">
								</picture>

주의사항

<picture> 요소를 지원하지 않는 브라우저나 모든 <source> 조건이 충족되지 않는 경우를 대비해야 합니다.
<img> 태그 없이 <source> 요소만 사용할 경우 이미지가 표시되지 않을 수 있습니다.
<picture> 내부에는 반드시 <img> 요소를 포함해야 하며, 기본 이미지로 사용됩니다.
<picture> 요소는 주로 페이지 로드 시 적절한 이미지를 선택하는 용도이므로, 자바스크립트로 동적으로 변경할 필요가 있는 이미지에는 적합하지 않습니다.
이미지 로딩 우선순위는 <source> 요소의 순서에 따라 결정됩니다.
브라우저는 위에서 아래로 차례대로 평가하며, 조건을 만족하는 첫 번째 이미지를 로드합니다. 따라서, 가장 넓은 조건을 마지막에 배치하는 것이 좋습니다.
화면 크기에 맞게 이미지를 제공하더라도, 너무 큰 파일을 사용하면 로딩 속도가 느려질 수 있습니다.
따라서 이미지 용량을 압축하여 <picture> 요소를 사용하는 의미가 퇴색되지 않도록 하는 것이 좋습니다.