[html] 이미지 태그 기초

html의 image tag에 대해 알아보자

 

<img src="img/hanpy.jpg" alt="즐거운 HTML 그림">

• src에는 현재 위치에서의 경로를 넣어준다. 위의 예시는 img 파일에서 hanpy.jpg 이미지를 가져온다는 뜻이다.
• alt는 안 적어도 에러가 나지 않는다. 다만 시각장애인 분들이 음성으로 웹을 이해하기위한 설명이다.

 

 

크기 조정

> 기본적으로 width, height 속성을 정하지 않으면 이미지 원본 크기가 그대로 나온다.

# 픽셀 기준 설정
<img src="img/hanpy.jpg" width="400" height="300" alt="즐거운 HTML 그림">

# 브라우저 창의 퍼센트로 비율 설정
<img src="img/hanpy.jpg" width="400" height="300" alt="즐거운 HTML 그림">

이미지가 잘리는 것이 아니라 찌그러지가나 늘어나면서 사이즈가 변경된다. 이 때 파일의 용량이 줄어드는 것은 아니기 때문에 처음부터 적절한 크기의 이미지가 필요하다.

 

 

<img src="img/hanpy.jpg" width="400" alt="즐거운 HTML 그림">
<img src="img/hanpy.jpg" height="300" alt="즐거운 HTML 그림">

위와 같이 width나 height 하나만 설정할 경우 설정 한 값은 변경이 되고, 나머지는 비율만 변경된다.

 

 

 

이미지 로딩

<img src="img/hanpy.jpg" alt="즐거운 HTML 그림" loading="lazy" />

위와 같이 lazy로 설정하면 이미지가 뷰포트의 일정 거리에 포함되어야 이미지가 다운로드 됩니다. 따라서 첫 페이지 로딩 시 모든 이미지를 불러오지 않기 때문에 불필요한 이미지 로딩 속도를 줄일 수 있습니다.