<img>

This translation is in progress.

HTML <img> 요소는 문서에 이미지를 넣습니다.

위의 예제를 통해 <img> 요소의 사용법을 알 수 있습니다.

  • src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정합니다.
  • alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.

지원하는 이미지 형식

HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않으므로, 각각의 사용자 에이전트는 서로 다른 형식을 지원합니다. 전체 목록은 웹 브라우저가 지원하는 이미지 형식 안내서를 참고하세요.

이미지를 가져올 수 없을 때

이미지를 불러오거나 그릴 때 오류가 발생했고, onerror 속성에 오류 처리기를 등록했다면 error 이벤트와 함께 처리기를 호출합니다. 오류는 다양한 상황에서 발생할 수 있는데, 그 중 일부 원인은 다음과 같습니다.

  • src 속성이 비었거나 null임.
  • src의 URL이 현재 사용자가 보는 페이지의 URL과 같음.
  • 지정한 이미지가 손상돼 불러올 수 없음.
  • 이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, <img> 요소의 속성에도 크기를 지정하지 않음.
  • 사용자 에이전트가 지원하지 않는 이미지 형식임.

특성

이 요소는 전역 특성을 포함합니다.

alt
이미지의 대체 텍스트 설명.

참고: 브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,

  • 비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)
  • 사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)
  • 유효하지 않은 이미지거나, 지원하지 않는 형식

위와 같은 경우 브라우저가 이미지를 alt 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 alt 특성에 항상 유용한 값을 제공해야 합니다.

alt 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(alt="")을 사용한 경우, 이미지가 콘텐츠의 중요 부분이 아니므로(장식 또는 추적용 픽셀 등), 비 시각적 브라우저가 렌더링을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 alt 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.

이미지를 텍스트로서 복사-붙여넣기할 때와, 이미지 링크를 북마크 할 때도 alt의 값을 사용합니다.

crossorigin
CORS를 사용해 지정한 이미지 파일을 가져와야 하는지의 여부. 교차 출처 활성화 리소스<canvas> 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다.
anonymous
자격 증명 없이 교차 출처 요청을 전송합니다. 즉, Origin HTTP 헤더를 쿠키, X.509 인증서, HTTP Basic 인증 없이 전송합니다. 서버에서 Access-Control-Allow-Origin HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.
use-credentials
자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, Origin HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 Access-Control-Allow-Credentials HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.
특성이 존재하지 않으면 리소스를 CORS 요청 없이(Origin HTTP 헤더 없이) 가져오므로, <canvas>를 오염시키게 됩니다. 유효하지 않은 값의 경우 anonymous 키워드를 사용한 것으로 간주합니다.
decoding
이미지 디코딩에 관해 브라우저에 제공할 힌트. 가능한 값은 다음과 같습니다.
sync
다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩 합니다.
async
다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.
auto
선호하는 디코딩 모드가 없음을 나타내는 기본값입니다. 사용자에게 제일 적절한 값을 브라우저가 결정합니다.
height
픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다.
importance
리소스의 상대적인 다운로드 중요도. 가능한 값은 다음과 같습니다.

auto: 설정 안함. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.

high: 이미지가 높은 우선순위를 지님.

low: 이미지가 낮은 우선순위를 지님.

ismap
이미지가 서버 사이드 맵의 일부인지 나타냄. 서버 사이드 맵에 속하는 경우, 사용자가 이미지에서 클릭한 위치를 서버로 전송합니다.

참고: 포인팅 장치가 없는 사용자도 갈 수 있는 대체 목적지를 제공하기 위해, ismap<img> 요소가 유효한 href 특성을 가진 <a> 요소의 자손인 경우에만 사용 가능합니다.

loading
브라우저 이미지를 불러올 방법.
  • eager: 뷰포트 안에 위치하는지 여부와 관계 없이, 이미지를 즉시 불러옵니다. 기본값.
  • lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다.
referrerpolicy
리소스를 가져올 때 사용할 리퍼러를 나타내는 문자열.
  • no-referrer: Referer 헤더를 전송하지 않습니다.
  • no-referrer-when-downgrade: TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 Referer 헤더를 전송하지 않습니다. 따로 지정하지 않은 경우 사용하는 기본 정책입니다.
  • origin: Referer 헤더가 요청 출처의 스킴, 호스트, 포트를 포함합니다.
  • origin-when-cross-origin: 다른 출처로 요청할 땐 리퍼럴 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로와 쿼리 문자열도 포함합니다.
  • unsafe-url: Referrer 헤더가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 하지만 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. TLS로 보호받는 리소스에서 그렇지 않은 출처로 정보를 누출할 수 있으므로 안전하지 않습니다.
sizes
소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열. 각각의 문자열은 다음 구성요소로 이루어집니다.
  1. 미디어 조건. 마지막 항목에서는 생략해야 합니다.
  2. 소스 크기 값.

미디어 조건은 이미지의 속성이 아니라 뷰포트 속성을 가리킵니다. 예를 들어, (max-height: 500px) 1000px은 1000px 너비의 소스를 사용하려면 뷰포트가 500px 이하여야 한다는 뜻입니다.

소스 크기는 의도한 이미지 표시 크기를 지정합니다. 사용자 에이전트는 현재 소스 크기를 사용해, 너비(w) 서술자를 사용한 srcset 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 고유 크기(CSS 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. srcset이 비어있거나 너비 서술자를 사용하지 않은 경우, sizes 특성은 아무 효과도 없습니다.

src
이미지의 URL. 필수 사항입니다. srcset을 지원하는 브라우저srcset에 픽셀 밀도 1xw 서술자가 없는 경우, src는 픽셀 밀도 1x의 이미지 후보로 취급합니다.
srcset
사용자 에이전트가 사용할 수 있는 이미지 소스의 후보. 쉼표로 구분하는 한 개 이상의 문자열 목록입니다. 각각의 문자열은 다음 구성요소로 이루어집니다.
  1. 이미지의 URL.
  2. 선택적으로, 공백과 함께 그 뒤를 잇는...
    • 너비 서술자(양의 정수와 바로 뒤의 'w' 문자). 너비 서술자의 값을 sizes 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.
    • 픽셀 밀도 서술자(양의 실수와 바로 뒤의 'x' 문자).

서술자를 포함하지 않은 경우 기본값인 1x로 간주합니다.

같은 srcset 특성에 너비와 픽셀 밀도 서술자를 함께 사용하거나, 동일한 서술자를 두 개 이상 사용하는건 유효하지 않습니다.

사용자 에이전트 스스로 가능한 소스 중 하나를 선택합니다. 따라서 사용자 에이전트는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있는 상당한 여지를 가집니다. 반응형 이미지 자습서를 방문해 예제를 살펴보세요.

width
이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다.
usemap
요소와 연결할 이미지 맵의 프래그먼트.

참고: <img> 요소가 <a> 또는 <button> 요소의 자손이면 사용할 수 없습니다.

CSS 스타일링

<img>대체 요소입니다. 기본적으로 displayinline이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 inline-block처럼 보입니다. border/border-radius, padding/margin, width, height 등의 속성을 이미지에 지정할 수 있습니다.

<img>는 기준선을 갖지 않으므로, vertical-align: baseline을 지정한 인라인 서식 맥락에서는 이미지의 아래쪽 모서리가 텍스트 기준선으로 가게 됩니다.

요소 박스 내의 이미지 위치는 object-position 속성으로 바꿀 수 있습니다. 크기는 object-fit 속성을 통해 요소 크기에 맞출지, 요소를 채울지 등을 지정할 수 있습니다.

이미지는 고유 너비와 높이를 가질 수 있지만, 일부 유형의 이미지는 그렇지 않습니다. 예를 들어, SVG 요소는 루트 <svg> 요소에 widthheight가 없는 경우 고유 크기를 가지지 않습니다.

예제

보조 텍스트

The following simple example embeds an image into the page, and includes alternative text to improve accessibility.

<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
     alt="MDN logo — a dinosaur logo with the text MDN">

이미지 링크

This example builds upon the previous one, showing how to turn the image into a link. It is very simple to do so — you just nest the <img> tag inside the <a>. One consideration is that you should made the alternative text describe the resource the link is pointing to.

<a href="https://developer.mozilla.org">
  <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
       alt="Visit the MDN site">
</a>

srcset 특성 사용하기

In this example we include a srcset attribute containing a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices. The image referenced in the src attribute is counted as a 1x candidate in user agents that support srcset.

 <img src="mdn-logo-sm.png" 
      alt="MDN" 
      srcset="mdn-logo-HD.png 2x">

srcsetsizes 특성 사용하기

The src attribute is ignored in user agents that support srcset when 'w' descriptors are included. When the (max-width: 600px) media condition matches, the 200px wide image will be loaded (it is the one that matches 200px most closely), otherwise the other image will be loaded.

 <img src="clock-demo-thumb-200.png" 
      alt="Clock" 
      srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

To see the resizing in action, view the example on a separate page, so you can actually resize the content area.

보안 및 개인정보 고려사항

Although <img> elements have innocent uses, they can have undesirable consequences for user security and privacy. See Referer header: privacy and security concerns for more information and mitigations.

접근성 고려사항

적합한 대체 설명 작성

An alt attribute's value should clearly and concisely describe the image's content. It should not describe the presence of the image itself or the file name of the image. If the alt attribute is purposefully left off because the image has no textual equivalent, consider alternate methods to present what the image is trying to communicate.

Don't

<img alt="image" src="penguin.jpg">

Do

<img alt="A Rockhopper Penguin standing on a beach." src="penguin.jpg">

When an alt attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.

title 특성

The title attribute is not an acceptable substitute for the alt attribute. Additionally, avoid duplicating the alt attribute's value in a title attribute declared on the same image. Doing so may cause some screen readers to announce the description twice, creating a confusing experience.

The title attribute should also not be used as supplemental captioning information to accompany an image's alt description. If an image needs a caption, use the figure and figcaption elements.

The value of the title attribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While this can provide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using title.

기술 요약

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 내장 콘텐츠, 뚜렷한 콘텐츠. usemap 특성을 가진 경우 대화형 콘텐츠.
가능한 콘텐츠 없음. 빈 요소입니다.
태그 생략 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.
가능한 부모 요소 내장 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLImageElement

명세

Specification Status Comment
Referrer Policy
The definition of 'referrer attribute' in that specification.
Candidate Recommendation Added the referrerpolicy attribute.
HTML Living Standard
The definition of '<img>' in that specification.
Living Standard
HTML5
The definition of '<img>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<img>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
imgChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
align
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
altChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
border
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
crossoriginChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
decodingChrome Full support YesEdge ? Firefox Full support 63IE No support NoOpera Full support YesSafari Full support 11.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 63Opera Android Full support YesSafari iOS Full support 11.3Samsung Internet Android Full support Yes
heightChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hspace
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
intrinsicsize
ExperimentalNon-standard
Chrome Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox ? IE No support NoOpera Full support 58Safari No support NoWebView Android No support NoChrome Android Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the #enable-experimental-productivity-features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android ? Opera Android Full support 50Safari iOS No support NoSamsung Internet Android Full support 10.0
Disabled
Full support 10.0
Disabled
Disabled From version 10.0: this feature is behind the #enable-experimental-productivity-features preference.
ismapChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
loading
Experimental
Chrome Full support 76Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1542784
IE No support NoOpera Full support 63Safari No support No
Notes
No support No
Notes
Notes See bug 196698
WebView Android No support NoChrome Android Full support 76Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1542784
Opera Android Full support 54Safari iOS No support No
Notes
No support No
Notes
Notes See bug 196698
Samsung Internet Android No support No
longdescChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
name
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
onerror
Deprecated
Chrome Full support YesEdge ? Firefox Full support 51IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 51Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
referrerpolicyChrome Full support 51Edge No support NoFirefox Full support 50IE No support NoOpera Full support 38Safari Full support 11.1WebView Android Full support 51Chrome Android Full support 51Firefox Android Full support 50Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 7.2
sizesChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
srcChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
srcsetChrome Full support 34Edge Full support YesFirefox Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 21Safari Full support 8WebView Android Full support 37Chrome Android Full support 34Firefox Android Full support 38
Full support 38
No support 32 — 52
Disabled
Disabled From version 32 until version 52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 21Safari iOS Full support 8Samsung Internet Android Full support 2.0
usemapChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
vspace
Deprecated
Chrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
widthChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기