728x90
SMALL
#HTML
#img
#img tag to insert
img
img는 HTML is included in this page. I'm sorry.
- src : current location
- alt : I don't know what to do
- width : width
- Height: height
- loading : Current status
Example 1
- Change width and height.
- I'm sorry for the inconvenience.
<!doctype html>
<html lang="en">
<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">
</body>
</html>Search engines hate the lack of alt attributes. Therefore, it is better to include alt="".
Example 2
- If only the horizontal size is determined by the width attribute, the vertical size is determined according to the original aspect ratio.
- If only the vertical size is determined by the height attribute, the horizontal size is determined according to the original aspect ratio.
- If the horizontal size and vertical size are determined at the same time, the size will be set regardless of the original aspect ratio.
<!doctype html>
<html lang="en">
<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>Example 3
You can decide how to load the image using the loading attribute.
The default is eager, loading all images.
If set to lazy, it will be called when the image enters some distance into the viewport. You can increase page speed by reducing unnecessary image loading.
<!doctype html>
<html lang="en">
<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>Setting the value of loading to lazy will not load all images, just some of them.
Not all browsers support the loading property. Especially if IE is a problem, but if you want to achieve this effect in IE, use a script such as Lozad.js.
728x90
LIST
'HTML' 카테고리의 다른 글
| [HTML] Tags that wrap HTML/figure, figcaption/image, etc. and create captions (0) | 2022.08.22 |
|---|---|
| [HTML] HTML / caption / tag to attach caption to table (table) (0) | 2022.08.20 |
| [HTML] Create HTML/table, thead, tbody, tfoot, th, tr, td/table (0) | 2022.08.20 |
| [HTML] HTML / a / Creating links (0) | 2022.08.19 |
| [HTML] HTML / pre / tag to output as you type (0) | 2022.08.12 |