srcset, sizes & heights를 이용한 반응형 이미지 처리

srcset

여러 미디어 표현식을 기준으로 요소의 에셋을 제어하기 위해 srcset 속성을 사용할 수 있습니다. 특히 다양한 스크린 사이즈별 이미지 에셋을 정의하기 위해, 모든 amp-img 태그에서 사용합니다.

다음 간단한 예제에서, srcset은 화면 너비(screen width)를 기준으로 image를 정의합니다. w 설명자는 브라우저에서 리스트 내 각 이미지의 width를 말해줍니다.

<amp-img alt="Hummingbird"
  src="/static/inline-examples/images/hummingbird-wide.jpg"
  width="640"
  height="457"
  layout="responsive"
  srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
            /static/inline-examples/images/hummingbird-narrow.jpg 320w">
</amp-img>

srcset을 사용한 반응형 이미지 제작 방법에 대한 더 자세한 내용은 반응형 이미지 사용하기 (Now)를 참고하시길 바랍니다.

사이즈

srcset과 함께 sizes 속성을 사용할 수 있습니다. sizes 속성은 미디어 표현식을 기준으로 요소 사이즈를 어떻게 게산할 지 설명합니다. 요소의 계산된 사이즈를 기준으로, 유저 에이전트는 srcset 속성에서 제공하는 에셋 중 가장 적절한 에셋을 선택합니다.

아래 예제를 참고하길 바랍니다:

<amp-img alt="Hummingbird"
  src="/static/inline-examples/images/hummingbird-wide.jpg"
  width="640"
  height="457"
  srcset="/static/inline-examples/images/hummingbird-wide.jpg 640w,
            /static/inline-examples/images/hummingbird-narrow.jpg 320w"
  sizes="(min-width: 650px) 50vw, 100vw">
</amp-img>

sizes 속성은 viewport가 650px이거나 그 이상인 경우, 요소의 너비를 viewport 사이즈의 50%로 정의합니다. 예를 들어, viewport가 800px인 경우, 요소의 너비는 400px입니다. 이 경우 브라우저에서는 srcset 리소스 중 가장 400px과 가까우며, 디바이스 픽셀 해상도를 1로 가정하여, narrow.jpg(320px)를 불러옵니다

sizes와 srcset 속성이 미디어 쿼리에 비교하여 어떻게 동작하는 지에 대한 더 상세한 정보는, Srcset and sizes 블로그 글을 참고하길 바랍니다.

heights

모든 AMP 커스텀 요소는 responsive 레이아웃을 허용하며, heights 속성도 허용합니다. 이 속성의 값은 img sizes attribute와 비슷하게 미디어 표현에 의존하여 사이즈를 정의하지만, 큰 차이점이 두개 있습니다.

1. 요소의 너비가 아닌 높이를 허용합니다.
2. 86%같은 퍼센트 값을 허용합니다. 퍼센트 값은 요소의 너비에 비례합니다.

heights 속성이 width, height와 함께 정의되어 있을 때 기본 layout은responsive으로 정의합니다.

예:

<amp-img alt="AMP"
  src="/static/inline-examples/images/amp.jpg"
  width="320"
  height="256"
  heights="(min-width:500px) 200px, 80%">
</amp-img>

이 예제에서 요소의 height는 width의 80%로 정의되어있지만, viewport가 500px보다 큰 경우 200px이 됩니다.

• Written by @pbakaus
  with contributions from @bpaduch