How to insert an image in HTML?

Updated On: 2024-06-02

An image plays a vital role in web and helps in many ways to make the internet meaningful.

What is an image?

An image is a visual representation of something, such as a photo, drawing, or graphic, usually in digital form.

In digital contexts, images can be created, viewed, manipulated, and stored on computers and other electronic devices. Common image file format includes JPEG, PNG, GIF, BMP, and SVG.

Ways to insert an image in HTML

We can insert an image in HTML in two ways.

1) Using img tag and

2) Using CSS background Image property

Insertion using <img> tag

 
<!DOCTYPE html>
<html>
    <head>
        <title>
            Image Insertion in HTML
        </title>
    </head>
    <body>
        <h2>Using the img tag</h2>
        <img
            src=
"img/image.png"
            alt="Description of the image"
        />
    </body>
</html>

Insertion using CSS background image property

<!DOCTYPE html>
<html>
    <head>
        <title>Image Insertion in HTML</title>
        <style>
            .image-container {
                background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240318162718/download.png");
                width: 200px;
                height: 200px;
                background-repeat: no-repeat;
                
            }
        </style>
    </head>
    <body>
        <h2>
            Using CSS background image property
        </h2>
        <div class="image-container"></div>
    </body>
</html>