HTML Images

HTML Images

HTML images are used to display pictures, graphics, illustrations, and photographs on web pages. The HTML <img> tag is used to embed an image into an HTML document.

1. The HTML <img> Tag

The <img> tag is an empty element, which means it does not require a closing tag. It uses the src attribute to specify the image location and the alt attribute to provide alternative text.

<img src="image.jpg" alt="Beautiful Nature">

2. HTML Image Attributes

The <img> tag supports several attributes that control how images are displayed.

3. Set Image Width and Height

You can use the width and height attributes to specify the dimensions of an image.

<img src="nature.jpg" alt="Nature Image" width="400" height="300">

4. Images from Different Folders

You can display images stored in different folders by specifying their correct file paths.

Example: Image inside an images folder

<img src="images/photo.jpg" alt="My Photo">

Example: Image from a parent folder

<img src="../photo.jpg" alt="My Photo">

5. Display an Image Using an Online URL

You can also display images hosted on another website using their image URL.

<img src="https://example.com/image.jpg" alt="Online Image">

6. HTML Image with CSS Styling

CSS allows you to customize images by changing their dimensions, borders, shadows, and other visual properties.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Images</title>

    <style>
        img {
            width: 300px;
            height: 200px;
            border-radius: 10px;
            object-fit: cover;
            border: 2px solid #ddd;
        }
    </style>
</head>
<body>

    <h2>My Image</h2>
    <img src="nature.jpg" alt="Beautiful Nature">

</body>
</html>

7. Make Images Responsive

Responsive images automatically adjust to fit different screen sizes, including mobile phones, tablets, and desktop computers.

img {
    max-width: 100%;
    height: auto;
}

8. Lazy Loading Images

The loading="lazy" attribute tells the browser to defer loading an image until it is near the visible area of the page. This can improve initial page loading performance.

<img src="gallery.jpg" alt="Photo Gallery" loading="lazy">

9. Different Image Formats

HTML supports several image formats. Each format has different features and uses.

10. Important Points to Remember

• The <img> tag is used to display images in HTML.
• The src attribute specifies the image location.
• The alt attribute provides alternative text.
• The width and height attributes define image dimensions.
• CSS can be used to style and make images responsive.
• The loading="lazy" attribute can improve initial page loading performance.

Conclusion

HTML images make web pages more attractive, informative, and engaging. By learning the <img> tag and its attributes, you can easily add and customize images on your website.