img element - by. UXKM

img element 설명

<img> 요소는 빈 요소(empty elements) 또는 단일요소 이며, HTML 문서에서 이미지(image)를 정의할 때 사용합니다.
<img> 요소로 정의된 이미지는 HTML 문서에 직접 삽입되는 것이 아니라, HTML 문서에 이미지가 링크되는 형태입니다.
즉, <img> 요소는 참조된 이미지를 위한 일종의 수용 공간을 만들어 주는 것입니다.

<img> 요소에는 src(source) 속성과 alt(alternative text) 속성을 반드시 명시해야만 합니다.
HTML5에서는 <img> 요소의 align, border, hspace, vspace 속성을 더 이상 지원하지 않습니다.
HTML에서는 <img> 요소를 닫지 않지만, XHTML에서는 다음과 같이 반드시 요소를 닫아야만(/) 합니다.

CSS 기본값 :
DOCTYPE 별 문법 :

6.2.1. img 속성

[src] <img src="URL">

이 속성은 <img>요소에 필수입니다.

[alt] <img alt="이미지 대체 텍스트">

이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시합니다.
이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공합니다.

  1. 만약 이미지가 정보를 포함하고 있다면, 텍스트는 이미지를 묘사해야 합니다.
  2. 만약 이미지가 <a> 요소 내에 위치하고 있다면, 텍스트는 링크가 어디와 연결되어 있는지를 설명해야 합니다.
  3. 만약 이미지가 정보를 포함하지 않은 단순한 장식이라면 alt=""와 같이 사용해야 합니다만, 이런 경우에는 css를 사용하여 배경(background-image)으로 사용하는 것을 권장합니다.

[width], [height]

<img width="이미지의 너비를 픽셀(pixel) 단위로 명시함" height="이미지의 높이를 픽셀(pixel) 단위로 명시함">
이미지의 height 속성과 width 속성은 언제나 명시하는 것이 좋습니다.
이 속성들이 명시되어 있으면 웹 페이지가 로드될 때 브라우저가 해당 이미지를 위한 적절한 공간을 남겨둘 수 있지만, 이 속성들이 명시되어 있지 않으면 브라우저는 이미지의 크기를 알 수 없어 필요한 공간을 남겨둘 수 없게 됩니다.
따라서 이미지가 로딩되는 순간 페이지의 레이아웃이 변형되는 결과를 초래할 수 있습니다.
height 속성과 width 속성을 사용하여 크기가 큰 이미지를 작게 보이도록 했을지라도 사용자가 해당 이미지를 다운로드하면 여전히 원본 크기의 이미지를 내려받게 됩니다.
따라서 사용자에게 현재 화면에 출력된 크기의 이미지를 내려받게 하고 싶다면 이미지를 웹 페이지에 사용하기 전에 이미지의 크기를 재조정하여 사용해야 합니다.
HTML 4.01에서 <img> 요소의 width, height 속성값은 픽셀(pixel) 단위뿐만 아니라 퍼센트(%) 단위로도 정의할 수 있었습니다.
하지만 HTML5에서는 오직 픽셀(pixel) 단위만을 사용해야 합니다.

[usemap] <img usemap="#맵이름">

<img> 요소의 usemap 속성은 클라이언트 사이드 이미지 맵(client-side image-map)으로 이미지를 명시합니다.
usemap 속성은 <map> 요소의 name 속성과 결합하여, <img> 요소와 <map> 요소 사이의 관계를 생성합니다.
만약 해당 <img> 요소가 <a>요소나 <button> 요소의 자손 요소(descendant element)이면 usemap 속성은 사용할 수 없습니다.

  1. #맵이름 값 : 해시 문자(#)와 함께 사용할 <map> 요소의 name 속성값을 명시합니다.

[ismap] <img ismap>

<img> 요소의 ismap 속성은 해당 이미지가 서버 사이드 이미지맵(server-side image map)의 일부인지 여부를 명시합니다.
이 속성은 해당 <img> 요소가 유효한 href 속성값을 가지는 <a> 요소의 자손 요소인 경우에만 허용됩니다.
ismap 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.
XHTML에서는 속성값을 생략할 수 없으므로, 다음과 같이 속성명과 속성값을 모두 명시해야만 합니다.
<img ismap="ismap" />

[srcset] <img srcset="/images/img1.jpg 960w, /images/img2.jpg 575w">

이 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정합니다.
다양한 상황 (예 : 고해상도 디스플레이, 소형 모니터 등)에서 사용할 이미지
<img> 요소의 srcset 속성은 각각 다른 환경에서 사용될 이미지 소스를 명시합니다.
srcset 속성은 브라우저가 사용할 수 있는 이미지 소스를 나타내는 하나 이상의 문자열을 콤마(,)로 결합한 리스트를 속성값으로 가집니다.
각 이미지 소스를 나타내는 문자열은 다음과 같이 구성됩니다.
Internet Explorer는 지원하지 않습니다.

  1. w 단위(Width descriptor)는 이미지의 원본 크기(가로 너비)를 의미합니다. 예를 들어 400x300(px) 크기 이미지의 w값은 400w입니다.

    뷰포트 너비가 400px 이하일 때 small.png(400px)가 사용됩니다.

    뷰포트 너비가 401~700px 일 때 medium.png(700px)가 사용됩니다.

    뷰포트 너비가 701px 이상일 때 large.png(1000px)가 사용됩니다.

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

  2. x 단위(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미합니다.

    w 단위를 사용하면 x 단위를 사용할 필요가 없습니다. 대부분의 경우 w 단위를 사용하면 됩니다.

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

[sizes] <img sizes="(min-width: 960px) 50vw, (min-width: 575px) 75vw, 100vw">

미디어조건과 그 조건에 해당하는 이미지의 ‘최적화 출력 크기’를 지정합니다.
<img> 요소의 sizes 속성은 서로 다른 페이지 레이아웃에 대한 이미지 소스의 크기를 명시합니다.
sizes 속성은 이미지 소스의 크기를 나타내는 하나 이상의 문자열을 콤마(,)로 결합한 리스트를 속성값으로 가집니다.
각 이미지 소스의 크기를 나타내는 문자열은 다음과 같이 구성됩니다.
Internet Explorer는 지원하지 않습니다.

  1. 미디어 상태(마지막 아이템에서는 생략함).
  2. 이미지 소스의 크기값.
  3. sizes와 width를 같이 작성할 경우 width가 우선합니다.
  4. srcset 속성은 쉼표(,)로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고,
  5. sizes 속성은 쉼표(,)로 구분된 미디어조건(선택적)과 그에 따라 최적화되어 출력될 이미지 크기를 지정합니다.
  6. src 속성은 srcset을 사용할 수 없는 환경에서 동작합니다.
sizes 기본 문법 :
미디어 조건 예 :

뷰포트 너비가 400px 이하일 때 small.png(400px)가 사용됩니다.
뷰포트 너비가 401~700px 일 때 medium.png(700px)가 사용됩니다.
뷰포트 너비가 701~999px 일 때 large.png(1000px)가 사용됩니다.
뷰포트 너비가 1000px 이상일 때 medium.png(700px)가 사용됩니다.

sizes="(min-width: 1000px) 700px"에서 (min-width: 1000px)은 ‘뷰포트 너비(가로)가 1000px 이상일 때’를 의미하며,
이어나오는 700px은 그 조건일 때 이미지를 ‘700px로 최적화 출력하겠다’를 의미합니다.
그렇다면 700px로 이미지를 출력하기 위해 srcset 목록에서 사용될 최적의 이미지는 medium.png이며,
결과로 뷰포트 너비(가로)가 1000px 이상일 때 medium.png가 사용되었습니다.

미디어 조건 생략 예 :

위 예제의 결과로, 뷰포트 너비와 상관없이 medium.png만 사용됩니다.
또한 medium.png는 500px의 크기를 가집니다.(원래는 700px 크기의 이미지입니다.)

sizes는 없고 width만 있는 경우 예 :

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

width는 이미지의 ‘출력 크기’만 지정하는 데 반해, sizes는 이미지의 ‘출력 크기’ + ‘최적 크기’도 함께 지정하는 개념입니다.
따라서 sizes="500px"이 지정된 첫번째 예제는 500px에 최적화된 이미지로 medium.png를 사용했고 이미지 크기도 500px로 설정한 것입니다.

sizes와 width를 같이 작성할 경우 width가 우선합니다.

혼합하여 사용하는 경우 예 :

[crossorigin] <img crossorigin="anonymous | use-credentials">

<canvas> 요소에 사용될 이미지에 교차 출처 접근(cross-origin access)을 허용하는 제3의 사이트(third-party site)로부터의 이미지 허용 여부를 명시합니다.

  1. anonymous 값 : 교차 출처 요청(예 : Origin:HTTP 헤더 사용)이 수행되지만 자격 증명이 전송되지 않습니다.
    (예 : 쿠키, X.509 인증서 또는 HTTP 기본 인증 없음).
    서버가 Access-Control-Allow-OriginHTTP 헤더를 설정하지 않고 원본 사이트에 자격 증명을 제공하지 않으면 이미지가 오염되고 사용이 제한됩니다.
  2. use-credentials : Origin 전송된 자격 증명
    (예 : 쿠키, 인증서 또는 HTTP 기본 인증)과 함께 수행되는 교차 출처 요청(즉, HTTP 헤더 사용)
    서버가 Access-Control-Allow-CredentialsHTTP 헤더를 통해 원본 사이트에 자격 증명을 제공하지 않으면 이미지가 오염되고 사용이 제한됩니다.
    속성이 없으면 CORS 요청없이(즉, OriginHTTP 헤더 를 보내지 않고) 리소스를 가져와서 <canvas>요소 에서 오염되지 않은 사용을 방지합니다. 유효하지 않은 경우, anonymous값이 사용된 것처럼 처리됩니다.

[longdesc] <img longdesc="[html-longdesc]에 정의 된 이미지의 확장 된 설명에 대한 링크를 제공하는 URL">

<img> 요소의 longdesc 속성은 이미지에 대한 alt 속성의 설명이 부족한 경우 longdesc 속성을 제공하여 부가적인 설명을 제공하는 URL을 명시합니다.
현재는 접근성 관련하여 이 속성보다는 다른방법으로 대체하는 것을 권장합니다.