Format
<img src="directory/200x200.png" alt="My Image">
- src : 이미지의 경로
- alt : 이미지를 표시할 수 없을 때 출력할 내용
- width : 이미지의 가로 크기
- height : 이미지의 세로 크기
width와 hieght 하나만 정한다면 비율 맞춰서 따라옴
- loading : 이미지 로딩 방식 (= “lazy”: 느리게 로드)(= default: eager)
Example
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<img src="images/200x200.png" alt="My Image">
<img src="images/200x200.png" alt="My Image" width="100">
<img src="images/200x200.png" alt="My Image" height="150">
<img src="images/200x200.png" alt="My Image" width="100" height="200">
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Lazy Loading</title>
<style>
body { font-family: Consolas, sans-serif; }
h1 { margin: 30px 0px; text-align: center; }
img { max-width: 100%; display: block; margin: 0px 0px 500px 0px; }
</style>
</head>
<body>
<div class="a">
<h1>Lazy Loding</h1>
</div>
<div class="b">
<img src="images/img-01.jpg" alt="" loading="lazy">
<img src="images/img-02.jpg" alt="" loading="lazy">
<img src="images/img-03.jpg" alt="" loading="lazy">
<img src="images/img-04.jpg" alt="" loading="lazy">
<img src="images/img-05.jpg" alt="" loading="lazy">
<img src="images/img-06.jpg" alt="" loading="lazy">
<img src="images/img-07.jpg" alt="" loading="lazy">
<img src="images/img-08.jpg" alt="" loading="lazy">
<img src="images/img-09.jpg" alt="" loading="lazy">
<img src="images/img-10.jpg" alt="" loading="lazy">
<img src="images/img-11.jpg" alt="" loading="lazy">
<img src="images/img-12.jpg" alt="" loading="lazy">
<img src="images/img-13.jpg" alt="" loading="lazy">
<img src="images/img-14.jpg" alt="" loading="lazy">
<img src="images/img-15.jpg" alt="" loading="lazy">
<img src="images/img-16.jpg" alt="" loading="lazy">
<img src="images/img-17.jpg" alt="" loading="lazy">
<img src="images/img-18.jpg" alt="" loading="lazy">
<img src="images/img-19.jpg" alt="" loading="lazy">
<img src="images/img-20.jpg" alt="" loading="lazy">
</div>
</body>
</html>