정의 및 사용 방법

<img> 태그는 이미지(image)를 나타냅니다. HTML 문서에 이미지를 삽입할 때 사용합니다.

<img> 태그는 HTML 문서에 이미지를 삽입하는 가장 기본적인 방법이며, 웹 페이지에서 시각적인 매력과 의미 전달을 향상시키는 데 중요한 역할을 합니다.

기본 예제

다음 코드는 웹 페이지에 earth.jpg라는 이미지를 삽입합니다.

HTML 
<img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">
브라우저에서 실제 표시된 모습

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

  • 앞서 언급한 바와 같이 src 속성은 삽입하려는 이미지 경로(URL)를 지정합니다.
  • <img> 태그에는 선택적으로 alt 속성을 사용할 수 있는데, 시각장애인을 위한 스크린 리더를 사용하는 사용자에게 이미지 대신 사용자가 이해할 수 있는 대체 텍스트로 설명할 수 있어서 웹 접근성 차원에서 매우 유용합니다. 또한 일부 브라우저(예를 들어, 크롬)에서는 네트워크 오류, 콘텐츠 차단 등 어떤 이유로 이미지를 표시할 수 없는 경우에 이 속성의 값을 텍스트로 대신 보여줍니다.

<img> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</img>)가 없다는 의미입니다.

관련 속성 사용하기

<img> 태그의 관련된 속성에 대해 알아보겠습니다.

삽입하려는 이미지 경로(URL)를 지정합니다.

<img> 태그에는 src와 srcset 속성 중 적어도 하나는 반드시 있어야 하며, 값으로는 삽입하려는 유효한 이미지 경로(URL)가 지정되어 있어야 합니다. 그래야 <img> 태그로 문서에 삽입할 이미지를 가져올 수 있기 때문입니다.

지원하는 이미지 형식

출처: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

HTML 표준 명세서에서는 지원해야 하는 이미지 형식을 별도로 정의하고 있지 않지만, src 속성으로 웹 페이지에 삽입할 수 있는 이미지 파일 유형은 일부 제한이 있다는 것을 명심해야 합니다. 각각의 브라우저마다 서로 다른 형식을 지원하는 경우가 있습니다.

다음은 웹에서 가장 일반적으로 사용되고 대부분의 브라우저에서 지원하고 있는 이미지 유형입니다.

대부분의 브라우저에서 지원하고 있는 이미지 유형
JPEG(.jpg, .jpeg) 높은 호환성을 갖추고 있으며, 파일 크기를 줄이면서도 적절한 화질을 유지할 수 있어 가장 보편적으로 사용되는 이미지 형식입니다.
지원: Chrome, Edge, Firefox, Opera, Safari.
PNG(.png) 고품질을 유지하면서 이미지를 저장하는 데 적합하며, 투명도가 필요한 경우에 선호됩니다. 특히 로고, 아이콘, 텍스트가 포함된 이미지에 주로 사용됩니다.
지원: Chrome, Edge, Firefox, Opera, Safari.
GIF(.gif) 간단한 이미지와 애니메이션 이미지를 저장하는 데 주로 사용됩니다.
지원: Chrome, Edge, Firefox, Opera, Safari.
WebP(.webp) Google에서 개발한 이미지 유형으로, JPEG 및 PNG보다 작은 파일 크기를 제공하면서 비슷한 화질을 유지하도록 설계되었습니다.
지원: Chrome, Edge, Firefox, Opera, Safari
SVG(.svg) 벡터 이미지 포맷으로, 벡터 그래픽을 표현하는 데 사용됩니다. 이 형식의 이미지는 크기를 조정해도 화질이 손실되지 않습니다.
지원: Chrome, Edge, Firefox, Opera, Safari.

다음 목록은 웹에 표시되지만 웹 콘텐츠에서는 피해야 하는 이미지 유형입니다.
일반적으로 이는 해당 브라우저에서 널리 지원되지 않거나 더 나은 대안이 있기 때문입니다.

웹에 표시되지만 웹 콘텐츠에서는 피해야 하는 이미지 유형
BMP(.bmp) BMP는 일반적으로 비압축 방식으로 저장되므로 파일 크기가 매우 큽니다. JPEG나 PNG와 같은 더 나은 대안이 존재합니다.
지원: Chrome, Edge, Firefox, Opera, Safari.
ICO(.ico) 주로 Windows 아이콘과 파비콘에 사용됩니다. 일반적인 웹 페이지 본문 이미지에는 적합하지 않습니다.
지원: Chrome, Edge, Firefox, Opera, Safari.
TIFF(.tif, .tiff) JPEG나 PNG에 비해 브라우저 지원이 제한적입니다.
지원: Safari.

alt 속성은 이미지의 대체 텍스트(alternative text)를 지정합니다. 선택적(옵션)으로 사용할 수 있습니다.

시각장애인을 위한 스크린 리더를 사용하는 사용자에게 이미지 대신 사용자가 이해할 수 있는 대체 텍스트로 설명할 수 있어서 웹 접근성 차원에서 매우 유용합니다. 또한 일부 브라우저(예를 들어, 크롬)에서는 네트워크 오류, 콘텐츠 차단 등 어떤 이유로 이미지를 표시할 수 없는 경우에 이 속성의 값을 텍스트로 대신 보여줍니다.

이미지의 대체 수단으로 텍스트를 제공하기 위한 요구 사항

alt 속성의 값에는 이미지의 캡션 , 제목 또는 범례 로 간주될 수 있는 텍스트가 포함되어서는 안 된다는 것입니다. 이미지를 대신해서 사용자가 이해할 수 있는 대체 텍스트를 포함해야 하며, 단지 이미지를 보완하기 위해 사용하는 것이 아닙니다. 이미지의 보충 정보는 title 속성을 사용할 수 있습니다.

대체 텍스트를 작성할 때 고려해야 할 가장 일반적인 규칙은 다음과 같습니다. 모든 이미지를 alt 속성의 텍스트로 대체해도 페이지의 의미가 변경되지 않는다는 것입니다.

alt 속성을 지정하지 않았거나, 빈 값("")을 사용한 경우

이 이미지가 콘텐츠의 핵심 부분이 아니거나(순전히 장식 또는 로그 분석 등을 위한 추척용 픽셀 등) 텍스트로 대체할 수 없음을 의미합니다.

이런 경우는 접근성 측면을 고려해 최소한으로 유지해야 합니다. 실제 대체 텍스트를 제공할 수 있는 가능성이 조금이라도 있다면 alt 속성을 생략하거나 빈 값("")을 사용하는 것은 바람직하지 않습니다.

width 속성

이미지의 너비를 CSS 픽셀 단위로 지정합니다. 단위가 없는 정수로 지정합니다.

HTML 
<img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구" width="150">
브라우저에서 실제 표시된 모습
  • width 속성을 설정하지 않으면, 이미지는 원래 크기로 표시됩니다.
  • 이미지의 width와 height 속성을 동시에 설정하면, 비율을 유지하지 않고 지정된 크기로 이미지를 표시합니다. 이로 인해 이미지가 왜곡될 수 있습니다.
  • width 속성만 설정하고 height 속성을 설정하지 않으면, 이미지는 원래 비율을 유지하면서 너비에 맞춰 크기가 조정됩니다.

HTML의 width 속성과 CSS의 width 스타일 속성을 함께 사용하면 CSS가 우선합니다. CSS는 HTML의 width 속성보다 높은 우선순위를 가지므로, CSS로 이미지의 너비를 설정하면 HTML width 속성은 무시됩니다.

height 속성

이미지의 높이를 CSS 픽셀 단위로 지정합니다. 단위가 없는 정수로 지정합니다.

HTML 
<img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구" height="50">
브라우저에서 실제 표시된 모습
  • height 속성을 설정하지 않으면, 이미지는 원래 크기로 표시됩니다.
  • 이미지의 width와 height 속성을 동시에 설정하면, 비율을 유지하지 않고 지정된 크기로 이미지를 표시합니다. 이로 인해 이미지가 왜곡될 수 있습니다.
  • height 속성만 설정하고 width 속성을 설정하지 않으면, 이미지는 원래 비율을 유지하면서 높이에 맞춰 크기가 조정됩니다.

HTML의 height 속성과 CSS의 height 스타일 속성을 함께 사용하면 CSS가 우선합니다. CSS는 HTML의 height 속성보다 높은 우선순위를 가지므로, CSS로 이미지의 높이를 설정하면 HTML height 속성은 무시됩니다.

브라우저가 이미지를 디코딩하는 방식을 지정합니다.

여기서 말하는 '브라우저에서 이미지 디코딩'이란
웹 브라우저가 웹 페이지에서 이미지를 로드하고 표시하는 과정입니다. 브라우저는 이미지 파일을 디코딩하여 픽셀 데이터로 변환하고 화면에 표시합니다.

decoding 속성의 값은 다음과 같습니다.

decoding 속성의 값
auto 기본값입니다.
브라우저가 사용자에게 가장 적합한 디코딩 모드를 결정합니다.
sync 이미지를 다른 콘텐츠와 함께 표시하기 위해 동기적으로 디코딩합니다. 즉, 이미지가 로드될 때까지 페이지 로딩이 지연될 수 있습니다.
async 다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩합니다. 즉, 이미지 로딩이 페이지 로딩에 영향을 미치지 않습니다.
HTML 
<img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구" decoding="async">

특히, decoding 속성을 async로 지정하면 다음과 같은 이점이 있습니다.

  • 페이지 로딩 속도 향상: 특히 이미지가 많은 페이지에서 이미지 로딩이 페이지 로딩 속도에 미치는 영향을 줄일 수 있습니다.
  • 사용자 환경 개선: 이미지 로딩이 완료되기 전에 콘텐츠가 표시되므로 사용자가 페이지를 더 빨리 사용할 수 있습니다.

crossorigin 속성

crossorigin 속성은 현재 웹 페이지의 도메인이 아닌 외부 출처의 이미지 리소스를 사용할 수 있도록 CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing)를 설정하는 속성입니다.

일반적으로 <img> 태그의 src 속성에 외부 출처의 이미지 URL을 지정할 때에는crossorigin 속성이 필요하지 않습니다. 하지만, 이렇게 삽입한 외부 출처의 이미지를 <canvas> 태그에 그린 경우, 브라우저는 동일 출처 정책(Same-origin policy)에 따라 캔버스의 픽셀 데이터에 접근하는 등의 작업을 제한할 수 있습니다. 이는 CORS 검증을 거치지 않은 외부 출처의 이미지를 캔버스에 그리면 해당 캔버스가 오염된 상태(tainted canvas)가 되기 때문입니다.

이때 crossorigin 속성을 사용하면 외부 도메인의 이미지를 <canvas> 태그로 그리거나 접근할 수 있습니다. 이를 위해 서버는 올바른 CORS 헤더(Access-Control-Allow-Origin)를 포함하여 응답해야 합니다.

MDN - 교차 출처 이미지와 캔버스 허용하기를 참조하세요.

HTML의 <img> 태그로 반응형 이미지(브라우저의 가로 사이즈와 해상도에 따라)를 자동 조절하고 구현하게 할 수 있는 srcset 속성과 sizes 속성의 개념 이해와 사용법에 대해 알아보겠습니다.

자세한 설명과 예제는 HTML <img> srcset과 sizes 속성에 대한 아주 쉬운 설명과 사용법을 참조하세요.

이미지의 보충 정보는 title 속성을 사용할 수 있습니다. 이미지에서는 중요한 정보로 판단되는 이미지 출처나 이미지에 대한 설명이 될 수 있습니다.

HTML 
<img src="example.jpg" alt="예시 이미지" title="예시 이미지 보충 정보입니다.">
title 속성 사용 시 주의할 점
  • title 속성은 alt 속성을 대체할 수 없습니다.
  • alt 속성의 값을 title 속성에 사용하는 것을 피해야 합니다. 이 경우 스크린 리더는 불필요하게 동일한 내용을 두 번씩 읽게 되므로 사용자에게 혼란을 줄 수 있습니다.
  • title 속성으로 alt 속성 설명에 대한 부연 설명을 제공해서는 안 됩니다. 이미지가 설명을 필요로 할 경우에는 <figure>와 <figcaption> 태그를 사용하세요.
  • title 속성은 이미지의 중요한 정보가 필요할 경우에만 한정되게 사용하세요.

이 태그로 나타내는 이미지와 연결된 이미지 맵을 지정합니다.
# 기호 뒤에 이 태그와 연결된 이미지 맵에 해당하는 <map> 태그의 name 속성의 값을 usemap 속성의 값으로 지정합니다.

HTML 
<!-- 이미지 맵에 사용할 실제 이미지 -->
<img src="example.jpg" alt="example" usemap="#example-map"> <!-- usemap 속성으로 <map> 태그를 연결 -->   

<!-- 이미지 맵을 정의 -->
<map name="example-map"> <!-- name 속성으로 이미지 맵에 이름을 지정 -->
    ...
</map>

참고하세요!
<img> 태그가 <a> 또는 <button> 태그 내에서 사용될 경우에는 usemap 속성을 사용할 수 없습니다.

loading 속성은 브라우저가 이미지를 어떻게 로드해야 하는지를 지정(indicates)합니다. 이 속성의 목적은 '뷰포트' 밖에 있는 이미지를 로드하는 정책을 지정하는 것입니다.

뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

loading 속성의 값은 다음과 같습니다.

loading 속성의 값
eager 기본값입니다.
뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다.
lazy 브라우저가 정의한 뷰포트로부터의 계산된 거리에 도달할 때까지 이미지 로딩을 지연시킵니다. 이렇게 이미지 로딩을 지연시키면 이미지가 필요할 가능성이 충분히 확실해질 때까지 네트워크와 저장 공간의 대역폭 사용이 줄어들기 때문에 일반적인 사용 사례에서 성능이 향상될 수 있습니다.

fetchpriority 속성은 브라우저가 이미지를 가져올(fetch) 때, 페이지 내의 다른 리소스에 비해 브라우저가 계산해서 할당하는 상대적 우선순위에 관한 추가 힌트를 값으로 제공합니다. 이렇게 하면, 브라우저는 추가된 힌트 값을 같이 고려해 우선순위를 계산합니다.

fetchpriority 속성의 값은 다음과 같습니다.

fetchpriority 속성의 값
auto 기본값입니다.
가져오기 우선순위에 대한 기본 설정을 지정하지 않습니다. 브라우저가 가져오기 우선순위를 자동으로 결정하도록 지정합니다.
high 다른 이미지에 비해 높은 우선순위로 이미지를 가져옵니다.
low 다른 이미지에 비해 낮은 우선순위로 이미지를 가져옵니다.

더 이상 사용되지 않는 속성

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다.
구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

  • align
  • border
  • hspace
  • longdesc
  • name
  • frame
  • rules
  • vspace

기술적인 문법 요약

img 태그의 기술적인 문법 요약
허용되는 부모 요소 외부 리소스 삽입을 허용하는 모든 요소
허용되는 콘텐츠 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다.
암시적인 role 속성 값
허용되는 role 속성 값

브라우저 호환성

img 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성
데스크탑 Chrome
Chrome
데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<img> 1 12 1 1
src 1 12 1 1
alt 1 12 1 3
width 1 12 1 3
height 1 12 1 3
decoding 65 79 63 11.1
crossorigin 13 12 8 6
srcset 34 18 38 8
sizes 38 12 38 9.1
title 1 12 1 4
loading 77 79 75 15.4
fetchpriority 101 101 132 17.2

명세서

img 태그의 명세서 사양
명세서 사양
<img> HTML Standard
#the-img-element

참고문헌

같이 보기