HTML <img>: 이미지 삽입 요소

HTML <img> 요소는 이미지를 문서에 삽입할 때 사용합니다.

img {
  width: 100%;
}

<img src="/assets/infrared-jeju.jpg" alt="적외선으로 촬영한 제주도의 오름" />

위의 예제는 <img> 요소의 기본 사용법을 보입니다.

• src 특성은 필수로, 삽입하려는 이미지의 경로를 담습니다.
• alt 특성은 이미지를 글로 설명하는 특성으로, 필수는 아니지만 접근성에 매우 중요합니다. 스크린 리더는 이 특성을 읽어서 사용자에게 이미지에 대한 설명을 제공합니다. 또한 모종의 이유로 이미지를 불러오지 못했을 때도 이 특성의 텍스트를 대신 노출합니다.

지원하는 이미지 형식

HTML 표준은 사용자 에이전트가 지원해야 하는 이미지 형식을 명시하지 않으므로, 서로 지원하는 형식이 다릅니다.

다음 표는 웹에서 많이 사용하는 이미지 형식과, 형식을 지원하는 브라우저의 목록입니다.

아래의 표는 웹에서 사용할 수는 있지만, 뚜렷한 대체제가 있거나 브라우저 지원이 거의 없어 피해야 하는 형식의 목록입니다.

특성

전역 특성을 포함합니다.

alt

이미지의 대체 텍스트 설명을 지정합니다.

브라우저가 항상 이미지를 표시할 수는 없습니다.

• 시각 장애를 가진 사용자가 이용하는 비 시각적 브라우저
• 사용자가 대역폭 절약과 사생활 보호 등을 위해 이미지를 비활성화
• 브라우저가 이미지 형식을 지원하지 않음

위와 같은 상황에서 브라우저는 이미지 대신 alt의 값을 노출할 수 있습니다. 이외에도 여러가지 이유가 있으니 되도록 항상 alt 특성을 지정하세요.

alt를 완전히 제거하면 이미지가 콘텐츠의 중요한 부분이지만 동일한 텍스트를 제공할 방법이 없음을 의미합니다.

빈 문자열(alt="")을 지정하면 이미지가 콘텐츠의 중요한 부분이 아닌 장식 또는 추적용 픽셀이므로 비 시각적 브라우저가 이미지를 렌더링에서 완전히 제외할 수 있음을 나타냅니다. 또한 시각적 브라우저라면 이미지가 잘못됐을 때 별도의 표시(“엑스박스”)를 하지 않고 아예 숨깁니다.

alt는 이미지를 복사해서 텍스트에 붙여 넣을 때나, 이미지를 즐겨찾기에 추가할 때 등 다른 용도로도 쓰입니다.

crossorigin

CORS를 사용해 지정한 오디오 파일을 가져올지 나타내는 열거형 특성입니다. CORS 활성화 리소스는 <canvas> 요소에 사용해도 캔버스가 오염(taint)되지 않습니다. 가능한 값은 다음과 같습니다.

anonymous

자격 증명 없이 교차 출처 요청을 전송합니다. 즉, Origin HTTP 헤더를 쿠키, 인증서, HTTP Basic 인증 없이 전송합니다. 서버에서 Access-Control-Allow-Origin HTTP 헤더를 지정하지 않아서 요청 출처 사이트에 자격 증명을 보내지 않는다면 캔버스 이미지가 오염되고, 사용처가 제한됩니다.

user-credentials

자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, Origin HTTP 헤더를 쿠키, 인증서, 또는 HTTP Basic 인증과 함께 전송합니다. 서버에서 Access-Control-Allow-Origin HTTP 헤더를 지정하지 않아서 요청 출처 사이트에 자격 증명을 보내지 않는다면 캔버스 이미지가 오염되고, 사용처가 제한됩니다.

특성이 존재하지 않으면 리소스를 CORS 요청 없이(Origin HTTP 헤더 없이) 가져오므로, <canvas>가 오염됩니다. 유효하지 않은 값의 경우 anonymous 깂을 사용한 것으로 간주합니다.

decoding

이미지 디코딩 방식에 대한 힌트를 브라우저에 제공합니다. 가능한 값은 다음과 같습니다.

sync

이미지 디코딩을 동기적으로 수행합니다.

async

이미지 디코딩을 비동기적으로 수행해서 다른 콘텐츠의 렌더링 딜레이를 줄입니다.

auto

기본값입니다. 브라우저가 알아서 최적 값을 계산합니다

fetchpriority

이미지를 가져올 때의 우선순위에 대한 힌트를 브라우저에 제공합니다. 가능한 값은 다음과 같습니다.

high

다른 이미지에 비해 높은 우선순위로 가져와야 함을 표시합니다.

low

다른 이미지에 비해 낮은 우선순위로 가져와야 함을 표시합니다.

auto

기본 값입니다. 브라우저가 우선순위를 자동으로 판단합니다.

height

이미지의 내재된 높이를 직접 지정합니다. CSS 픽셀 단위이며, 단위 없는 정수 값을 지정해야 합니다.

ismap

이미지가 서버사이드 맵의 일부임을 나타내는 불리언 특성입니다. 참일 경우 사용자가 이미지를 클릭했을 때 그 좌표를 서버로 전송합니다.

이 특성은 <img> 요소가 유효한 href 특성을 지정한 <a> 요소의 자손이어야 사용할 수 있습니다.

loading

브라우저가 이미지를 불러오는 방식을 지정합니다.

• eager: 이미지를 즉시 불러옵니다. 현재 뷰포트에서 이미지를 볼 수 있는지는 고려하지 않습니다. 기본 값입니다.

• lazy: 뷰포트에서 브라우저가 계산한 특정 거리 내에 이미지가 들어오기 전까지 불러오기를 지연합니다. 이미지를 사용하지 않으면 불러오지 않아 네트워크 대역폭과 저장 용량을 절약하기 위한 값으로, 대부분의 상황에서 성능을 개선할 수 있습니다.

불러오기 지연은 JavaScript가 활성화된 경우에만 동작합니다. 이는 원치 않는 추적을 방지하기 위함으로, 스크립트가 비활성된 경우에도 이미지 불러오기를 지연할 경우 페이지의 마크업에 이미지를 전략적으로 배치하고, 어느 이미지까지 불러왔는지 확인하는 것으로 사용자의 대략적인 스크롤 위치를 추적할 수 있기 때문입니다.

referrerpolicy

리소스를 가져올 때 사용할 리퍼러(referrer)를 지정합니다. 다음 값을 사용해야 합니다.

• no-referrer: Referer 헤더를 전송하지 않습니다.
• no-referrer-when-downgrade: TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 Referer 헤더를 전송하지 않습니다.
• origin: Referer 헤더가 요청의 출처, 즉 스킴, 호스트, 포트를 포함합니다.
• origin-when-cross-origin: 다른 출처로 요청할 땐 리퍼러 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로도 포함합니다.
• same-origin: 동일 출처 요청에는 리퍼러를 전송하고, 교차 출처 요청에는 전송하지 않습니다.
• strict-origin: 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
• strict-origin-when-cross-origin (기본 값): 동일 출처 요청에는 전체 URL을 전송합니다. 교차 출처 요청에 대해서는 보안 수준이 동일(HTTPS→HTTPS)할 땐 문서의 출처를 리퍼러로 전송하고, 더 낮을(HTTPS→HTTP) 땐 전송하지 않습니다.
• unsafe-url: 리퍼러가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. 안전하지 않은 값입니다. TLS로 보호받는 리소스에서 보호 없는 출처로 정보가 누출될 수 있습니다.

sizes

미디어 조건에 따라 사용하길 원하는 소스 이미지의 크기를 나타냅니다. 소스 이미지는 너비(w) 서술자를 사용한 srcset 특성으로 제공할 수 있습니다. sizes는 쉼표로 구분하는 리스트로, 각각의 항목은 다음의 두 구성 요소로 이루어집니다.

1. 미디어 조건, (max-width: 360px) 등. 마지막 항목에서는 생략해야 합니다.
2. 소스 크기, 360px 등.

미디어 조건은 이미지의 속성이 아니라 뷰포트의 속성을 가리킵니다. 예를 들어, (max-height: 500px) 1000px은 뷰포트의 높이가 500px 이하일 때 소스 크기로 1000px을 사용합니다.

소스 크기에는 표시하고자 하는 이미지의 크기를 지정합니다. 사용자 에이전트는 소스 크기 값에 따라서 srcset 특성의 소스 중 하나를 선택해 사용합니다. 소스 크기는 이미지의 내재된 크기(CSS 스타일이 없을 때 이미지가 차지하는 크기)에도 영향을 줍니다.

srcset 특성이 없거나, 값에 너비 서술자를 사용하지 않은 경우, sizes 특성은 아무 효과도 없습니다.

src

이미지의 URL을 지정합니다. 필수 특성입니다. srcset을 지원하는 브라우저에서는, srcset에 너비 서술자를 사용하지 않았고, 1x 픽셀 밀도 서술자도 사용하지 않은 경우, src의 값을 픽셀 밀도 1x의 소스 후보로 사용합니다.

srcset

사용자 에이전트가 사용할 수 있는 이미지 소스의 후보를 지정합니다. 한 개 이상의 항목을 가지는 쉼표 구분 리스트로, 각각의 항목은 다음 두 구성 요소로 이루어집니다.

1. 이미지의 URL.

2. 선택 사항: 공백과 그 뒤를 잇는

• 너비 서술자(양의 정수와 바로 뒤의 w 문자), 360w 등. 너비 서술자의 값을 sizes 특성에 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.
• 픽셀 밀도 서술자(양의 실수와 바로 뒤의 x 문자), 2x 등.

서술자를 포함하지 않은 경우에는 1x로 취급합니다.

srcset 특성에 너비와 픽셀 밀도 서술자를 동시에 사용하거나, 동일한 서술자를 두 번 이상 사용할 수 없습니다.

사용자 에이전트는 사용자 개인 설정과 화면의 픽셀 밀도, 네트워크 대역폭 등 여러가지 조건에 따라 소스 중 하나를 선택할 수 있습니다.

width

이미지의 내재된 너비를 직접 설정합니다. CSS 픽셀 단위이며, 단위 없는 정수 값을 지정해야 합니다.

usemap

요소와 연결할 이미지 맵을 가리키는 프래그먼트 식별자(#으로 시작)입니다.

<img>가 <a>, <button>의 자손일 땐 사용할 수 없습니다.

사용 일람

CSS 스타일링

<img>는 대체 요소로, display의 기본값은 inline이지만 삽입한 이미지의 내재된 높이와 너비에 따라 마치 inline-block을 지정한 것과 같이 요소의 크기가 결정됩니다. <img>에는 border, border-radius, margin, padding, width, height 등의 속성을 적용할 수 있습니다.

<img>는 기준선(baseline)을 갖지 않으므로 vertical-align: baseline이 적용된 인라인 서식 맥락 내에서는 이미지의 아래쪽 모서리를 텍스트 기준선에 배치합니다.

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

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

예제

srcset 특성 사용하기

srcset 특성을 사용해 고해상도 버전 이미지를 추가로 제공하는 예제 코드입니다. thumbnail640.png는 Retina 디스플레이와 같은 고해상도 장치에서만 불러오게 됩니다. srcset을 지원하는 사용자 에이전트는 src 특성의 값을 1x 이미지로 취급합니다.

<img src="thumbnail320.png" srcset="thumbnail640.png 2x" />

srcset과 sizes 특성 사용하기

sizes 특성을 사용해서 미디어 조건에 따라 적절한 이미지를 표시하는 예제입니다.

<img
  src="thumbnail240.png"
  srcset="thumbnail240.png 240w, thumbnail480.png 480w, thumbnail960.png 960w"
  sizes="(max-width: 240px) 240px, (max-width: 480px) 480px, 25vw"
/>

• (max-width: 240px) 240px: 뷰포트 너비가 240px 이하인 경우, 240px의 너비에 적합한 이미지를 표시합니다. 픽셀 밀도가 1일 때, srcset에 240w로 서술한 thumbnail240.png를 사용할 것입니다.
• (max-width: 480px) 480px: 뷰포트 너비가 480px 이하인 경우, 480px의 너비에 적합한 이미지를 표시합니다. 픽셀 밀도가 1일 때, srcset에 480w로 서술한 thumbnail480.png를 사용할 것입니다.
• 그 외의 경우, 25vw의 너비에 적합한 이미지를 표시합니다. 현재 뷰포트 너비의 25%(25vw)에 가장 적합한 이미지를 srcset에서 선택합니다.

srcset과 sizes를 지원하지 않는 사용자 에이전트를 위해서는 src 특성도 지정해야 합니다. 모던 브라우저에서는 srcset 특성에 너비 서술자 w를 사용했으므로 src를 무시합니다.

접근성 고려사항

유의미한 대체 설명 작성

alt 특성의 값은 분명하고 간결하게 이미지의 내용을 설명해야 합니다. 이미지가 존재한다는 사실 그 자체나 파일 이름 등 내용을 설명하지 못하는 값을 사용하면 안됩니다. 이미지에 대응 가능한 텍스트가 없어서 alt를 의도적으로 누락한 경우에는 이미지의 의도를 설명할 수 있는 다른 방법을 고려하세요.

좋지 않음

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

좋음

<img alt="일광욕 중인 황제펭귄." src="penguin.jpg" />

일부 스크린 리더에서는 alt가 없으면 파일 이름을 대신 읽을 수도 있는데, 파일 이름은 이미지의 콘텐츠와 관련이 없을 수도 있기 때문에 사용자에게 혼란을 줄 수 있습니다. 되도록이면 항상 alt를 지정하세요.

title 특성

title 전역 특성은 alt 특성을 대체할 수 없습니다. alt와 title의 값을 동일하게 설정하는 것도 피하세요. 일부 스크린 리더에서 이미지를 같은 내용으로 두 번 표현할 수 있습니다.

title을 alt에 대한 보충 정보로 사용해서도 안됩니다. 이미지에 설명이 필요하면 <figure>와 <figcaption> 요소를 사용하세요.

title 특성의 값은 보통 툴팁, 즉 마우스 커서가 이미지 위에 멈추면 잠시 후에 나타나는 형태로 보여집니다. 따라서 사용자가 추가 정보를 얻는 방법 중 하나로 사용할 수는 있지만, 개발자로서 사용자가 툴팁을 항상 볼 수 있을 것이라는 가정을 해선 안됩니다. 키보드나 터치 스크린만 사용하는 경우 툴팁을 볼 방법이 없습니다. 사용자에게 중요한 정보는 title에 제공하지 말고 <figcaption> 등 다른 방법으로 문서 본문에 포함하세요.

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 상황별 대체 이미지 제공: <picture>