### Problem Statement

You are required to implement lazy loading for images in an HTML document. Lazy loading is a technique that defers the loading of images until they are needed, typically when they enter the viewport. This can significantly improve the performance of web pages by reducing the initial load time and bandwidth usage.

### Requirements

1. **HTML Structure**:
   - Include multiple `img` elements in the HTML file.
   - Use the `loading="lazy"` attribute to defer the loading of images until they are needed.

2. **Images**:
   - Use the provided URLs for the images:
     - Example: `"https://loremflickr.com/449/449`

### Example

Consider the following HTML structure for your implementation:

**Input**:
- HTML file with multiple `img` elements.

**Expected Behavior**:
- Images should only load when they enter the viewport, improving the page's initial load time and performance.

### Constraints

- Ensure that all images use the `loading="lazy"` attribute to defer loading.
- Verify that the images load correctly when they come into the viewport.

index.html

Lazy Load Images

### Editorial

Lazy loading images is an essential optimization technique to enhance web performance by deferring the loading of images until they are actually needed. This approach significantly reduces the initial load time and bandwidth usage, leading to a smoother user experience.

### Approach

1. **Understanding Lazy Loading**:
   - Lazy loading is a strategy to load images only when they are about to be viewed, rather than during the initial page load.
   - This is achieved by using the `loading="lazy"` attribute in the `<img>` tags.

2. **HTML Structure**:
   - In the provided HTML example, multiple images are included using `<img>` tags with the `loading="lazy"` attribute.
   - The `src` attribute specifies the image URL, and the `width` and `height` attributes define the image dimensions.

3. **Benefits of Lazy Loading**:
   - **Improved Performance**: By deferring the loading of images, the initial page load time is reduced, resulting in faster page rendering.
   - **Reduced Bandwidth Usage**: Only the images that are viewed are loaded, conserving bandwidth, especially on mobile devices and slower connections.
   - **Enhanced User Experience**: Users experience a smoother and faster-loading webpage, as images load only when necessary.

### Example Implementation

Here is the provided HTML structure that demonstrates lazy loading:

```html
<html>
    <head>
     <title>Lazy Load image</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>
    <img loading="lazy" src="https://loremflickr.com/400/400" width="400" height="400" alt="">
    <img loading="lazy" src="https://loremflickr.com/401/401" width="401" height="401" alt="">
    <img loading="lazy" src="https://loremflickr.com/402/402" width="402" height="402" alt="">
    <img loading="lazy" src="https://loremflickr.com/403/403" width="403" height="403" alt="">
    <img loading="lazy" src="https://loremflickr.com/404/404" width="404" height="404" alt="">
    <img loading="lazy" src="https://loremflickr.com/405/405" width="405" height="405" alt="">
    <img loading="lazy" src="https://loremflickr.com/406/406" width="406" height="406" alt="">
    <img loading="lazy" src="https://loremflickr.com/407/407" width="407" height="407" alt="">
    <img loading="lazy" src="https://loremflickr.com/408/408" width="408" height="408" alt="">
    <img loading="lazy" src="https://loremflickr.com/409/409" width="409" height="409" alt="">
    <img loading="lazy" src="https://loremflickr.com/410/410" width="410" height="410" alt="">
    <img loading="lazy" src="https://loremflickr.com/411/411" width="411" height="411" alt="">
    <img loading="lazy" src="https://loremflickr.com/412/412" width="412" height="412" alt="">
    <img loading="lazy" src="https://loremflickr.com/413/413" width="413" height="413" alt="">
    <img loading="lazy" src="https://loremflickr.com/414/414" width="414" height="414" alt="">
    <img loading="lazy" src="https://loremflickr.com/415/415" width="415" height="415" alt="">
    <img loading="lazy" src="https://loremflickr.com/416/416" width="416" height="416" alt="">
    <img loading="lazy" src="https://loremflickr.com/417/417" width="417" height="417" alt="">
    <img loading="lazy" src="https://loremflickr.com/418/418" width="418" height="418" alt="">
    <img loading="lazy" src="https://loremflickr.com/419/419" width="419" height="419" alt="">
    <img loading="lazy" src="https://loremflickr.com/420/420" width="420" height="420" alt="">
    <img loading="lazy" src="https://loremflickr.com/421/421" width="421" height="421" alt="">
    <img loading="lazy" src="https://loremflickr.com/422/422" width="422" height="422" alt="">
    <img loading="lazy" src="https://loremflickr.com/423/423" width="423" height="423" alt="">
    <img loading="lazy" src="https://loremflickr.com/424/424" width="424" height="424" alt="">
    <img loading="lazy" src="https://loremflickr.com/425/425" width="425" height="425" alt="">
    <img loading="lazy" src="https://loremflickr.com/426/426" width="426" height="426" alt="">
    <img loading="lazy" src="https://loremflickr.com/427/427" width="427" height="427" alt="">
    <img loading="lazy" src="https://loremflickr.com/428/428" width="428" height="428" alt="">
    <img loading="lazy" src="https://loremflickr.com/429/429" width="429" height="429" alt="">
    <img loading="lazy" src="https://loremflickr.com/430/430" width="430" height="430" alt="">
    <img loading="lazy" src="https://loremflickr.com/431/431" width="431" height="431" alt="">
    <img loading="lazy" src="https://loremflickr.com/432/432" width="432" height="432" alt="">
    <img loading="lazy" src="https://loremflickr.com/433/433" width="433" height="433" alt="">
    <img loading="lazy" src="https://loremflickr.com/434/434" width="434" height="434" alt="">
    <img loading="lazy" src="https://loremflickr.com/435/435" width="435" height="435" alt="">
    <img loading="lazy" src="https://loremflickr.com/436/436" width="436" height="436" alt="">
    <img loading="lazy" src="https://loremflickr.com/437/437" width="437" height="437" alt="">
    <img loading="lazy" src="https://loremflickr.com/438/438" width="438" height="438" alt="">
    <img loading="lazy" src="https://loremflickr.com/439/439" width="439" height="439" alt="">
    <img loading="lazy" src="https://loremflickr.com/440/440" width="440" height="440" alt="">
    <img loading="lazy" src="https://loremflickr.com/441/441" width="441" height="441" alt="">
    <img loading="lazy" src="https://loremflickr.com/442/442" width="442" height="442" alt="">
    <img loading="lazy" src="https://loremflickr.com/443/443" width="443" height="443" alt="">
    <img loading="lazy" src="https://loremflickr.com/444/444" width="444" height="444" alt="">
    <img loading="lazy" src="https://loremflickr.com/445/445" width="445" height="445" alt="">
    <img loading="lazy" src="https://loremflickr.com/446/446" width="446" height="446" alt="">
    <img loading="lazy" src="https://loremflickr.com/447/447" width="447" height="447" alt="">
    <img loading="lazy" src="https://loremflickr.com/448/448" width="448" height="448" alt="">
    <img loading="lazy" src="https://loremflickr.com/449/449" width="449" height="449" alt="">
    <img loading="lazy" src="https://loremflickr.com/450/450" width="450" height="450" alt="">
    <img loading="lazy" src="https://loremflickr.com/451/451" width="451" height="451" alt="">
    <img loading="lazy" src="https://loremflickr.com/452/452" width="452" height="452" alt="">
    <img loading="lazy" src="https://loremflickr.com/453/453" width="453" height="453" alt="">
    <img loading="lazy" src="https://loremflickr.com/454/454" width="454" height="454" alt="">
    <img loading="lazy" src="https://loremflickr.com/455/455" width="455" height="455" alt="">
    <img loading="lazy" src="https://loremflickr.com/456/456" width="456" height="456" alt="">
    <img loading="lazy" src="https://loremflickr.com/457/457" width="457" height="457" alt="">
    <img loading="lazy" src="https://loremflickr.com/458/458" width="458" height="458" alt="">
    <img loading="lazy" src="https://loremflickr.com/459/459" width="459" height="459" alt="">
    <img loading="lazy" src="https://loremflickr.com/460/460" width="460" height="460" alt="">
    <img loading="lazy" src="https://loremflickr.com/461/461" width="461" height="461" alt="">
    </body>
</html>
```

### How It Works

- Each image tag includes the `loading="lazy"` attribute, instructing the browser to load the image only when it is about to be displayed in the viewport.
- The `src` attribute specifies the image URL, and the `width` and `height` attributes help the browser reserve the appropriate space on the page.

### Conclusion

Implementing lazy loading for images is a straightforward yet powerful optimization technique. By using the `loading="lazy"` attribute, web developers can enhance the performance and user experience of their websites, especially those with numerous images. This practice ensures that resources are utilized efficiently, making web pages load faster and perform better.