ELEMENTS

Editing
  • account_tree
  • bug_report

<img>

이미지를 출력한다.

  • 콘텐츠 분류

    EMBEDDED CONTENT, FLOW CONTENT, FORM ASSOCIATED, INTERACTIVE CONTENT, PALPABLE CONTENT, PHRASING CONTENT

    usemap 애트리뷰트가 명시되면 인터랙티브 콘텐츠(interactive content)가 된다.

  • 허용된 부모 요소 또는 위치

    EMBEDDED CONTENT

    임베디드 콘텐츠(embedded-content)가 예상되는 위치

  • 콘텐츠 모델

  • 태그 생략

    종료 태그 생략 가능

  • DOM Interface

    HTMLImageElement

    [Exposed=Window,
     LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned long height)]
    interface HTMLImageElement : HTMLElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute DOMString alt;
      [CEReactions] attribute USVString src;
      [CEReactions] attribute USVString srcset;
      [CEReactions] attribute DOMString sizes;
      [CEReactions] attribute DOMString? crossOrigin;
      [CEReactions] attribute DOMString useMap;
      [CEReactions] attribute boolean isMap;
      [CEReactions] attribute unsigned long width;
      [CEReactions] attribute unsigned long height;
      readonly attribute unsigned long naturalWidth;
      readonly attribute unsigned long naturalHeight;
      readonly attribute boolean complete;
      readonly attribute USVString currentSrc;
      [CEReactions] attribute DOMString referrerPolicy;
      [CEReactions] attribute DOMString decoding;
      [CEReactions] attribute DOMString loading;
      [CEReactions] attribute DOMString fetchPriority;
    
      Promise<undefined> decode();
    
      // also has obsolete members
    };

구문

마크업 형식
<img>
Example

애트리뷰트

alt string

지정된 요소의 대체 텍스트를 나타낸다.

이 요소에서의 특징

이미지를 어떠한 이유로 가져올 수 없을 때 설정된 텍스트를 출력한다.

src non-empty URL

사용할 리소스의 경로를 설정한다.

About Non-empty URL

비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.

이 요소에서의 특징

이미지의 경로를 지정한다.

srcset srcset attribute

스크린의 크기와 환경에 따라 사용할 리소스를 힌트와 함께 유저 에이전트에게 제공한다.

About Srcset attribute

콤마(,)로 구분된 하나 이상의 문자열 값이며 유저 에이전트가 환경에 따라 선택적으로 사용할 수 있는 이미지 리소스를 나타낸다.

이 요소에서의 특징

반응형 이미지를 구현하는 애트리뷰트이다. 사용자의 다양한 스크린의 크기와 환경에 따라 최적화된 이미지를 유저 에이전트에게 후보로 제공하여 사용하게 하는 일정 형식의 문자열 데이터를 정의한다.

이미지 리소스는 가로 460px, 800px로 두 가지 후보가 있으며  디스크립터(descriptor)를 각각 460w, 800w로 정의했다. 너비(width) 디스크립터가 지정되었으므로 픽셀 밀도 계산을 위한 sizes 애트리뷰트가 명시되어야 한다. srcsrcset 애트리뷰트를 지원하지 않는 유저 에이전트에서 사용한다.
<img 
  srcset="night_sky_460w.jpg 460w, night_sky_800w.jpg 800w"
  sizes="(max-width: 600px) 460px, 800px"
  src="night_sky_800w.jpg"
  alt="저녁 하늘" />

사용 예

sizes sizes attribute

소스 크기를 소스 집합(srcset)에 제공하는 애트리뷰트이다.

srcset 애트리뷰트에서 너비(width) 디스크립터(descriptor)가 작성되었다면 sizes 애트리뷰트를 작성 해야한다.

About Sizes attribute

리소스의 크기 집합을 나타내는 콤마로 구분된 하나 이상의 문자열을 나타낸다.

구문 예

공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.

구문 형식
<source-size-list> = <source-size>#? , <source-size-value>
<source-size> = <media-condition> <source-size-value> | auto
<source-size-value> = <length> | auto

이 요소에서의 특징

추가적으로 loading 애트리뷰트가 eager 상태인 경우 sizes 애트리뷰트가 명시되어야 한다.

crossorigin enumerated attribute

교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

anonymous

교차 출처(CORS) 요청을 수행하지만  별도의 자격 증명을 보내지 않고 same-origin으로 설정되어 익명으로 요청을 한다. 

use-credentials

교차 출처(CORS) 요청을 수행하면서 쿠키(cookie), X.509 인증서, HTTP Basic 인증 중 한 가지 이상의 자격 증명을 포함하는 include로 설정되어 요청을 한다. 

usemap hash-name reference

<img> 요소를 핫스팟 맵(<map>)으로 사용하고자 하는 경우 '#'과 함께 이름을 설정한다. 실제로 하이퍼링크(hyperlink)를 설정하기 위해서는 <map> 요소로 연결하고 그 하위에 <area> 요소로 영역을 설정하여 링크를 지정한다. 자세한 방법은 <map><area> 요소를 참고한다.

About Hash-name reference

요소에 대한 유효한 hash-name reference 유형의 값은 U+0023 NUMBER SIGN 문자(#) 다음에 같은 트리에 유형이 있는 요소의 name 속성 값과 정확히 일치하는 문자열이다.

사용 예

<img src="dog.jpg" usemap="#dog" />
ismap boolean attributes

사용자가 이미지에서 클릭한 위치 정보를 서버로 전송해 활용할 수 있다. 상대적으로 usemap 애트리뷰트는 이미지에 대한 맵(map)을 설정해서 클릭한 위치별로 하이퍼링크(hyperlink)를 생성하는 클라이언트(client) 기반의 작동이라 한다면 ismap 애트리뷰트는 클릭한 위치 정보를 헤더(header)를 통해 서버에 전송하여 처리하는 서버 기반의 작동이라 할 수 있다.

이러한 기능을 정상적으로 동작하게 하려면 반드시 부모 요소가 href 애트리뷰트가 명시된 <a> 요소이어야 한다. 

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

사용 예

<a href="/proc.php">
  <img src="coords.jpg" ismap />
</a>
width dimension attribute

요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

height dimension attribute

요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

referrerpolicy enumerated attribute

리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

no-referrer

리퍼러(referrer) 헤더(header)가 전송되지 않는다.

no-referrer-when-downgrade

요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.

origin

same-origin-referrer 요청 및 cross-origin-referrer 요청을 모두 수행할 때 요청의 referrerURL의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청의 경우는 요청의 referrerURL 원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

same-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer 요청에는 전송되지 않는다.

strict-origin

요청에 대한 referrerURL 원본의 ASCII 직렬화를 전송한다.

strict-origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청시에는 요청의 referrerURL 원본의 ASCII 직렬화만 전송되도로 한다.

unsafe-url

요청의 전체 referrerURLsame-origin-referrer 요청과 cross-origin-referrer 요청 모두에게 전송되도록 한다.

decoding image decoding hint선택

이미지 디코딩(decoding)의 방식에 관해 유저 에이전트에게 제공하는 힌트를 나타낸다. 제시된 키워드중에서 하나의 값을 지정한다.

기본값

auto

사용되는 키워드

async

다른 콘텐츠의 표시 지연을 방지하기 위해 이미지를 비동기적으로 디코딩한다.

auto

디코딩 모드가 없음을 나타내는 기본 값이다. 이 경우에는 유저 에이전트가 결정한다.

sync

다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩한다.

loading enumerated attribute

리소스의 로딩 시점을 설정한다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

eager

위치가 뷰포트(viewport) 내외부와 상관없이 즉시 로드한다.

lazy

유저 에이전트가 정의한 뷰포트에서 계산된 거리에 도달할 때까지 로드를 지연한다.

fetchpriority enumerated attribute

연결된 리소스를 가져와 처리할 때 우선 순위를 결정한다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

auto

동일한 대상을 가진 다른 리소스와 비교하여 가져오기 우선 순위를 자동으로 결정한다.

high

동일한 대상을 가진 다른 리소스에 비해 우선 순위가 높은 가져오기를 알린다.

low

동일한 대상을 가진 다른 리소스에 비해 우선 순위가 낮은 가져오기를 알린다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

버전 명세

HTML Standard
#the-img-element

지원 웹브라우저