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

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

img {
  width: 100%;
}

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

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

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

지원하는 이미지 형식

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

웹에서 자주 쓰이는 이미지 파일 종류는 다음과 같습니다.

• APNG (Animated Portable Network Graphics): 무손실 애니메이션 시퀀스에 좋은 선택지입니다. GIF에 비해 성능이 좋습니다.
• AVIF (AV1 Image File Format): 뛰어난 성능을 지녀 이미지와 애니메이션 시퀀스에 모두 탁월합니다.
• GIF (Graphics Interchange Format): 간단한 이미지와 애니메이션에 적합합니다.
• JPEG (Joint Photographic Experts Group image): 정적 이미지의 손실 압축 저장에 적합합니다. 제일 널리 쓰이는 형식입니다.
• PNG (Portable Network Graphics): 정적 이미지의 무손실 압축 저장에 적합합니다. JPEG보다 품질이 다소 좋습니다.
• SVG (Scalable Vector Graphics): 벡터 이미지 형식입니다. 다양한 크기로 정확하게 그려야 하는 이미지에 적합합니다.
• WebP (Web Picture format): 이미지와 애니메이션 시퀀스에 모두 좋은 선택입니다.

WebP와 AVIF는 정적 이미지와 애니메이션 시퀀스에 모두 PNG, JPEG, GIF보다 뛰어난 성능을 제공하므로, 다양한 크기에서 모두 정확하게 그려야 하는 이미지(벡터 이미지, SVG를 사용하세요)가 아니라면 추천하는 선택지입니다.

특성

전역 특성을 포함합니다.

alt

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

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

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

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

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

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

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

attributionsrc

브라우저가 이미지 요청 시 Attribution-Reporting-Eligible 헤더를 보내도록 합니다. 서버에서는 이 헤더를 확인 후 Attribution-Reporting-Register-Source 또는 Attribution-Reporting-Register-Trigger 헤더를 응답에 포함하여 각각 이미지 기반 기여 소스 또는 기여 트리거를 등록할 수 있습니다.

소스 혹은 트리거 이벤트는 브라우저가 이미지 파일 응답을 받는 시점에 발동합니다.

Attribution Reporting API에서 자세한 정보를 확인하세요.

이 특성은 두 가지 종류의 값을 가질 수 있습니다.

• 불리언, i.e. attributionsrc 특성 이름만. Attribution-Reporting-Eligible 헤더를 src 특성이 가리키는 것과 같은 서버로 전송합니다. 기여 소스 등록을 같은 서버에서 처리할 때는 이렇게 지정해도 됩니다.

• 한 개 이상의 URL을 포함한 문자열.

  attributionsrc="https://a.example/register-source
                  https://b.example/register-source"

  요청하는 리소스가 외부 서버거나, 기여 소스 등록을 다른 서버에서 처리하는 경우에 사용할 수 있습니다. 리소스 요청이 발생하면, 리소스 출처 외에도 지정한 URL들에도 Attribution-Reporting-Eligible 헤더를 전송합니다. 각 URL들에서는 Attribution-Reporting-Register-Source 또는 Attribution-Reporting-Register-Trigger로 응답해 등록을 마칠 수 있습니다.

crossorigin

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

crossorigin 특성을 지정하지 않는 경우 비 CORS 요청(Origin 헤더 없이)을 전송하고, 오염된 이미지로 취급하여 이미지 데이터 접근을 제한하므로 <canvas>에서 사용할 수 없습니다.

crossorigin 특성을 지정한 경우 CORS 요청(Origin 헤더 포함)을 전송합니다. 하지만 서버가 이미지의 교차 출처 요청을 허용하지 않는다면 (Access-Control-Allow-Origin 헤더가 없거나, 그 값 중에 요청 사이트의 출처가 없다면) 브라우저가 이미지 로딩을 차단하고 개발자 도구 콘솔에 오류를 표시합니다.

가능한 값은 다음과 같습니다.

anonymous

자격 증명을 제외하고 교차 출처 요청을 전송합니다. 즉 쿠키, X.509 인증서, Authorization 헤더를 전송하지 않습니다.

user-credentials

가능한 자격 증명과 함께 교차 출처 요청을 전송합니다. 즉 쿠키, X.509 인증서, Authorization 헤더를 전송합니다. 서버가 요청 출처 사이트와 자격 증명 공유(Access-Control-Allow-Credentials: true 응답 헤더)를 하지 않으면 이미지는 오염된 것으로 취급하고 데이터 접근이 제한됩니다.

유효하지 않은 값을 지정한 경우 anonymous와 동일하게 동작합니다.

decoding

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

sync

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

async

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

auto

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

elementtiming

PerformanceElementTiming API가 이미지를 관측하도록 합니다. 특성의 값이 관측된 이미지의 식별자로 쓰입니다. elementtiming 특성 페이지를 참고하세요.

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 특성이 없는 경우 고유 크기를 가지지 않습니다.

접근성

유의미한 대체 설명 작성

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

좋지 않음

<img alt="사진" src="penguin.jpg" />

좋음

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

alt 특성의 값이 적절한지 확인하기 제일 좋은 방법은 주위 콘텐츠와 함께 alt 값을 읽어보면서, 눈으로 이미지를 볼 때와 같은 의미로 받아들여지는지 확인하는 것입니다. 예를 들어, 앞선 내용이 “여행 중에 귀여운 동물들도 만났어요.” 라면, ‘좋지 않음’ 예제에서는 “여행 중에 귀여운 동물들도 만났어요. 사진”으로 끝나게 되므로 무슨 동물인지 알 방법이 없어 적절하지 않습니다. ‘좋음’ 예제에서는 “여행 중에 귀여운 동물들도 만났어요. 일광욕 중인 황제펭귄.”이 되어 뜻이 분명해집니다.

<a>나 <button> 내의 이미지처럼 어떤 동작을 실행하는 이미지의 경우, alt에 동작을 설명하는 값을 지정하는 걸 고려하세요. 예를 들면 alt="다음 페이지"나 alt="검색" 등입니다.

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

title 특성

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

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

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

예제

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를 무시합니다.

명세

HTML Standard

브라우저 호환성

같이 보기

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