img element - by. UXKM

[src] 필수 <img src="이미지 경로">

<img> 태그에서 반드시 필요한 속성으로, 이미지 파일의 경로(URL)를 지정합니다.
이미지 경로는 프로젝트 폴더 내의 로컬 경로일 수 있으며, 외부 이미지 서버나 다른 도메인의 이미지 경로를 사용할 수도 있습니다.

[alt] 필수 <img alt="설명 텍스트">

접근성을 위해 필수적인 속성으로, 이미지가 표시되지 않을 경우 대신 보여줄 텍스트를 설정합니다. 이 텍스트는 접근성 도구(스크린 리더 등)에서 이미지를 설명하는 용도로 사용됩니다.

[width / height] 선택 사항 <img width="값" height="값">

이미지의 가로(width), 세로(height) 크기를 지정합니다.
비율 유지(aspect ratio)를 위해 가로/세로 중 한쪽만 설정하거나 CSS를 사용하는 것이 좋습니다.

단위 :

px, %, auto

[srcset] 선택 사항 <img srcset="이미지 경로1, 이미지 경로2">

화면 크기에 따라 다른 이미지를 로드할 수 있도록 설정하는 속성입니다.
이미지를 로드하는 화면 너비의 분기점은 고정된 값이 아니라, 프로젝트의 요구 사항과 사용자 환경에 따라 유동적으로 설정할 수 있습니다.

아래 예제 설명 :

기본적으로 medium.jpg가 로드됩니다.

화면 너비가 600px 이하이면 small.jpg가 사용됩니다.

화면 너비가 1200px 이하이면 medium.jpg가 사용됩니다.

화면 너비가 1800px 이상이면 large.jpg가 사용됩니다.

[sizes] 선택 사항 <img size="값">

srcset과 함께 사용되며, 특정 화면 크기에 따라 이미지가 표시될 공간의 크기를 지정합니다. 브라우저는 이 정보를 바탕으로 srcset에서 최적의 이미지를 선택합니다.
즉, sizes 속성은 이미지 자체의 크기가 아니라 이미지가 표시될 공간 크기를 지정하는 역할을 합니다.

아래 예제 설명 :

브라우저가 srcset을 지원하지 않는 경우 default.jpg가 로드됩니다.

sizes에 두 가지 값이 설정되어 있습니다. (값 1 : (max-width: 800px) 600px / 값 2 : 1200px)

(max-width: 800px) 600px : 화면 너비가 800px 이하일 경우, 브라우저는 600px 너비의 공간에 적합한 이미지를 선택합니다.

1200px : 화면 너비가 800px을 초과하면, 브라우저는 1200px 너비의 공간에 적합한 이미지를 선택합니다.

[loading] 선택 사항 - 권장 <img loading="값">

이미지를 지연 로딩(lazy loading)할지 여부를 설정합니다.

값 :

auto(기본값) : loading 속성을 지정하지 않으면 기본값으로 설정되며, 브라우저가 이미지 로딩 방식을 자동으로 결정합니다. 사용자의 네트워크 상태, 이미지 위치, 중요도 등을 고려하여 적절한 시점에 이미지를 로드합니다.

lazy : 페이지 로딩 성능을 최적화하고, 화면에 보여질 때 이미지를 로드합니다.

eager : 페이지가 로드될 때 즉시 이미지를 불러옵니다.

[decoding] 선택 사항 <img decoding="값">

브라우저가 이미지를 디코딩하는 방식을 지정합니다.
(디코딩이란? 이미지 파일을 화면에 표시할 수 있는 데이터로 변환하는 과정입니다.)

값 :

auto(기본값) : decoding 속성을 지정하지 않으면 기본값으로 설정되며, 브라우저가 최적의 방식으로 디코딩을 결정합니다.

sync : 이미지가 로드되는 즉시 동기적으로 디코딩하여 빠르게 표시하지만, 페이지 렌더링 속도에 영향을 미칠 수 있습니다.

async : 이미지를 비동기적으로 디코딩하여 페이지 내 다른 요소의 렌더링에 영향을 주지 않으며, 페이지 성능을 개선합니다.

[crossorigin] 선택 사항 <img crossorigin="값">

이미지가 외부 도메인에서 로드될 때 CORS(Cross-Origin Resource Sharing) 정책을 설정합니다.
(CORS 정책이란? 다른 출처의 리소스를 안전하게 요청하고 공유할 수 있도록 허용하는 보안 메커니즘입니다.)

값 :

anonymous : 인증 없이 요청합니다. CORS 정책에 맞지 않으면 이미지를 표시하지 않습니다.

use-credentials : 인증 정보(쿠키 등)를 포함하여 요청합니다.

[referrerpolicy] 선택 사항 - 거의 사용 안함 <img referrerpolicy="값">

referrerpolicy는 이미지를 요청할 때 어떤 정보를 Referer 헤더에 포함시킬지 설정하는 옵션입니다. 쉽게 말해, 어떤 링크를 클릭하거나 이미지를 로드할 때, 어떤 주소 정보를 보낼지를 결정하는 것입니다.
(Referer 헤더란? 웹 브라우저가 요청을 보낼 때, 현재 요청을 발생시킨 이전 페이지의 URL 정보를 서버에 전달하는 HTTP 헤더입니다.)

값 :

no-referrer : 아예 아무 정보도 보내지 않습니다.

origin : 도메인(웹사이트 주소)만 보냅니다.

strict-origin : 도메인만 보내는데, 보안상 동일 출처(예: 같은 웹사이트)일 때만 보냅니다.

unsafe-url : 웹 페이지의 전체 주소를 보냅니다.

[usemap] 선택 사항 - 거의 사용 안함 <img usemap="#map">

usemap 속성은 <img> 요소와 연결된 이미지 맵을 사용하도록 지정합니다. 이미지 맵은 클릭 가능한 특정 영역을 이미지 안에서 정의할 수 있게 해주며, 해당 영역을 클릭하면 연결된 링크로 이동합니다.

아래 예제 설명 :

이미지 맵을 정의하는 HTML 요소인 <map>과 함께 사용됩니다.

usemap 속성의 값은 연결된 <map> 요소의 name 속성과 일치해야 합니다.
(아래 예제는 <img> 요소의 usemap="#map"과 <map> 요소의 name="map" 값이 일치)

<map> 요소 내에서는 <area> 요소를 사용하여 이미지 내의 클릭 가능한 영역을 정의합니다.

[map 요소] 자세한 설명 보기

[ismap] 선택 사항 - 거의 사용 안함 <img ismap>

ismap 속성은 서버에서 클릭 좌표를 해석하는 서버 측 이미지 맵을 만들 때 사용됩니다.
반드시 <a> 태그 안에서 사용해야 하며, 클릭 시 x,y 형식으로 좌표가 URL에 포함됩니다. 클라이언트 측(usemap)과 달리, 영역을 미리 정의하지 않고 서버에서 처리할 때 유용합니다.

[longdesc] 선택 사항 - 거의 사용 안함 <img longdesc="URL">

이미지를 설명하는 긴 설명을 포함하는 페이지 URL을 지정합니다.
현재는 사용되지 않으며 aria-describedby 또는 <figure> 및 <details>와 같은 대체 방법이 권장됩니다.