[HTML] 멀티미디어(1) - img

 

▶ <img />

• 이미지를 삽입하는 데 사용.

• <img>의 속성

속성	내용 및 설명	값
src	- source의 약어. - 필수 속성. - 이미지의 경로, URL을 명시.	URL
alt	- alternative의 약어. - 필수 속성. - 이미지가 제대로 출력되지 못할 경우 출력될 이미지의 대체 텍스트를 지정.
width	- 이미지의 가로 너비를 지정.
height	- 이미지의 세로 너비를 지정.
srcset	- 브라우저에 제시할 이미지 URL과 원본 크기의 목록을 정의.	w, x
sizes	- 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의.

 

• <img>의 크기

  - <img>의 사이즈를 지정할 때 width든 height든 하나만 입력하면 이미지의 비율을 그대로 유지한 채 줄일 수 있음.

  - 이미지의 크기를 조절하는 용도로 사용하는 경우에는 가로/세로 중 한 쪽의 사이즈만 입력하는 것을 권장.

  - 이미지의 크기 조절은 CSS를 이용해 제어하는 것도 가능함.

 

 

• 반응형 웹과 <img>: srcset, sizes 속성

  - srcset, sizes 속성은 일반적으로 반응형 웹 사이트 제작 시 사용.

  - 반응형 구조에 따라 어떤 종류의 이미지가 나올지 선택하는 경우 사용함.

  - srcset, sizes 두 속성 모두 입력되는 경우 srcset이 사용되는 환경에서는 src 속성이 사용되지 않으며, srcset이 사용될 수 없는 환경일 경우 src 속성의 이미지가 활용됨.

  - srcset, sizes 속성에 대한 값 작성 시 아래와 같이 "이미지 경로-띄어쓰기-크기" 순서로 작성.

<!-- 작성 문법 -->
<img
  srcset="경로 원본크기,
          경로 원본크기,
          경로 원본크기"
  sizes="(미디어조건) 최적화출력크기,
         (미디어조건) 최적화출력크기,
         기본출력크기"
  src="경로"
  alt="대체텍스트" />

<!-- 사용 예시 -->
<img
  srcset="images/xxx.png 400w,
          images/xxxx.png 700w,
          images/xxxxx.png 1000w"     
  sizes="(max-width: 500px) 444px,
         (max-width: 800px) 777px,
         1222px"
  src="images/xxx.png"
  alt="xxx" />

 

  - 일반적으로 반응형 웹에서 이미지를 지원하기 위해서는 ‘미디어쿼리’라고 하는 CSS Media Rule(@media)을 사용함.

  - 그리고 Media Rule 안에서는 background-image라는 css 속성을 이용해 이미지를 지정하게 되는데, 이때 Viewport의 크기부터 사용자 화면의 해상도 등 많은 환경들을 고려해야 함.
  - HTML <img>의 srcset과 sizes 속성을 이용하면 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저(User agent)에 떠넘겨서 반응형 웹을 만들어낼 수 있음.

 

 

• <img>의 srcset 속성

  - srcset은 브라우저에 제시할(브라우저에서 사용할) 이미지의 경로와 그 이미지들의 원본 크기를 지정함.

  - srcset에는 반응형 웹에 맞게 브라우저가 사용할 이미지의 후보들을 적어주고, 브라우저는 후보들 중 상황에 맞는 이미지를 선택 사용함.

  - 사용할 이미지를 사이즈 별로 2장 이상 준비하여 srcset 속성에 작성.

    - 한 장만 사용할 경우에는 굳이 srcset을 사용할 필요가 없으며 src 속성을 이용.

  - srcset 속성 사용 시 이미지의 크기로 px 단위가 아닌 w descriptor 혹은 x descriptor를 입력해야 함에 주의할 것.

  - 작은 크기의 이미지부터 순차적으로 입력해야 함.

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

  - 고정된 이미지 크기를 유지하려면 width 속성을 추가할 수 있음.

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

  - Viewport 너비가 400px 이하일 때는 small.png(400px)가 사용됨.

    Viewport 너비가 401~700px 일 때는 medium.png(700px)가 사용됨.

    Viewport 너비가 701px 이상일 때는 large.png(1000px)가 사용됨.

 

  ※ Viewport가 550px라면 가장 적합한 이미지는 700px의 이미지.

  - 550px의 영역에서 400px의 이미지를 사용할 경우 400px을 550px에 특화되어 나오게 하기 위해서는 이미지를 늘려 서 사용해야 함.

  - 이미지를 늘릴 경우 이미지의 px 단위가 뭉개지기 시작함.

  - 이미지를 늘리기보다 줄여서 사용하는 것이 이미지가 깨지지 않는 방법이라고 브라우저가 판단하기 때문.
  - 따라서 브라우저는 줄여서 사용할 수 있는 가장 가까운 이미지를 찾는 것.

  - 이는 CSS의 @media를 사용하는 것과 유사함.

 

 

X descriptor(X unit)

  - x 디스크립터(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미함.
    - 비율 의도: 숫자 1을 기준으로 몇 배냐 하는 것. 2배일 경우 2x. 배수를 정의.

  - x descriptor 사용 시 위 w descriptor의 예시를 아래와 같이 수정할 수 있음.

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

 

  - x 디스크립터는 디바이스의 픽셀 비율(Device pixel ratio)과 일치하는 값으로 최적화 선택됨.

    - mydevice.io: 현재 화면의 측정 값을 확인 가능.

  - 일반적으로 정수(integer) 값으로 제공하는 것이 좋음.

  - x 디스크립터의 경우 배수로 작성하기 때문에 정확한 크기를 가늠하기 어려움.

    따라서 일반적인 경우 w 디스크립터를 사용.

  - w 디스크립터가 x 디스크립터의 상위호환이기 때문에 x 디스크립터보다는 w 디스크립터를 사용하는 것을 권장.

 

 

• <img>의 size 속성

  - sizes 속성은 미디어 조건과 그 조건에 해당하는 이미지의 ‘최적화 출력 크기’를 지정.

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

  - sizes="(min-width: 1000px) 700px"는 브라우저의 viewport 가로 너비가 1000px 이상일 때(min-width: 1000px), 이미지의 최적화 출력 크기를 700px로 해달라(이미지를 700px로 최적화 출력하겠다)는 명령을 의미함.

 

  - sizes는 일반 출력이 아닌 '최적화 출력'을 의미하며, width 속성의 경우 일반 출력을 의미함.

  - 일반 출력(width): 사이즈를 500px로 유지하지만 그 안에서 브라우저의 크기 최적화에 따라 사용하는 이미지의 경로를 다르게 가져가겠다는 것. 출력하는 일반적인 크기만 500px로 고정.
  - 최적화 출력(sizes): 출력되는 이미지 크기는 500px. 최적화도 500px.
  - 따라서 일반 출력인 width는 이미지의 '출력 크기'만 지정하는 데 반해, sizes는 이미지의 ‘출력 크기+최적화 크기’를 함께 지정하는 개념

  - sizes와 width를 같이 작성할 경우 width가 우선되어 sizes 속성은 적용되지 못함.
  - srcset, sizes는 Internet Explorer에서 지원되지 않음.