If you want to grab a users’ attention when he/she visits your website then adding images can be a fun thing to do. Images make the appearance of your website more appealing, thereby adding up to the overall beauty of your website. But how to add images to a website? Well, we have summed up ways using which images can be inserted in web pages.

How to add images in HTML

In order to add images to web pages use the tag. This tag is empty and consists of certain attributes and has no ending tag.

The attributes of the tag are; the src attribute that is used to define the path of the image and the alt attribute is used as an alternative text in scenarios when the image does not load due to some issue.

Here we have shown how to use this tag to add images.

HTML



<html>


    <head>


        <title>How to add Image in HTML</title>


    </head>

<body>

<img src=“astronaut.jpg” alt=“Astronaut” width=“300” height=“250”>

<img src=“road.jpg” alt=“Road” width=“300” height=“250”>

<img src=“sky.jpg” alt=“Sky” width=“300” height=“250”>

</body>

</html>

In the above code, we are adding three images to the web page using the tag. In each tag, the path of the images has been provided to the src attribute and an alternate text has been added to these tags. Moreover, we are also providing a certain width and height to the images.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-add-an-image-in-HTML-1.png" data-lazy- height="333" src="data:image/svg xml,” width=”1157″>

Images have been added to the page.

How to adjust image width and height

If you wish to alter the width and height of an image then simply use the width and height properties within the tag.

HTML

<img src=“astronaut.jpg” alt=“Astronaut” width=“350” height=“250”>


<img src=“sky.jpg” alt=“Astronaut” width=“400” height=“300”>

The above code will add images to the web page having the width and height specified using the width and height properties.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-add-an-image-in-HTML-2.png" data-lazy- height="399" src="data:image/svg xml,” width=”962″>

Both the images have different widths and heights.

How to add images from another folder

If the images that you want to embed into your web page are present in another folder as shown in the screenshot below then add the folder name in the src attribute.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-add-an-image-in-HTML-3.png" data-lazy- height="335" src="data:image/svg xml,” width=”1009″>

The images are present in the folder named “images”.

HTML

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-add-an-image-in-HTML-4.png" data-lazy- height="388" src="data:image/svg xml,” width=”1131″>

To demonstrate properly how to add images from another folder we have attached a screenshot of the code editor. The section highlighted in red shows that images are present in another folder that is present right next to the HTML file. The name of the folder along with the image name and format are being provided to the src attribute of the tag as highlighted in green.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-add-an-image-in-HTML-5.png" data-lazy- height="339" src="data:image/svg xml,” width=”1044″>

The image was added from another folder.

How to add images from another web page

In order to add images from another web page or source you have to provide the complete URL of that source to the src attribute of the tag.

HTML

<img src=“https://kirelos.com/wp-content/uploads/2022/04/echo/Logo-final.png” alt=“linuxhint.com”>

The above code will fetch the image from the specified URL and add it to our web page.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-add-an-image-in-HTML-6.png" data-lazy- height="98" src="data:image/svg xml,” width=”863″>

Image was successfully added from another web page.

How to add images as links

If you want to redirect your user to another web page then you can use images to perform this task.

HTML

<a href=“https://linuxhint.com/”>


  <img src=“planet.gif” alt=“Linux Hint” style=“width:100px;height:100px;”>


</a>

In the above code, we are first of all providing the link of the web page we want to redirect our users to and providing this link to the href attribute of the tag and then nesting our image which is a GIF in this case within the anchor tag.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-add-an-image-in-HTML-7.png" data-lazy- height="488" src="data:image/svg xml,” width=”680″>

When the user clicks the image he/she will be redirected to the web page provided as the link in the anchor tag.

Conclusion

For the purpose of adding images in HTML use the tag. This tag is empty, has no ending tag, and consists of two required attributes which are; the src attribute and the alt attribute. The src attribute is used to state the path of the image, whereas, the alt attribute states a text that is displayed as an alternate in case the image does not load due to some issue. Using this tag you can add images from another folder, or another website, or use them as links.

About the author

<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/B49B6FDCE1F74B3598C4C9BF564AEBEC-150×150.jpg625e2407153c4.jpg" height="112" src="data:image/svg xml,” width=”112″>

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.