HTML에서 <picture> 태그는 웹 페이지에 이미지를 삽입할 때 사용되는 요소입니다. 이 태그는 다양한 화면 크기와 해상도에 맞게 최적화된 이미지를 제공할 수 있게 해줍니다. <picture> 태그는 하나 이상의 <source> 태그와 함께 사용되며, 각 <source> 태그는 특정 조건에 맞는 이미지 소스를 정의합니다. 마지막으로 <img> 태그가 포함되어, 만약 <source> 태그에 정의된 조건이 일치하지 않을 경우에 사용될 기본 이미지를 지정합니다.

<picture>
  <source media="(min-width: 800px)" srcset="example-large.jpg">
  <source media="(min-width: 450px)" srcset="example-medium.jpg">
  <img src="example-small.jpg" alt="설명">
</picture>
  1. 브라우저의 너비가 800픽셀 이상일 경우, example-large.jpg 이미지가 표시됩니다.
  2. 브라우저의 너비가 450픽셀에서 799픽셀 사이일 경우, example-medium.jpg 이미지가 표시됩니다.
  3. 위의 두 조건에 모두 해당되지 않을 경우, example-small.jpg 이미지가 기본으로 표시됩니다.

alt 속성은 이미지의 대체 텍스트를 제공하며, 이미지가 로드되지 않거나 시각 장애가 있는 사용자를 위한 스크린 리더에 의해 사용됩니다.