sreset을 사용하면 뷰포트 너비마다 각각의 이미지를 지정할 수 있습니다. 그런 다음 브라우저는 뷰포트 너비만 한 이미지를 선택하여 사용자의 장치에 가장 적합한 이미지를 제공합니다.
<amp-img src="img/feature.jpg"
srcset="img/feature-1200.jpg 1200w,
img/feature-lrg.jpg 1080w,
img/feature-med.jpg 768w,
img/feature.jpg 320w"
width="768"
height="305"
layout="responsive"
alt="Feature image">
</amp-img>
rcset 속성은 대체 이미지를 쉼표로 구분하여 각각의 너비를 적용합니다. 예를 들어 앞의 코드에서 feature-lrg.jpg는 파일 이름이고 1080w는 이 이미지의 너비가 1080 픽셀임을 브라우저에 알립니다. 페이지를 데스크톱 브라우저에서 로드하고 개발자 도구의 네트워크 탭을 확인합니다.
브라우저 뷰포트의 너비에 따라 실제로 다운로드된 이미지가 표시되어야 합니다. 브라우저 크기를 조정하면 뷰포트 너비에 따라 대체 이미지를 표시하는 것을 볼 수 있습니다.
지금 표시되는 이미지 뿐만 아니라 다른 sreset 이미지에도 layout="responsive"가 적용되고 있습니다. 즉, 브라우저에서 어떤 이미지를 선택하든지 AMP는 이미지의 크기를 조정하여 뷰포트를 채웁니다. 따라서 모든 뷰포트에서 적절한 크기의 이미지를 표시할 수 있습니다.
heights 및 sizes 속성을 사용하면 반응형 이미지를 조금 더 조정할 수 있습니다. sizes 속성을 사용하면 미디어 쿼리를 사용하여 사용자의 뷰포트 크기에 따라 이미지가 표시되어야 하는 범위를 설정할 수 있습니다. 예를 들어 다음과 같이 사용합니다.
sizes="(min-width: 640px) 50vw, 100vw"
즉, 화면 크기가 640px 이상인 경우 이미지는 뷰포트 너비의 50%입니다. 640px 미만의 다른 화면 크기의 경우 뷰포트 너비의 100%로 이미지를 표시합니다.
heights 속성은 비슷하지만 너비 대신 이미지 높이에 적용됩니다. 예를 들면 다음과 같습니다.
heights="(min-width: 500px) 200px, 80%"
sizes 또는 heights 속성을 사용하여 너비와 높이를 함께 지정하면 layout 속성은 기본적으로 responsive으로 설정됩니다.