<img> 태그로 반응형 이미지 구현하기

전혜린·2024년 3월 9일

html

Today I Learned

목록 보기

64/64

👀 이미지 태그 속성

srcset

브라우저에 이미지 선택권을 위임하는 속성
같은 비율의 다양한 크기를 가지는 동일 이미지 2개 이상 명시하는 속성으로 만약 1개의 이미지만 명시하려면 src 속성을 사용하면 된다.

사용방법

쉼표(,)로 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하며 작은 크기의 이미지부터 순서대로 입력한다.
px단위가 아닌 w디스크립터(width) 혹은 x디스크립터(배수 2x, 3x..) 입력한다.
src 속성은 srcset을 사용할 수 없는 환경에서 동작한다.
고정된 이미지 크기를 유지하려면 width 속성을 추가할 수 있다.(sizes 속성과는 다른 개념)

💁‍♀️ 예시

<img 
  src="images/large.png" 
  srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
  alt="" />

위 예제의 결과로,
뷰포트 너비가 400px 이하일 때 small.png(400px)가 사용된다.
뷰포트 너비가 401~700px 일 때 medium.png(700px)가 사용된다.
뷰포트 너비가 701px 이상일 때 large.png(1000px)가 사용된다.

W descriptor

w 디스크립터(Width descriptor)는 이미지의 원본 크기(가로 너비)를 의미한다.
예를 들어 400x300(px) 크기 이미지의 w값은 400w이다.

X descriptor

x 디스크립터(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미한다.
x 디스크립터는 디바이스의 픽셀 비율(Device pixel ratio)과 일치하는 값으로 최적화 선택된다.
하지만, 일반적으로 정수(integer) 값으로 제공하는 것이 좋다.

💁‍♀️ 예시

<img 
  src="images/large.png" 
  srcset="images/small.png 1x,
          images/medium.png 1.75x,
          images/large.png 2.5x"
  alt="" />

sizes

sizes는 미디어조건과 그 조건에 해당하는 이미지의 ‘최적화 출력 크기’를 지정한다.
반응형 이미지에서 임의로 한없이 이미지가 커지는 현상을 방지한다.
예를 들어 sizes="(min-width: 1001px) 1000px"에서 (min-width: 1001px)은 ‘뷰포트 너비(가로)가 1001px 이상일 때’를 의미하며, 그 뒤 1000px은 이미지를 ‘1000px로 최적화 출력하겠다’를 의미한다.

💁‍♀️ 예시

<img 
  src="images/large.png" 
  srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
  sizes="(min-width: 1001px) 1000px,
        (min-width: 701px) 700px,
        400px"
  alt="" />

위 예제의 결과로,
뷰포트 너비가 1001px 이상일 때 large.png가 사용되며 이미지 크기는 1000px로 보여진다.
뷰포트 너비가 701px 이상일 때 medium.png가 사용되며 이미지 크기는 700px로 보여진다.
뷰포트 너비가 700px 이하일 때 small.png가 사용되며 이미지 크기는 400px 보여진다.

미디어 조건을 생략할 경우

width속성은 이미지의 ‘출력 크기’만 지정하지만, sizes속성은 이미지의 ‘출력 크기’ + ‘최적 크기’도 함께 지정한다.
sizes와 width를 같이 작성할 경우 width가 우선한다.

💁‍♀️ 예시

<img 
  src="images/large.png" 
  srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
  sizes="600px"
  alt="" />

위 예제의 결과로,
뷰포트 너비와 상관없이 medium.png만 사용된다. 또한 이미지 크기는 600px을 가진다.(원래는 700px 크기의 이미지)

width 속성을 사용할 경우

<img 
  src="images/large.png" 
  srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
  width="400"
  alt="" />

위 예제의 결과로,
뷰포트 너비가 400px 이하일 때 small.png가 사용된다.
뷰포트 너비가 401~700px 일 때 medium.png가 사용된다.
뷰포트 너비가 701px 이상일 때 large.png가 사용된다.
뷰포트 너비에 따라 사용되는 이미지가 달라지지만 이미지 크기는 400px로 고정된다.