[HTML] 이미지(img) 태그

img 태그는 이미지를 표시할 때 일반적으로 사용하는 태그이다.

참고로 이미지를 표시하는 방법에는 표시할 엘리먼트 대상에 background-image 속성으로 정의하는 방법도 있다.

단일 태그로서 닫는 </> 태그를 필요로 하지 않는다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다.

기본 형태

<img src="표시할이미지파일의경로" alt="이미지 설명" />

img 태그의 속성들을 확인해보자면 먼저 src 속성은 표시할 이미지의 경로 정보와 파일명을 입력받는 속성이다. 즉 이미지의 url을 입력받는다. 서버(클라우드)에 위치한 이미지 파일도 가능하고, 내 로컬 PC에 저장된 이미지 파일도 가능하다.

예시

<!-- 로컬 PC 경로내 이미지 -->
<img src="./image/tempImg.png" alt="임시이미지">

<!-- 특정 서버에 저장된 이미지 -->
<img src="https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66effd194bae87d73dd00522794070855d" alt="클라우드에저장된이미지" >

두번째로 alt 속성은 alternative의 약자로 대체 텍스트 역할을 한다.

이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체할 텍스트가 표시된다.

alt는 사용하면 이미지는 볼 수 없는 시각장애인에게 웹 페이지를 서비스해야 하는 상황에 대한 대비가 가능하다.

세번째로 loading 속성은 페이지 내에서 바로 필요하지 않은 이미지들을 로딩 시점을 뒤로 미루는 것이다. 페이지 로드 시점에 유저에게 보여지지 않는 이미지는 스크롤 등으로 실제로 이미지가 보여지는 시점이 올 때 로딩된다.

그리고 만약 사용자가 스크롤하는 행위가 없으면, 사용자에게 보여지지 않은 이미지는 절대 로딩되지 않는다.

사용하는 이유는 크게 1) 성능향상 2) 비용감소 가 있다.

<img src="./image/img.png" alt="대체텍스트" loading="lazy">

이미지 크기 조절하기

img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다.

이 때 넒이와 높이를 속성으로 각각 지정할 수 있다.~(참고로 이 속성을 이용하지 않고 별도의 CSS에서 설정해도 무관하다.)~

예시

<img src="이미지경로" alt="대체텍스트" width="넓이값" height="높이값">

여기서 넓이와 높이는 각각 픽셀(px) 단위로 적용된다.