<img> 태그의 정의 및 사용법

<img> 태그는
이미지(image)를 의미하는 태그로, 웹 페이지에 이미지를 삽입할 때 사용합니다.

이미지를 삽입하려면 이 태그의 필수 속성인 src 속성의 값으로 삽입하려는 이미지 소스의 경로(URL)를 지정합니다.

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

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

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

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

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

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

관련 속성 사용하기

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

필수 속성이며, 삽입하려는 이미지 소스(source)의 경로(URL)를 지정합니다.

지원하는 이미지 형식

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

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

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

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

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

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

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

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

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

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

관련된 자세한 예제와 설명은 HTML <img> alt 속성 - 올바른 이해와 사용 방법을 참조하세요.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

일반적으로 <img> 태그로 외부 도메인의 이미지 소스를 src 속성으로 삽입할 때에는 crossorigin 속성이 필요하지 않습니다. 하지만, <img> 태그로 삽입한 외부 도메인의 이미지를 <canvas> 태그로 그리는 과정에서는 웹은 '동일 출처 정책(Same-origin policy)'이라는 정책에 따라 <canvas> 태그로 외부 도메인의 이미지 리소스에 접근할 수 없게 됩니다. 이는 보안상의 이유로 브라우저가 해당 이미지를 "tainted canvas"로 간주하기 때문입니다.

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

crossorigin 속성에 대한 자세한 설명은 HTML crossorigin 속성 – 올바른 이해와 사용 방법과 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 속성을 사용할 수 없습니다.

브라우저 호환성

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

명세서

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

참고문헌

같이 보기