Picture 태그

🎯 목적

<picture> 태그는 다양한 화면 크기나 해상도에 따라 적절한 이미지를 선택적으로 불러올 수 있도록 도와주는 반응형 이미지 컨테이너입니다.

해당 태그는 성능 최적화, 디바이스 최적화, 접근성 향상을 모두 고려한 이미지 처리 방식입니다.

태그/ 속성	역할
<picture>	여러 소스를 묶는 부모 태그 (선택 기준에 따라 어떤 이미지를 보여줄지 결정)
<source media=”(조건)” srcset=”이미지 경로”>	특정 조건 (미디어 쿼리)에 따라 불러올 이미지 지정
<img src="..." alt="..." ...>	최종 fallback 이미지 (조건에 맞는 source가 없을 경우 사용됨)

♿ 접근성(Accessibility) 관점에서의 특징

항목	설명
스크린 리더 지원	img 태그에만 alt 속성을 넣어주면 된다. source 에는 X
loading=”lazy” 속성	이미지가 화면에 가까워졌을 때 로드 > 성능 최적화, 시각적 안정성 향상

💻 코드

<picture>
	<source media="(min-width : 64.1rem)" srcset="../sample.jpg">
	<source media="(max-width : 64rem)" srcset="../sample-md.jpg">
	<img src="../sample.jpg" alt="샘플 이미지" width="980" height="360">
</picture>