반응형 이미지 마크업은 두 가지 시나리오로 나눌 수 있습니다. 가장 효율적인 이미지가 목표인 상황과 브라우저에서 선택하는 이미지 소스를 명시적으로 제어해야 하는 상황입니다. 각각 설명적 구문과 규범적 구문으로 생각할 수 있습니다.
이 모듈에서는 두 가지 접근 방식을 모두 알아봅니다. 먼저 srcset 및 sizes를 살펴보고 브라우저가 사용자, 기기, 탐색 상황에 관해 알고 있는 정보를 기반으로 최선의 선택을 하도록 지원하는 방법을 살펴봅니다. 그런 다음 표시 영역 크기 및 이미지 형식의 브라우저 지원과 같은 요소에 따라 소스 선택을 명시적으로 제어할 수 있는 <picture> 요소를 살펴봅니다.
설명 구문
설명 구문은 이미지 소스 및 이미지 소스 사용 방법에 대한 정보를 브라우저에 제공하지만, 결국 브라우저에서 의사결정을 내립니다. 이는 훨씬 더 일반적인 시나리오입니다. 대다수 이미지의 경우 브라우저 동작을 세부적으로 제어할 수 없습니다. 브라우저는 웹 개발자보다 훨씬 더 많은 정보를 마음대로 사용할 수 있으며, 이 정보를 바탕으로 복잡한 결정을 내릴 수 있습니다. 사용자의 탐색 컨텍스트를 정확하게 예측할 수는 없습니다. 알 수 없는 사용자의 하드웨어, 환경설정, 연결 속도에 관한 정보가 너무 많습니다. 정보를 바탕으로 추측할 수는 있지만 각 사용자가 웹을 어떻게 경험하는지 확실히 알 수는 없습니다. 반응형 이미지의 중심 사용 사례는 개발자의 관점에서 순전히 목표 지향적입니다. 브라우저가 현재 보유한 정보를 기반으로 가장 효율적인 이미지 요청을 가능하게 하는 것입니다.
브라우저가 이러한 선택을 할 수 있도록 srcset를 사용하면 단일 <img>를 채울 수 있는 잠재적 소스 목록을 브라우저에 제공할 수 있고 sizes를 사용하면 <img>가 렌더링되는 방식에 관한 정보를 브라우저에 제공할 수 있습니다. 다음 모듈에서 이를 사용하는 방법을 알아보겠습니다.
처방적 구문
처방적 구문을 사용하면 정의한 기준에 따라 무엇을 해야 할지, 즉 어떤 소스를 선택할지 브라우저에 알려줍니다. 이 사용 사례는 '이 이미지를 렌더링하는 데 가장 효율적인 애셋을 로드'하는 것만큼 흔하지는 않지만 소스 콘텐츠나 형식 등 애셋을 전송하기 전에는 알 수 없는 정보를 고려하여 브라우저에 사용 안내를 제공할 수 있습니다.
srcset 및 sizes는 사용자의 브라우저에 정보를 전달하고 이미지 소스에 관한 결정을 내릴 수 있도록 허용하는 문법을 제공하지만 표시되는 소스 파일과 시기를 명시적으로 제어해야 하는 경우가 있습니다. 예를 들어, 레이아웃 중단점에서 다양한 디자인 처리를 기반으로 가로세로 비율이 서로 다른 동일한 이미지 콘텐츠 버전을 표시하거나 특정 인코딩을 지원하는 브라우저만 특정 소스를 수신하도록 할 수 있습니다.
이러한 경우에는 표시할 소스와 시기를 명시적으로 제어해야 합니다. 이는 설계상 srcset 및 sizes가 제공할 수 없음을 보장하는 것입니다. 이 컨트롤을 가져오려면 <picture> 요소를 사용해야 합니다.